Merge pull request #14192 from primefaces/doc-refactor

Doc refactor

src/app/showcase/doc/Image/accessibilitydoc.ts

@@ -1,8 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-docsectiontext [title]="title" [id]="id">
+    template: ` <app-docsectiontext>
         <h3>Screen Reader</h3>
         <p>
             The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <a href="/configuration/#locale">locale</a> API by default, with <i>previewButtonProps</i>you may use
@@ -43,7 +43,5 @@ import { Component, Input } from '@angular/core';
     </app-docsectiontext>`
 })
 export class AccessibilityDoc {
-    @Input() id: string;
 
-    @Input() title: string;
 }

src/app/showcase/doc/Image/basicdoc.ts

@@ -1,22 +1,19 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'basic-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>Image is used as the native <i>img</i> element and supports all properties that the native element has. For multiple image, see <a [routerLink]="['/galleria']">Galleria.</a></p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250"></p-image>
         </div>
         <app-code [code]="code" selector="image-basic-demo"></app-code>
-    </section>`
+    `
 })
 export class BasicDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code: Code = {
         basic: `

src/app/showcase/doc/Image/imagedoc.module.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { ImageModule } from 'primeng/image';
 import { AppDocModule } from '../../layout/doc/app.doc.module';
-import { AppCodeModule } from '../../layout/doc/code/app.code.component';
+import { AppCodeModule } from '../../layout/doc/app.code.component';
 import { BasicDoc } from './basicdoc';
 import { TemplateDoc } from './templatedoc';
 import { PreviewDoc } from './previewdoc';

src/app/showcase/doc/Image/importdoc.ts

@@ -1,19 +1,16 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'import-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id"> </app-docsectiontext>
+    template: `
         <app-code [code]="code" [hideToggleCode]="true"></app-code>
-    </section>`
+    `
 })
 export class ImportDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code: Code = {
         typescript: `import { ImageModule } from 'primeng/image';`
     };
+
 }

src/app/showcase/doc/Image/previewdoc.ts

@@ -1,22 +1,19 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'image-preview-demo',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250" [preview]="true"></p-image>
         </div>
         <app-code [code]="code" selector="image-preview-demo"></app-code>
-    </section>`
+    `
 })
 export class PreviewDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code: Code = {
         basic: `

src/app/showcase/doc/Image/previewimagesourcedoc.ts

@@ -1,22 +1,19 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'image-preview-source-demo',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>In case that you want to show different image on preview, you can set <i>previewImageSrc</i> attribute. It could come handy when wanted to use smaller image version at first and bigger one on preview.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" previewImageSrc="https://primefaces.org/cdn/primeng/images/galleria/galleria2.jpg" alt="Image" width="250" [preview]="true"></p-image>
         </div>
         <app-code [code]="code" selector="image-preview-demo"></app-code>
-    </section>`
+    `
 })
 export class PreviewImageSourceDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code: Code = {
         basic: `

src/app/showcase/doc/Image/styledoc.ts

@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'style-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
         </app-docsectiontext>
         <div class="doc-tablewrapper">
@@ -50,10 +50,8 @@ import { Component, Input } from '@angular/core';
                 </tbody>
             </table>
         </div>
-    </section>`
+    `
 })
 export class StyleDoc {
-    @Input() id: string;
-
-    @Input() title: string;
+
 }

src/app/showcase/doc/Image/templatedoc.ts

@@ -1,10 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'template-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
@@ -15,12 +15,9 @@ import { Code } from '../../domain/code';
             </p-image>
         </div>
         <app-code [code]="code" selector="image-template-demo"></app-code>
-    </section>`
+    `
 })
 export class TemplateDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code: Code = {
         basic: `

src/app/showcase/doc/accessibility/accessibilitydoc.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { CheckboxModule } from 'primeng/checkbox';
 import { AppDocModule } from '../../layout/doc/app.doc.module';
-import { AppCodeModule } from '../../layout/doc/code/app.code.component';
+import { AppCodeModule } from '../../layout/doc/app.code.component';
 import { ColorsDoc } from './colorsdoc';
 import { FormControlsDoc } from './formcontrolsdoc';
 import { IntroductionDoc } from './introductiondoc';

src/app/showcase/doc/accessibility/colorsdoc.ts

@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'colors-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>Colors on a web page should aim a contrast ratio of at least <strong>4.5:1</strong> and consider a selection of colors that do not cause vibration.</p>
             <h3>Good Contrast</h3>
             <p>Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
@@ -40,10 +40,8 @@ import { Component, Input } from '@angular/core';
                 </div>
             </div>
         </app-docsectiontext>
-    </section>`
+   `
 })
 export class ColorsDoc {
-    @Input() id: string;
 
-    @Input() title: string;
 }

src/app/showcase/doc/accessibility/formcontrolsdoc.ts

@@ -1,10 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'form-controls-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: ` 
+        <app-docsectiontext>
             <p>
                 Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used
                 with space key as well to trigger.
@@ -21,12 +21,9 @@ import { Code } from '../../domain/code';
             <p class="doc-section-description">Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
             <app-code [code]="code4" [hideToggleCode]="true"></app-code>
         </app-docsectiontext>
-    </section>`
+    `
 })
 export class FormControlsDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code1: Code = {
         html: `<button (click)="onButtonClick($event)">Click></button>`

src/app/showcase/doc/accessibility/introductiondoc.ts

@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'introduction-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: ` 
+        <app-docsectiontext>
             <p class="line-height-3  bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px;">
                 Accessibility is a major concern of the Prime UI libraries and PrimeNG is no exception. <a href="https://www.primetek.com.tr" class="text-white">PrimeTek</a> teams have initiated a significant process to review and enhance the
                 accessibility features of the components. This guide documents the foundation of the general guidelines that PrimeNG will follow and each component documentation will have a separate <b>Accessibility</b> section that states the
@@ -43,10 +43,8 @@ import { Component, Input } from '@angular/core';
                 impairments result in better design for any user.
             </p>
         </app-docsectiontext>
-    </section>`
+    `
 })
 export class IntroductionDoc {
-    @Input() id: string;
 
-    @Input() title: string;
 }

src/app/showcase/doc/accessibility/semantichtmldoc.ts

@@ -1,10 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'semantic-html-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: `
+        <app-docsectiontext>
             <p>
                 HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular
                 <i>div</i> elements with classes are used. Consider the following example that do not mean too much for readers.
@@ -13,12 +13,9 @@ import { Code } from '../../domain/code';
             <p class="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
         </app-docsectiontext>
-    </section>`
+    `
 })
 export class SemanticHTMLDoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code1: Code = {
         html: `<div class="header"/>

src/app/showcase/doc/accessibility/waiariadoc.ts

@@ -1,10 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Code } from '../../domain/code';
 
 @Component({
     selector: 'wai-aria-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: ` 
+        <app-docsectiontext>
             <p>
                 ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as
                 a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeNG. These types of components must
@@ -36,12 +36,9 @@ import { Code } from '../../domain/code';
                 <p-checkbox inputId="binary" [binary]="true"></p-checkbox>
             </div>
         </app-docsectiontext>
-    </section>`
+    `
 })
 export class WAIARIADoc {
-    @Input() id: string;
-
-    @Input() title: string;
 
     code1: Code = {
         basic: `<input type="checkbox" value="Prime" name="ui" checked/>`

src/app/showcase/doc/accessibility/wcagdoc.ts

@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'wcag-doc',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
+    template: ` 
+        <app-docsectiontext>
             <p>
                 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" alt="WCAG Website">WCAG</a> refers to <strong>Web Content Accessibility Guideline</strong>, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide
                 Web Consortium). WCAG consists of recommendations for making the web content more accessible. PrimeNG components aim high level of WCAG compliancy in the near future.
@@ -13,10 +13,8 @@ import { Component, Input } from '@angular/core';
                 <a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive</a> of the European Union.
             </p>
         </app-docsectiontext>
-    </section>`
+    `
 })
 export class WCAGDoc {
-    @Input() id: string;
 
-    @Input() title: string;
 }

src/app/showcase/doc/accordion/accessibilitydoc.ts

@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
     template: ` <div>
-        <app-docsectiontext [title]="title" [id]="id">
+        <app-docsectiontext>
             <h3>Screen Reader</h3>
             <p>
                 Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
@@ -74,7 +74,5 @@ import { Component, Input } from '@angular/core';
     </div>`
 })
 export class AccessibilityDoc {
-    @Input() id: string;
-
-    @Input() title: string;
+
 }

src/app/showcase/doc/accordion/accordiondoc.module.ts

@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
 import { AccordionModule } from 'primeng/accordion';
 import { ButtonModule } from 'primeng/button';
 import { AppDocModule } from '../../layout/doc/app.doc.module';
-import { AppCodeModule } from '../../layout/doc/code/app.code.component';
+import { AppCodeModule } from '../../layout/doc/app.code.component';
 import { AccessibilityDoc } from './accessibilitydoc';
 import { BasicDoc } from './basicdoc';
 import { ControlledDoc } from './controlleddoc';