Update menu, add guides section and replace accessibility doc

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Code } from '../../domain/code';
+import { Code } from '../../../domain/code';
 
 @Component({
     selector: 'form-controls-doc',

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Code } from '../../domain/code';
+import { Code } from '../../../domain/code';
 
 @Component({
     selector: 'semantic-html-doc',

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Code } from '../../domain/code';
+import { Code } from '../../../domain/code';
 
 @Component({
     selector: 'wai-aria-doc',

src/app/showcase/doc/accessibility/accessibilitydoc.module.ts → src/app/showcase/doc/guides/guidesdoc.module.ts

@@ -1,20 +1,20 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { AppDocModule } from '../../layout/doc/app.doc.module';
+import { AppCodeModule } from '../../layout/doc/app.code.component';
 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/app.code.component';
-import { ColorsDoc } from './colorsdoc';
-import { FormControlsDoc } from './formcontrolsdoc';
-import { IntroductionDoc } from './introductiondoc';
-import { SemanticHTMLDoc } from './semantichtmldoc';
-import { WAIARIADoc } from './waiariadoc';
-import { WCAGDoc } from './wcagdoc';
+import { ColorsDoc } from './accessibility/colorsdoc';
+import { FormControlsDoc } from './accessibility/formcontrolsdoc';
+import { IntroductionDoc } from './accessibility/introductiondoc';
+import { SemanticHTMLDoc } from './accessibility/semantichtmldoc';
+import { WAIARIADoc } from './accessibility/waiariadoc';
+import { WCAGDoc } from './accessibility/wcagdoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule],
     exports: [AppDocModule],
     declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc]
 })
-export class AccessibilityDocModule {}
+export class GuidesDocModule {}

src/app/showcase/layout/app.routes.ts

@@ -9,6 +9,7 @@ export const routes: Routes = [
         component: AppMainComponent,
         children: [
             { path: '', redirectTo: 'installation', pathMatch: 'full' },
+            { path: 'accessibility', redirectTo: 'guides/accessibility', pathMatch: 'full' },
             { path: 'installation', loadChildren: () => import('../pages/installation/installation.module').then((m) => m.InstallationModule) },
             { path: 'configuration', loadChildren: () => import('../pages/configuration/configurationdemo.module').then((m) => m.ConfigurationDemoModule) },
             { path: 'playground', loadChildren: () => import('../pages/playground/playground.module').then((m) => m.PlaygroundModule) },
@@ -109,13 +110,13 @@ export const routes: Routes = [
             { path: 'treeselect', loadChildren: () => import('../pages/treeselect/treeselectdemo.module').then((m) => m.TreeSelectDemoModule) },
             { path: 'treetable', loadChildren: () => import('../pages/treetable/treetabledemo.module').then((m) => m.TreeTableDemoModule) },
             { path: 'tristatecheckbox', loadChildren: () => import('../pages/tristatecheckbox/tristatecheckboxdemo.module').then((m) => m.TriStateCheckboxDemoModule) },
-            { path: 'accessibility', loadChildren: () => import('../pages/accessibility/accessibilitydemo.module').then((m) => m.AccessibilityDemoModule) },
             { path: 'scroller', loadChildren: () => import('../pages/scroller/scrollerdemo.module').then((m) => m.ScrollerDemoModule) },
             { path: 'uikit', loadChildren: () => import('../pages/uikit/uikit.module').then((m) => m.UIKitModule) },
             { path: 'autofocus', loadChildren: () => import('../pages/autofocus/autofocusdemo.module').then((m) => m.AutoFocusDemoModule) },
             { path: 'overlay', loadChildren: () => import('../pages/overlay/overlaydemo.module').then((m) => m.OverlayDemoModule) },
             { path: 'animateonscroll', loadChildren: () => import('../pages/animate/animateonscrolldemo.module').then((m) => m.AnimateOnScrollDemoModule) },
-            { path: 'templates', loadChildren: () => import('../pages/templates/templates.module').then((m) => m.TemplatesModule) }
+            { path: 'templates', loadChildren: () => import('../pages/templates/templates.module').then((m) => m.TemplatesModule) },
+            { path: 'guides', loadChildren: () => import('../pages/guides/guides.module').then((m) => m.GuidesModule) }
         ]
     },
     { path: 'notfound', loadChildren: () => import('../pages/notfound/notfound.module').then((m) => m.NotFoundModule) },

src/app/showcase/pages/accessibility/accessibilitydemo.component.ts → src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { ColorsDoc } from '../../doc/accessibility/colorsdoc';
-import { FormControlsDoc } from '../../doc/accessibility/formcontrolsdoc';
-import { IntroductionDoc } from '../../doc/accessibility/introductiondoc';
-import { SemanticHTMLDoc } from '../../doc/accessibility/semantichtmldoc';
-import { WAIARIADoc } from '../../doc/accessibility/waiariadoc';
-import { WCAGDoc } from '../../doc/accessibility/wcagdoc';
+import { ColorsDoc } from '../../../doc/guides/accessibility/colorsdoc';
+import { FormControlsDoc } from '../../../doc/guides/accessibility/formcontrolsdoc';
+import { IntroductionDoc } from '../../../doc/guides/accessibility/introductiondoc';
+import { SemanticHTMLDoc } from '../../../doc/guides/accessibility/semantichtmldoc';
+import { WAIARIADoc } from '../../../doc/guides/accessibility/waiariadoc';
+import { WCAGDoc } from '../../../doc/guides/accessibility/wcagdoc';
 
 @Component({
     selector: 'accessibility',

src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html

@@ -0,0 +1 @@
+<app-doc docTitle="CSS Layer - PrimeNG" header="CSS Layer"></app-doc>

src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'css-layer',
+    templateUrl: './csslayerdemo.component.html'
+})
+export class CssLayerDemoComponent {
+    docs = [];
+}

src/app/showcase/pages/guides/guides-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AccessibilityDemoComponent } from './accessibility/accessibilitydemo.component';
+import { TemplateUpdateDemoComponent } from './templateupdate/templateupdatedemo.component';
+import { CssLayerDemoComponent } from './csslayer/csslayerdemo.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: '', redirectTo: 'accessibility', pathMatch: 'full' },
+            { path: 'accessibility', component: AccessibilityDemoComponent },
+            { path: 'templateupdate', component: TemplateUpdateDemoComponent },
+            { path: 'csslayer', component: CssLayerDemoComponent }
+        ])
+    ],
+    exports: [RouterModule]
+})
+export class GuidesRoutingModule {}

src/app/showcase/pages/guides/guides.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { AccessibilityDemoComponent } from './accessibility/accessibilitydemo.component';
+import { GuidesRoutingModule } from './guides-routing.module';
+import { TemplateUpdateDemoComponent } from './templateupdate/templateupdatedemo.component';
+import { CssLayerDemoComponent } from './csslayer/csslayerdemo.component';
+import { GuidesDocModule } from '../../doc/guides/guidesdoc.module';
+
+@NgModule({
+    imports: [CommonModule, GuidesRoutingModule, GuidesDocModule],
+    declarations: [AccessibilityDemoComponent, TemplateUpdateDemoComponent, CssLayerDemoComponent]
+})
+export class GuidesModule {}

src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.html

@@ -0,0 +1 @@
+<app-doc docTitle="Template Update - PrimeNG" header="Template Update"></app-doc>

src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'template-update',
+    templateUrl: './templateupdatedemo.component.html'
+})
+export class TemplateUpdateDemoComponent {
+    docs = [];
+}

src/assets/showcase/data/menu.json

@@ -506,14 +506,26 @@
             "href": "https://blocks.primeng.org"
         },
         {
-            "name": "PrimeFlex CSS",
-            "icon": "pi pi-table",
-            "href": "https://primeflex.org"
-        },
-        {
-            "name": "Accessibility",
-            "icon": "pi pi-users",
-            "routerLink": "/accessibility"
+            "name": "Guides",
+            "icon": "pi pi-book",
+            "children": [
+                {
+                    "name": "Accessibility",
+                    "routerLink": "/guides/accessibility"
+                },
+                {
+                    "name": "CSS Layer",
+                    "routerLink": "/guides/csslayer"
+                },
+                {
+                    "name": "Template Update",
+                    "routerLink": "/guides/templateupdate"
+                },
+                {
+                    "name": "PrimeTV",
+                    "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
+                }
+            ]
         },
         {
             "name": "Support",
@@ -537,11 +549,6 @@
                 }
             ]
         },
-        {
-            "name": "PrimeTV",
-            "icon": "pi pi-youtube",
-            "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
-        },
         {
             "name": "Discover",
             "icon": "pi pi-search",
@@ -581,6 +588,10 @@
                 {
                     "name": "PrimeGear",
                     "href": "https://gear.primefaces.org"
+                },
+                {
+                    "name": "PrimeFlex CSS",
+                    "href": "https://primeflex.org"
                 }
             ]
         }