Refactor

src/app/showcase/doc/guides/csslayer/specificitydoc.ts

@@ -1,16 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Code } from 'src/app/showcase/domain/code';
 
 @Component({
     selector: 'specificity-doc',
-
     template: `
         <app-docsectiontext>
             <p class="notification">A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.</p>
             <p>
                 The <i>&#64;layer</i> is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
-                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. In styled mode, PrimeNG wraps the built-in style classes under the <i>primeNG</i> cascade layer to make the library styles easy to override. CSS
-                in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
+                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. PrimeNG wraps the built-in style classes under the <i>primeNG</i> cascade layer to make the library styles easy to override. CSS in your app
+                without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
             </p>
             <p>
                 For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, <i>.p-inputswitch .p-inputswitch-slider</i> selector needs to be overriden. Without
@@ -21,38 +20,48 @@ import { Code } from 'src/app/showcase/domain/code';
                 <p-inputSwitch [(ngModel)]="checked" styleClass="my-inputswitch" />
             </div>
 
-            <app-code [code]="code" selector="specificity-demo" [hideToggleCode]="true" [hideCodeSandbox]="true" [hideStackBlitz]="true"></app-code>
-            <p>Layers also make it possible to use CSS Modules, view the <a [routerLink]="['/theming/#cssmodules']"> CSS Modules </a> guide for examples.</p>
+            <app-code [code]="code" selector="specificity-demo" [hideStackBlitz]="true" [hideCodeSandbox]="true"></app-code>
         </app-docsectiontext>
     `,
+    encapsulation: ViewEncapsulation.None,
     styles: `
-   :host ::ng-deep {
-    .my-inputswitch .p-inputswitch-slider {
-        border-radius: 0;
-     }
-     .my-inputswitch .p-inputswitch-slider:before  {
-        border-radius: 0;
-     }
- }
-    `
+        .my-inputswitch .p-inputswitch-slider {
+            border-radius: 0;
+        }
+        .my-inputswitch .p-inputswitch-slider:before  {
+            border-radius: 0;
+        }`
 })
 export class SpecificityDoc {
     checked: boolean = false;
-
     code: Code = {
-        basic: `<p-inputSwitch [(ngModel)]="checked" styleClass="my-switch-slider" />
-        
-<style>
-
-.my-switch-slider {
+        basic: `<p-inputSwitch [(ngModel)]="checked" styleClass="my-switch-slider" />`,
+        scss: `.my-inputswitch .p-inputswitch-slider {
     border-radius: 0;
 }
 
-.my-switch-slider:before {
+.my-inputswitch .p-inputswitch-slider:before  {
     border-radius: 0;
-}
+}`,
+        typescript: `import { Component, ViewEncapsulation } from '@angular/core';
 
-</style>
-        `
+@Component({
+    template: \`
+        <div class="card flex justify-content-center">
+            <p-inputSwitch [(ngModel)]="checked" styleClass="my-inputswitch" />
+        </div>\`,
+    encapsulation: ViewEncapsulation.None,
+    styles: \`
+        .my-inputswitch .p-inputswitch-slider {
+            border-radius: 0;
+        }
+        .my-inputswitch .p-inputswitch-slider:before  {
+            border-radius: 0;
+        }
+    \`
+})
+export class ExampleComponent {
+    checked: boolean = false;
+}`
     };
 }

src/app/showcase/layout/doc/app.code.component.ts

@@ -13,6 +13,7 @@ import { useCodeSandbox, useStackBlitz } from './codeeditor';
                 <ng-container *ngIf="fullCodeVisible">
                     <button *ngIf="code.html" (click)="changeLang('html')" class="py-0 px-2 border-round h-2rem" [ngClass]="{ 'code-active': lang === 'html' }"><span>HTML</span></button>
                     <button *ngIf="code.typescript" (click)="changeLang('typescript')" class="py-0 px-2 border-round h-2rem" [ngClass]="{ 'code-active': lang === 'typescript' }"><span>TS</span></button>
+                    <button *ngIf="code.scss" (click)="changeLang('scss')" class="py-0 px-2 border-round h-2rem" [ngClass]="{ 'code-active': lang === 'scss' }"><span>SCSS</span></button>
 
                     <button
                         *ngIf="code.data"
@@ -160,7 +161,7 @@ export class AppCodeComponent {
 
     toggleCode() {
         this.fullCodeVisible = !this.fullCodeVisible;
-        this.fullCodeVisible && (this.lang = 'html');
+        this.fullCodeVisible && (this.code.html ? (this.lang = 'html') : (this.lang = 'typescript'));
         !this.fullCodeVisible && (this.lang = 'basic');
     }
 

src/app/showcase/layout/doc/app.docsection.component.ts

@@ -7,16 +7,16 @@ import { Doc } from 'src/app/showcase/domain/doc';
         <ng-container *ngIf="docs && docs.length">
             <section class="py-4" *ngFor="let doc of docs; trackBy: trackById">
                 <ng-container *ngIf="!doc.component && doc.children">
-                    <app-docsectiontext [title]="doc.label" [id]="doc.id" [level]="2" />
+                    <app-docsectiontext [title]="doc.label" [id]="doc.id" [level]="2" [description]="doc?.description" />
 
                     <ng-template ngFor [ngForOf]="doc.children" let-child>
-                        <app-docsectiontext [title]="child.label" [id]="child.id" [level]="3" />
+                        <app-docsectiontext [title]="child.label" [id]="child.id" [level]="3" [description]="child?.description" />
                         <ng-container *ngComponentOutlet="child.component"></ng-container>
                     </ng-template>
                 </ng-container>
 
                 <ng-container *ngIf="doc.component && !doc.children">
-                    <app-docsectiontext [title]="doc.label" [id]="doc.id" [level]="2" />
+                    <app-docsectiontext [title]="doc.label" [id]="doc.id" [level]="2" [description]="doc?.description" />
                     <ng-container *ngComponentOutlet="doc.component"></ng-container>
                 </ng-container>
             </section>

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

@@ -24,24 +24,23 @@ export class CssLayerDemoComponent {
         {
             id: 'libraries',
             label: 'Libraries',
-            description: 'Compatibility between PrimeVue and CSS libraries.',
+            description: 'Compatibility between PrimeNG and CSS libraries.',
             children: [
                 {
                     id: 'tailwind',
                     label: 'Tailwind CSS',
-                    component:TailwindDoc
+                    component: TailwindDoc
                 },
                 {
                     id: 'bootstrap',
                     label: 'Bootstrap',
-                    component:BootstrapDoc
+                    component: BootstrapDoc
                 },
                 {
                     id: 'normalize',
                     label: 'Normalize',
-                    component:NormalizeDoc
-                },
-
+                    component: NormalizeDoc
+                }
             ]
         }
     ];