diff --git a/angular.json b/angular.json
index bb46e2c923e..5fddaa5464d 100755
--- a/angular.json
+++ b/angular.json
@@ -156,4 +156,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/showcase/doc/Image/basicdoc.ts b/src/app/showcase/doc/Image/basicdoc.ts
index 9ae5cf1b997..436feffc5ec 100644
--- a/src/app/showcase/doc/Image/basicdoc.ts
+++ b/src/app/showcase/doc/Image/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250"></p-image>`,
+        basic: `<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250"></p-image>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/Image/previewdoc.ts b/src/app/showcase/doc/Image/previewdoc.ts
index 4d0b41857ae..72b32e138b4 100644
--- a/src/app/showcase/doc/Image/previewdoc.ts
+++ b/src/app/showcase/doc/Image/previewdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class PreviewDoc {
     code: Code = {
-        basic: `
-<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250" [preview]="true"></p-image>`,
+        basic: `<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" alt="Image" width="250" [preview]="true"></p-image>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/Image/previewimagesourcedoc.ts b/src/app/showcase/doc/Image/previewimagesourcedoc.ts
index 24f5fa87ef3..c25a9b85488 100644
--- a/src/app/showcase/doc/Image/previewimagesourcedoc.ts
+++ b/src/app/showcase/doc/Image/previewimagesourcedoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class PreviewImageSourceDoc {
     code: Code = {
-        basic: `
-<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>`,
+        basic: `<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>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/Image/templatedoc.ts b/src/app/showcase/doc/Image/templatedoc.ts
index 3ca0004bf72..94386dbdab7 100644
--- a/src/app/showcase/doc/Image/templatedoc.ts
+++ b/src/app/showcase/doc/Image/templatedoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" [preview]="true" alt="Image" width="250">
+        basic: `<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" [preview]="true" alt="Image" width="250">
     <ng-template pTemplate="indicator">
         <i class="pi pi-check"></i>
     </ng-template>
diff --git a/src/app/showcase/doc/accordion/basicdoc.ts b/src/app/showcase/doc/accordion/basicdoc.ts
index d3dc9ba1640..c4f6269ed5e 100644
--- a/src/app/showcase/doc/accordion/basicdoc.ts
+++ b/src/app/showcase/doc/accordion/basicdoc.ts
@@ -34,8 +34,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-accordion [activeIndex]="0">
+        basic: `<p-accordion [activeIndex]="0">
     <p-accordionTab header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/accordion/controlleddoc.ts b/src/app/showcase/doc/accordion/controlleddoc.ts
index 64b29ae42a6..1da0a9cc1ff 100644
--- a/src/app/showcase/doc/accordion/controlleddoc.ts
+++ b/src/app/showcase/doc/accordion/controlleddoc.ts
@@ -41,8 +41,7 @@ export class ControlledDoc {
     activeIndex: number | undefined;
 
     code: Code = {
-        basic: `
-<div class="flex flex-wrap gap-2 mb-3">
+        basic: `<div class="flex flex-wrap gap-2 mb-3">
     <p-button [icon]="activeIndex === 0 ? 'pi pi-minus' : 'pi pi-plus'" (click)="activeIndex = 0" styleClass="p-button-text" label="Toggle 1st"></p-button>
     <p-button [icon]="activeIndex === 1 ? 'pi pi-minus' : 'pi pi-plus'" (click)="activeIndex = 1" styleClass="p-button-text ml-2" label="Toggle 2st"></p-button>
     <p-button [icon]="activeIndex === 2 ? 'pi pi-minus' : 'pi pi-plus'" (click)="activeIndex = 2" styleClass="p-button-text ml-2" label="Toggle 3st"></p-button>
diff --git a/src/app/showcase/doc/accordion/disableddoc.ts b/src/app/showcase/doc/accordion/disableddoc.ts
index 5a659984988..6a4e90e05e8 100644
--- a/src/app/showcase/doc/accordion/disableddoc.ts
+++ b/src/app/showcase/doc/accordion/disableddoc.ts
@@ -34,8 +34,7 @@ import { Code } from '../../domain/code';
 })
 export class DisabledDoc {
     code: Code = {
-        basic: `
-<p-accordion [activeIndex]="0">
+        basic: `<p-accordion [activeIndex]="0">
     <p-accordionTab header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/accordion/multipledoc.ts b/src/app/showcase/doc/accordion/multipledoc.ts
index 20776b77588..e1217546c65 100644
--- a/src/app/showcase/doc/accordion/multipledoc.ts
+++ b/src/app/showcase/doc/accordion/multipledoc.ts
@@ -34,8 +34,7 @@ import { Code } from '../../domain/code';
 })
 export class MultipleDoc {
     code: Code = {
-        basic: `
-<p-accordion [multiple]="true" [activeIndex]="[0]">
+        basic: `<p-accordion [multiple]="true" [activeIndex]="[0]">
     <p-accordionTab header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/accordion/templatedoc.ts b/src/app/showcase/doc/accordion/templatedoc.ts
index f7a1ed2dbce..ea6be4bbef1 100644
--- a/src/app/showcase/doc/accordion/templatedoc.ts
+++ b/src/app/showcase/doc/accordion/templatedoc.ts
@@ -61,8 +61,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-accordion class="w-full">
+        basic: `<p-accordion class="w-full">
     <p-accordionTab>
         <ng-template pTemplate="header">
             <div class="flex align-items-center">
diff --git a/src/app/showcase/doc/animateonscroll/basicdoc.ts b/src/app/showcase/doc/animateonscroll/basicdoc.ts
index da697d95a78..a74f0bde2ce 100644
--- a/src/app/showcase/doc/animateonscroll/basicdoc.ts
+++ b/src/app/showcase/doc/animateonscroll/basicdoc.ts
@@ -79,8 +79,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<div class="flex flex-column align-items-center gap-2">
+        basic: `<div class="flex flex-column align-items-center gap-2">
     <span class="text-xl font-medium">Scroll Down</span>
     <span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
         <i class="pi pi-arrow-down"></i>
diff --git a/src/app/showcase/doc/autocomplete/basicdoc.ts b/src/app/showcase/doc/autocomplete/basicdoc.ts
index 147515e0df3..d80990fe1c0 100644
--- a/src/app/showcase/doc/autocomplete/basicdoc.ts
+++ b/src/app/showcase/doc/autocomplete/basicdoc.ts
@@ -31,8 +31,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autocomplete/disableddoc.ts b/src/app/showcase/doc/autocomplete/disableddoc.ts
index 9150f7df45f..ab61448d112 100644
--- a/src/app/showcase/doc/autocomplete/disableddoc.ts
+++ b/src/app/showcase/doc/autocomplete/disableddoc.ts
@@ -28,8 +28,7 @@ export class DisabledDoc {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" (completeMethod)="search($event)" [disabled]="true"></p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" (completeMethod)="search($event)" [disabled]="true"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autocomplete/dropdowndoc.ts b/src/app/showcase/doc/autocomplete/dropdowndoc.ts
index fc179fc64dd..c1562acd125 100644
--- a/src/app/showcase/doc/autocomplete/dropdowndoc.ts
+++ b/src/app/showcase/doc/autocomplete/dropdowndoc.ts
@@ -53,8 +53,7 @@ export class DropdownDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autocomplete/floatlabeldoc.ts b/src/app/showcase/doc/autocomplete/floatlabeldoc.ts
index 729201bfebd..5f1906af2bd 100644
--- a/src/app/showcase/doc/autocomplete/floatlabeldoc.ts
+++ b/src/app/showcase/doc/autocomplete/floatlabeldoc.ts
@@ -31,8 +31,7 @@ export class FloatLabelDoc {
     }
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" (completeMethod)="search($event)" inputId="float-label"></p-autoComplete>
     <label for="float-label">Float Label</label>
 </span>`,
diff --git a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
index 526d03278f2..bf62b0eda2c 100644
--- a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
+++ b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
@@ -51,8 +51,7 @@ export class ForceSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autocomplete/groupeddoc.ts b/src/app/showcase/doc/autocomplete/groupeddoc.ts
index 53c17f0c2cd..816326cf6be 100644
--- a/src/app/showcase/doc/autocomplete/groupeddoc.ts
+++ b/src/app/showcase/doc/autocomplete/groupeddoc.ts
@@ -87,8 +87,7 @@ export class GroupedDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedCity" [group]="true" [suggestions]="filteredGroups" (completeMethod)="filterGroupedCity($event)" [dropdown]="true">
+        basic: `<p-autoComplete [(ngModel)]="selectedCity" [group]="true" [suggestions]="filteredGroups" (completeMethod)="filterGroupedCity($event)" [dropdown]="true">
     <ng-template let-group pTemplate="group">
         <div class="flex align-items-center">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
diff --git a/src/app/showcase/doc/autocomplete/invaliddoc.ts b/src/app/showcase/doc/autocomplete/invaliddoc.ts
index 48aa7ff705a..0b7c8f0c04f 100644
--- a/src/app/showcase/doc/autocomplete/invaliddoc.ts
+++ b/src/app/showcase/doc/autocomplete/invaliddoc.ts
@@ -28,8 +28,7 @@ export class InvalidDoc {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" class="ng-invalid ng-dirty" (completeMethod)="search($event)"></p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" class="ng-invalid ng-dirty" (completeMethod)="search($event)"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autocomplete/multipledoc.ts b/src/app/showcase/doc/autocomplete/multipledoc.ts
index 59961032652..9336c4bb3c7 100644
--- a/src/app/showcase/doc/autocomplete/multipledoc.ts
+++ b/src/app/showcase/doc/autocomplete/multipledoc.ts
@@ -28,8 +28,7 @@ export class MultipleDoc {
     }
 
     code: Code = {
-        basic: `
-<span class="p-fluid">
+        basic: `<span class="p-fluid">
     <p-autoComplete [(ngModel)]="selectedItems" [suggestions]="items" (completeMethod)="filterCountry($event)" [multiple]="true"></p-autoComplete>
 </span>`,
 
diff --git a/src/app/showcase/doc/autocomplete/objectsdoc.ts b/src/app/showcase/doc/autocomplete/objectsdoc.ts
index f8138a7fb91..c46baa4f005 100644
--- a/src/app/showcase/doc/autocomplete/objectsdoc.ts
+++ b/src/app/showcase/doc/autocomplete/objectsdoc.ts
@@ -50,8 +50,7 @@ export class ObjectsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
index dfd46cc02e9..60527d581b6 100644
--- a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
@@ -54,8 +54,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
 </form>`,
 
diff --git a/src/app/showcase/doc/autocomplete/templatedoc.ts b/src/app/showcase/doc/autocomplete/templatedoc.ts
index 4de1da4a61d..897b0309443 100644
--- a/src/app/showcase/doc/autocomplete/templatedoc.ts
+++ b/src/app/showcase/doc/autocomplete/templatedoc.ts
@@ -53,8 +53,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" 
+        basic: `<p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" 
     (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
         <ng-template let-country pTemplate="item">
             <div class="flex align-items-center gap-2">
diff --git a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
index 8cc7318d20c..49d29cddbf6 100644
--- a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
@@ -49,8 +49,7 @@ export class VirtualScrollDoc {
     }
 
     code: Code = {
-        basic: `
-<p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>`,
+        basic: `<p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/autofocus/basicdoc.ts b/src/app/showcase/doc/autofocus/basicdoc.ts
index 434ec7945be..7597334faa9 100644
--- a/src/app/showcase/doc/autofocus/basicdoc.ts
+++ b/src/app/showcase/doc/autofocus/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText pAutoFocus [autofocus]="true" placeholder="Automatically focused" />`,
+        basic: `<input type="text" pInputText pAutoFocus [autofocus]="true" placeholder="Automatically focused" />`,
         html: `
 <div class="card flex justify-content-center">
     <input type="text" pInputText pAutoFocus [autofocus]="true" placeholder="Automatically focused" /> 
diff --git a/src/app/showcase/doc/avatar/avatargroupdoc.ts b/src/app/showcase/doc/avatar/avatargroupdoc.ts
index bd9896b3738..a9657999699 100644
--- a/src/app/showcase/doc/avatar/avatargroupdoc.ts
+++ b/src/app/showcase/doc/avatar/avatargroupdoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class GroupDoc {
     code: Code = {
-        basic: `
-<p-avatarGroup styleClass="mb-3">
+        basic: `<p-avatarGroup styleClass="mb-3">
     <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
     <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
 </p-avatarGroup>`,
diff --git a/src/app/showcase/doc/avatar/badgedoc.ts b/src/app/showcase/doc/avatar/badgedoc.ts
index 795260d8e1e..207ebf508f0 100644
--- a/src/app/showcase/doc/avatar/badgedoc.ts
+++ b/src/app/showcase/doc/avatar/badgedoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BadgeDoc {
     code: Code = {
-        basic: `
-<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" pBadge value="4" severity="danger"></p-avatar>`,
+        basic: `<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" pBadge value="4" severity="danger"></p-avatar>`,
         html: `
 <div class="card flex justify-content-center">
     <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" pBadge value="4" severity="danger"></p-avatar>
diff --git a/src/app/showcase/doc/avatar/icondoc.ts b/src/app/showcase/doc/avatar/icondoc.ts
index 6b9b73dae78..50b0ebe34ed 100644
--- a/src/app/showcase/doc/avatar/icondoc.ts
+++ b/src/app/showcase/doc/avatar/icondoc.ts
@@ -30,8 +30,7 @@ import { Code } from '../../domain/code';
 })
 export class IconDoc {
     code: Code = {
-        basic: `
-<p-avatar icon="pi pi-user" styleClass="mr-2" size="xlarge"></p-avatar>`,
+        basic: `<p-avatar icon="pi pi-user" styleClass="mr-2" size="xlarge"></p-avatar>`,
         html: `
 <div class="grid card grid-nogutter">
     <div class="col-12 md:col-4">
diff --git a/src/app/showcase/doc/avatar/imagedoc.ts b/src/app/showcase/doc/avatar/imagedoc.ts
index 3acae371e41..3b56554e2f2 100644
--- a/src/app/showcase/doc/avatar/imagedoc.ts
+++ b/src/app/showcase/doc/avatar/imagedoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class ImageDoc {
     code: Code = {
-        basic: `
-<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>`,
+        basic: `<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>`,
         html: `
 <div class="card">
     <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
diff --git a/src/app/showcase/doc/avatar/labeldoc.ts b/src/app/showcase/doc/avatar/labeldoc.ts
index 109b9044d41..bc7e54babb0 100644
--- a/src/app/showcase/doc/avatar/labeldoc.ts
+++ b/src/app/showcase/doc/avatar/labeldoc.ts
@@ -30,8 +30,7 @@ import { Code } from '../../domain/code';
 })
 export class LabelDoc {
     code: Code = {
-        basic: `
-<div class="col-12 md:col-4">
+        basic: `<div class="col-12 md:col-4">
     <h5>Label</h5>
     <p-avatar label="P" styleClass="mr-2" size="xlarge"></p-avatar>
     <p-avatar label="V" styleClass="mr-2" size="large" [style]="{ 'background-color': '#2196F3', color: '#ffffff' }"></p-avatar>
diff --git a/src/app/showcase/doc/avatar/shapedoc.ts b/src/app/showcase/doc/avatar/shapedoc.ts
index de4e8c1f49a..7d2ca1b0d58 100644
--- a/src/app/showcase/doc/avatar/shapedoc.ts
+++ b/src/app/showcase/doc/avatar/shapedoc.ts
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
 })
 export class ShapeDoc {
     code: Code = {
-        basic: `
-<p-avatar label="P" shape="circle"></p-avatar>
+        basic: `<p-avatar label="P" shape="circle"></p-avatar>
 <p-avatar label="T"></p-avatar>`,
         html: `
 <div class="card flex justify-content-center gap-2">
diff --git a/src/app/showcase/doc/avatar/sizedoc.ts b/src/app/showcase/doc/avatar/sizedoc.ts
index 003aa483955..0b767980886 100644
--- a/src/app/showcase/doc/avatar/sizedoc.ts
+++ b/src/app/showcase/doc/avatar/sizedoc.ts
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
 })
 export class SizeDoc {
     code: Code = {
-        basic: `
-<p-avatar label="P" size="large"></p-avatar>
+        basic: `<p-avatar label="P" size="large"></p-avatar>
 <p-avatar label="T" size="xlarge"></p-avatar>`,
         html: `
 <div class="card flex justify-content-center gap-2">
diff --git a/src/app/showcase/doc/avatar/templatedoc.ts b/src/app/showcase/doc/avatar/templatedoc.ts
index afd0019c3e2..c79ac47aaa0 100644
--- a/src/app/showcase/doc/avatar/templatedoc.ts
+++ b/src/app/showcase/doc/avatar/templatedoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-avatar size="xlarge">
+        basic: `<p-avatar size="xlarge">
     <span class="text-base">Content</span>
 </p-avatar>`,
         html: `
diff --git a/src/app/showcase/doc/badge/basicdoc.ts b/src/app/showcase/doc/badge/basicdoc.ts
index 931dd96dc00..721e9e8edda 100644
--- a/src/app/showcase/doc/badge/basicdoc.ts
+++ b/src/app/showcase/doc/badge/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-badge [value]="2"></p-badge>`,
+        basic: `<p-badge [value]="2"></p-badge>`,
         html: `
 <div class="card flex justify-content-center">
     <p-badge [value]="2"></p-badge>
diff --git a/src/app/showcase/doc/badge/buttondoc.ts b/src/app/showcase/doc/badge/buttondoc.ts
index 25e6704b822..8a0721720c6 100644
--- a/src/app/showcase/doc/badge/buttondoc.ts
+++ b/src/app/showcase/doc/badge/buttondoc.ts
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
 })
 export class ButtonDoc {
     code: Code = {
-        basic: `
-<p-button label="Emails" badge="8" styleClass="mr-2"></p-button>`,
+        basic: `<p-button label="Emails" badge="8" styleClass="mr-2"></p-button>`,
         html: `
 <div class="card flex justify-content-center">
     <p-button label="Emails" badge="8" styleClass="mr-2"></p-button>
diff --git a/src/app/showcase/doc/badge/directivedoc.ts b/src/app/showcase/doc/badge/directivedoc.ts
index 2ed607c33d3..6acd350006b 100644
--- a/src/app/showcase/doc/badge/directivedoc.ts
+++ b/src/app/showcase/doc/badge/directivedoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class DirectiveDoc {
     code: Code = {
-        basic: `
-<i class="pi pi-bell text-3xl" pBadge value="2"></i>`,
+        basic: `<i class="pi pi-bell text-3xl" pBadge value="2"></i>`,
         html: `
 <div class="card flex justify-content-center">
     <i class="pi pi-bell text-3xl" pBadge value="2"></i>
diff --git a/src/app/showcase/doc/badge/positiondoc.ts b/src/app/showcase/doc/badge/positiondoc.ts
index 7074b8d1575..6cf3306788b 100644
--- a/src/app/showcase/doc/badge/positiondoc.ts
+++ b/src/app/showcase/doc/badge/positiondoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class PositionDoc {
     code: Code = {
-        basic: `
-<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>`,
+        basic: `<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>`,
         html: `
 <div class="card flex justify-content-center">
     <i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
diff --git a/src/app/showcase/doc/badge/severitydoc.ts b/src/app/showcase/doc/badge/severitydoc.ts
index 47168ac9915..9d24925ddbb 100644
--- a/src/app/showcase/doc/badge/severitydoc.ts
+++ b/src/app/showcase/doc/badge/severitydoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class SeverityDoc {
     code: Code = {
-        basic: `
-<p-badge [value]="2" severity="success"></p-badge>`,
+        basic: `<p-badge [value]="2" severity="success"></p-badge>`,
         html: `
 <div class="card flex justify-content-center gap-2">
     <p-badge [value]="2" severity="success"></p-badge>
diff --git a/src/app/showcase/doc/badge/sizedoc.ts b/src/app/showcase/doc/badge/sizedoc.ts
index fccb6413859..d9f8a5bb498 100644
--- a/src/app/showcase/doc/badge/sizedoc.ts
+++ b/src/app/showcase/doc/badge/sizedoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class SizeDoc {
     code: Code = {
-        basic: `
-<p-badge value="4" size="large" severity="warning"></p-badge>`,
+        basic: `<p-badge value="4" size="large" severity="warning"></p-badge>`,
         html: `
 <div class="card flex justify-content-center">
     <p-badge value="2"></p-badge>
diff --git a/src/app/showcase/doc/blockui/basicdoc.ts b/src/app/showcase/doc/blockui/basicdoc.ts
index 75f589b2837..07622465aef 100644
--- a/src/app/showcase/doc/blockui/basicdoc.ts
+++ b/src/app/showcase/doc/blockui/basicdoc.ts
@@ -27,8 +27,7 @@ export class BasicDoc {
     blockedPanel: boolean = false;
 
     code: Code = {
-        basic: `
-<button type="button" pButton pRipple label="Block" (click)="blockedPanel = true"></button>
+        basic: `<button type="button" pButton pRipple label="Block" (click)="blockedPanel = true"></button>
 <button type="button" pButton pRipple label="Unblock" (click)="blockedPanel = false"></button>
 <p-blockUI [target]="pnl" [blocked]="blockedPanel">
     <i class="pi pi-lock" style="font-size: 3rem"></i>
diff --git a/src/app/showcase/doc/blockui/documentdoc.ts b/src/app/showcase/doc/blockui/documentdoc.ts
index b4432034698..94c0eaf802e 100644
--- a/src/app/showcase/doc/blockui/documentdoc.ts
+++ b/src/app/showcase/doc/blockui/documentdoc.ts
@@ -28,8 +28,7 @@ export class DocumentDoc {
     }
 
     code: Code = {
-        basic: `
-<p-blockUI [blocked]="blockedDocument"></p-blockUI>`,
+        basic: `<p-blockUI [blocked]="blockedDocument"></p-blockUI>`,
         html: `
 <div class="card">
     <p-blockUI [blocked]="blockedDocument"></p-blockUI>
diff --git a/src/app/showcase/doc/breadcrumb/basicdoc.ts b/src/app/showcase/doc/breadcrumb/basicdoc.ts
index 626d98eae16..6baee9ec01c 100644
--- a/src/app/showcase/doc/breadcrumb/basicdoc.ts
+++ b/src/app/showcase/doc/breadcrumb/basicdoc.ts
@@ -26,8 +26,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-breadcrumb class="max-w-full" [model]="items" [home]="home"></p-breadcrumb>`,
+        basic: `<p-breadcrumb class="max-w-full" [model]="items" [home]="home"></p-breadcrumb>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts
index 096988c6d43..0b57007c43e 100644
--- a/src/app/showcase/doc/button/badgedoc.ts
+++ b/src/app/showcase/doc/button/badgedoc.ts
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
 })
 export class BadgeDoc {
     code: Code = {
-        basic: `
-<p-button label="Emails" badge="8"></p-button>
+        basic: `<p-button label="Emails" badge="8"></p-button>
 <p-button label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger"></p-button>`,
 
         html: `
diff --git a/src/app/showcase/doc/button/basicdoc.ts b/src/app/showcase/doc/button/basicdoc.ts
index 41c341ad794..f3701ad2566 100644
--- a/src/app/showcase/doc/button/basicdoc.ts
+++ b/src/app/showcase/doc/button/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-button label="Submit"></p-button>`,
+        basic: `<p-button label="Submit"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/button/buttonsetdoc.ts b/src/app/showcase/doc/button/buttonsetdoc.ts
index bff92d62398..f35cc0bd460 100644
--- a/src/app/showcase/doc/button/buttonsetdoc.ts
+++ b/src/app/showcase/doc/button/buttonsetdoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class ButtonsetDoc {
     code: Code = {
-        basic: `
-<span class="p-buttonset">
+        basic: `<span class="p-buttonset">
     <button pButton pRipple label="Save" icon="pi pi-check"></button>
     <button pButton pRipple label="Delete" icon="pi pi-trash"></button>
     <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
diff --git a/src/app/showcase/doc/button/directivedoc.ts b/src/app/showcase/doc/button/directivedoc.ts
index 992091db32a..6b7a3bb9b17 100644
--- a/src/app/showcase/doc/button/directivedoc.ts
+++ b/src/app/showcase/doc/button/directivedoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class DirectiveDoc {
     code: Code = {
-        basic: `
-<button pButton pRipple label="Submit" class="p-button-success"></button>`,
+        basic: `<button pButton pRipple label="Submit" class="p-button-success"></button>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/button/disableddoc.ts b/src/app/showcase/doc/button/disableddoc.ts
index be0c164e23e..89ce253f4c8 100644
--- a/src/app/showcase/doc/button/disableddoc.ts
+++ b/src/app/showcase/doc/button/disableddoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class DisabledDoc {
     code: Code = {
-        basic: `
-<p-button label="Submit" [disabled]="true"></p-button>`,
+        basic: `<p-button label="Submit" [disabled]="true"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/button/iconsdoc.ts b/src/app/showcase/doc/button/iconsdoc.ts
index 45b70985ecc..dfb3cb04ae2 100644
--- a/src/app/showcase/doc/button/iconsdoc.ts
+++ b/src/app/showcase/doc/button/iconsdoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class IconsDoc {
     code: Code = {
-        basic: `
-<p-button icon="pi pi-check"></p-button>
+        basic: `<p-button icon="pi pi-check"></p-button>
 <p-button label="Submit" icon="pi pi-check"></p-button>
 <p-button label="Submit" icon="pi pi-check" iconPos="right"></p-button>`,
 
diff --git a/src/app/showcase/doc/button/iconsonlydoc.ts b/src/app/showcase/doc/button/iconsonlydoc.ts
index ebad2793c15..702c38a77d1 100644
--- a/src/app/showcase/doc/button/iconsonlydoc.ts
+++ b/src/app/showcase/doc/button/iconsonlydoc.ts
@@ -59,8 +59,7 @@ import { Code } from '../../domain/code';
 })
 export class IconOnlyDoc {
     code: Code = {
-        basic: `
-<p-button icon="pi pi-check"></p-button>
+        basic: `<p-button icon="pi pi-check"></p-button>
 <p-button icon="pi pi-bookmark" severity="secondary"></p-button>
 <p-button icon="pi pi-search" severity="success"></p-button>
 <p-button icon="pi pi-user" severity="info"></p-button>
diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts
index 14a85f732a3..091761ed422 100644
--- a/src/app/showcase/doc/button/linkdoc.ts
+++ b/src/app/showcase/doc/button/linkdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class LinkDoc {
     code: Code = {
-        basic: `
-<p-button label="Submit" [link]="true"></p-button>`,
+        basic: `<p-button label="Submit" [link]="true"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/button/loadingdoc.ts b/src/app/showcase/doc/button/loadingdoc.ts
index d43ec83d797..ca963de26ae 100644
--- a/src/app/showcase/doc/button/loadingdoc.ts
+++ b/src/app/showcase/doc/button/loadingdoc.ts
@@ -30,8 +30,7 @@ export class LoadingDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button label="Submit" [loading]="loading" (onClick)="load()"></p-button>
+        basic: `<p-button label="Submit" [loading]="loading" (onClick)="load()"></p-button>
 <p-button label="Loading custom icon" [loading]="loading" loadingIcon="pi pi-bell" (onClick)="load()"></p-button>`,
 
         html: `
diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts
index e12adcd541b..98c0b164f82 100644
--- a/src/app/showcase/doc/button/outlineddoc.ts
+++ b/src/app/showcase/doc/button/outlineddoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class OutlinedDoc {
     code: Code = {
-        basic: `
-<p-button label="Primary" [outlined]="true"></p-button>
+        basic: `<p-button label="Primary" [outlined]="true"></p-button>
 <p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
 <p-button label="Success" [outlined]="true" severity="success"></p-button>
 <p-button label="Info" [outlined]="true" severity="info"></p-button>
diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts
index 33558574cde..f19a5205655 100644
--- a/src/app/showcase/doc/button/raiseddoc.ts
+++ b/src/app/showcase/doc/button/raiseddoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class RaisedDoc {
     code: Code = {
-        basic: `
-<p-button label="Primary" [raised]="true"></p-button>
+        basic: `<p-button label="Primary" [raised]="true"></p-button>
 <p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
 <p-button label="Success" [raised]="true" severity="success"></p-button>
 <p-button label="Info" [raised]="true" severity="info"></p-button>
diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts
index 7152b652d41..fa3464f71a9 100644
--- a/src/app/showcase/doc/button/raisedtextdoc.ts
+++ b/src/app/showcase/doc/button/raisedtextdoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class RaisedTextDoc {
     code: Code = {
-        basic: `
-<p-button label="Primary" [text]="true" [raised]="true"></p-button>
+        basic: `<p-button label="Primary" [text]="true" [raised]="true"></p-button>
 <p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
 <p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
 <p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts
index 9795c9f7615..d23ed33ddd6 100644
--- a/src/app/showcase/doc/button/roundeddoc.ts
+++ b/src/app/showcase/doc/button/roundeddoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class RoundedDoc {
     code: Code = {
-        basic: `
-<p-button label="Primary" [rounded]="true"></p-button>
+        basic: `<p-button label="Primary" [rounded]="true"></p-button>
 <p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
 <p-button label="Success" [rounded]="true" severity="success"></p-button>
 <p-button label="Info" [rounded]="true" severity="info"></p-button>
diff --git a/src/app/showcase/doc/button/severitydoc.ts b/src/app/showcase/doc/button/severitydoc.ts
index fb26cef6afb..e9206fd82cd 100644
--- a/src/app/showcase/doc/button/severitydoc.ts
+++ b/src/app/showcase/doc/button/severitydoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class SeverityDoc {
     code: Code = {
-        basic: `
-<p-button label="Primary"></p-button>
+        basic: `<p-button label="Primary"></p-button>
 <p-button label="Secondary" severity="secondary"></p-button>
 <p-button label="Success" severity="success"></p-button>
 <p-button label="Info" severity="info"></p-button>
diff --git a/src/app/showcase/doc/button/sizesdoc.ts b/src/app/showcase/doc/button/sizesdoc.ts
index 7e7655b9e88..09781ca40d3 100644
--- a/src/app/showcase/doc/button/sizesdoc.ts
+++ b/src/app/showcase/doc/button/sizesdoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class SizesDoc {
     code: Code = {
-        basic: `
-<p-button label="Small" icon="pi pi-check" size="small"></p-button>
+        basic: `<p-button label="Small" icon="pi pi-check" size="small"></p-button>
 <p-button label="Normal" icon="pi pi-check"></p-button>
 <p-button label="Large" icon="pi pi-check" size="large"></p-button>`,
 
diff --git a/src/app/showcase/doc/button/templatedoc.ts b/src/app/showcase/doc/button/templatedoc.ts
index 53ffa45f54d..fe345431b09 100644
--- a/src/app/showcase/doc/button/templatedoc.ts
+++ b/src/app/showcase/doc/button/templatedoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-button [outlined]="true">
+        basic: `<p-button [outlined]="true">
     <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
     <span class="ml-2 font-bold">PrimeNG</span>
 </p-button>`,
diff --git a/src/app/showcase/doc/button/textdoc.ts b/src/app/showcase/doc/button/textdoc.ts
index 3e2adf57d0b..e06221810ea 100644
--- a/src/app/showcase/doc/button/textdoc.ts
+++ b/src/app/showcase/doc/button/textdoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class TextDoc {
     code: Code = {
-        basic: `
-<p-button label="Primary" [text]="true"></p-button>
+        basic: `<p-button label="Primary" [text]="true"></p-button>
 <p-button label="Secondary" [text]="true" severity="secondary"></p-button>
 <p-button label="Success" [text]="true" severity="success"></p-button>
 <p-button label="Info" [text]="true" severity="info"></p-button>
diff --git a/src/app/showcase/doc/calendar/basicdoc.ts b/src/app/showcase/doc/calendar/basicdoc.ts
index d644a62a764..ea91408630d 100644
--- a/src/app/showcase/doc/calendar/basicdoc.ts
+++ b/src/app/showcase/doc/calendar/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     date: Date | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/buttonbardoc.ts b/src/app/showcase/doc/calendar/buttonbardoc.ts
index 164ad930bf9..3429196171a 100644
--- a/src/app/showcase/doc/calendar/buttonbardoc.ts
+++ b/src/app/showcase/doc/calendar/buttonbardoc.ts
@@ -17,8 +17,7 @@ export class ButtonBarDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" [showButtonBar]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" [showButtonBar]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/datetemplatedoc.ts b/src/app/showcase/doc/calendar/datetemplatedoc.ts
index 7b9b1db269a..877516041ff 100644
--- a/src/app/showcase/doc/calendar/datetemplatedoc.ts
+++ b/src/app/showcase/doc/calendar/datetemplatedoc.ts
@@ -21,8 +21,7 @@ export class DateTemplateDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date">
+        basic: `<p-calendar [(ngModel)]="date">
     <ng-template pTemplate="date" let-date>
         <span [ngStyle]="{textDecoration: (date.day < 21 && date.day > 10) ? 'line-through' : 'inherit'}">{{date.day}}</span>
     </ng-template>
diff --git a/src/app/showcase/doc/calendar/formatdoc.ts b/src/app/showcase/doc/calendar/formatdoc.ts
index 08bde5ef009..c95826b0bc3 100644
--- a/src/app/showcase/doc/calendar/formatdoc.ts
+++ b/src/app/showcase/doc/calendar/formatdoc.ts
@@ -36,8 +36,7 @@ export class FormatDoc {
     date: Date | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" dateFormat="dd.mm.yy"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" dateFormat="dd.mm.yy"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/icondoc.ts b/src/app/showcase/doc/calendar/icondoc.ts
index c6b8cb688fb..b41045f199f 100644
--- a/src/app/showcase/doc/calendar/icondoc.ts
+++ b/src/app/showcase/doc/calendar/icondoc.ts
@@ -17,8 +17,7 @@ export class IconDoc {
     date: Date | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" [showIcon]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" [showIcon]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/inlinedoc.ts b/src/app/showcase/doc/calendar/inlinedoc.ts
index 97fe15c3ece..d3f75fd6151 100644
--- a/src/app/showcase/doc/calendar/inlinedoc.ts
+++ b/src/app/showcase/doc/calendar/inlinedoc.ts
@@ -17,8 +17,7 @@ export class InlineDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar class="max-w-full" [(ngModel)]="date" [inline]="true" [showWeek]="true"></p-calendar>`,
+        basic: `<p-calendar class="max-w-full" [(ngModel)]="date" [inline]="true" [showWeek]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/minmaxdox.ts b/src/app/showcase/doc/calendar/minmaxdox.ts
index 85cd0e2d0bc..fa3ad991b56 100644
--- a/src/app/showcase/doc/calendar/minmaxdox.ts
+++ b/src/app/showcase/doc/calendar/minmaxdox.ts
@@ -37,8 +37,7 @@ export class MinMaxDoc {
     }
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar>`,
 
         html: ` 
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/monthdoc.ts b/src/app/showcase/doc/calendar/monthdoc.ts
index 566730a79b8..49839f46353 100644
--- a/src/app/showcase/doc/calendar/monthdoc.ts
+++ b/src/app/showcase/doc/calendar/monthdoc.ts
@@ -17,8 +17,7 @@ export class MonthDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" view="month" dateFormat="mm/yy" [readonlyInput]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" view="month" dateFormat="mm/yy" [readonlyInput]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/multipledoc.ts b/src/app/showcase/doc/calendar/multipledoc.ts
index 5c74ef04d1e..b2e2feb7d55 100644
--- a/src/app/showcase/doc/calendar/multipledoc.ts
+++ b/src/app/showcase/doc/calendar/multipledoc.ts
@@ -17,8 +17,7 @@ export class MultipleDoc {
     dates: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="dates" selectionMode="multiple" [readonlyInput]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="dates" selectionMode="multiple" [readonlyInput]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/multiplemonths.doc.ts b/src/app/showcase/doc/calendar/multiplemonths.doc.ts
index 4fa192ebaf5..20e070e324b 100644
--- a/src/app/showcase/doc/calendar/multiplemonths.doc.ts
+++ b/src/app/showcase/doc/calendar/multiplemonths.doc.ts
@@ -17,8 +17,7 @@ export class MultipleMonthDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" [numberOfMonths]="3"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" [numberOfMonths]="3"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/rangedoc.ts b/src/app/showcase/doc/calendar/rangedoc.ts
index e18282b9232..1464d63bd51 100644
--- a/src/app/showcase/doc/calendar/rangedoc.ts
+++ b/src/app/showcase/doc/calendar/rangedoc.ts
@@ -17,8 +17,7 @@ export class RangeDoc {
     rangeDates: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/reactiveformsdoc.ts b/src/app/showcase/doc/calendar/reactiveformsdoc.ts
index 74e9eb4e97b..c8872ad78cd 100644
--- a/src/app/showcase/doc/calendar/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/calendar/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-calendar formControlName="date"></p-calendar>
 </form>`,
 
diff --git a/src/app/showcase/doc/calendar/templatedoc.ts b/src/app/showcase/doc/calendar/templatedoc.ts
index bc286620c29..55908e26451 100644
--- a/src/app/showcase/doc/calendar/templatedoc.ts
+++ b/src/app/showcase/doc/calendar/templatedoc.ts
@@ -20,8 +20,7 @@ export class TemplateDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date">
+        basic: `<p-calendar [(ngModel)]="date">
     <ng-template pTemplate="header">Header</ng-template>
     <ng-template pTemplate="footer">Footer</ng-template>
 </p-calendar>`,
diff --git a/src/app/showcase/doc/calendar/timedoc.ts b/src/app/showcase/doc/calendar/timedoc.ts
index 20541c20eb5..a0dc72949f1 100644
--- a/src/app/showcase/doc/calendar/timedoc.ts
+++ b/src/app/showcase/doc/calendar/timedoc.ts
@@ -17,8 +17,7 @@ export class TimeDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" [showTime]="true" [showSeconds]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" [showTime]="true" [showSeconds]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/touchuidoc.ts b/src/app/showcase/doc/calendar/touchuidoc.ts
index 851cae016f3..b93c0bc6954 100644
--- a/src/app/showcase/doc/calendar/touchuidoc.ts
+++ b/src/app/showcase/doc/calendar/touchuidoc.ts
@@ -17,8 +17,7 @@ export class TouchUIDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" [touchUI]="true" [readonlyInput]="true"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" [touchUI]="true" [readonlyInput]="true"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/calendar/yeardoc.ts b/src/app/showcase/doc/calendar/yeardoc.ts
index f42caa498f6..3baf732ae29 100644
--- a/src/app/showcase/doc/calendar/yeardoc.ts
+++ b/src/app/showcase/doc/calendar/yeardoc.ts
@@ -17,8 +17,7 @@ export class YearDoc {
     date: Date[] | undefined;
 
     code: Code = {
-        basic: `
-<p-calendar [(ngModel)]="date" view="year" dateFormat="yy" inputId="yearpicker"></p-calendar>`,
+        basic: `<p-calendar [(ngModel)]="date" view="year" dateFormat="yy" inputId="yearpicker"></p-calendar>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/card/advanceddoc.ts b/src/app/showcase/doc/card/advanceddoc.ts
index 8238186826b..40f7463ed0c 100644
--- a/src/app/showcase/doc/card/advanceddoc.ts
+++ b/src/app/showcase/doc/card/advanceddoc.ts
@@ -27,8 +27,7 @@ import { Code } from '../../domain/code';
 })
 export class AdvancedDoc {
     code: Code = {
-        basic: `
-<p-card header="Advanced Card" subheader="Card Subheader" [style]="{ width: '360px' }">
+        basic: `<p-card header="Advanced Card" subheader="Card Subheader" [style]="{ width: '360px' }">
     <ng-template pTemplate="header">
         <img alt="Card" src="https://primefaces.org/cdn/primeng/images/usercard.png" />
     </ng-template>
diff --git a/src/app/showcase/doc/card/basicdoc.ts b/src/app/showcase/doc/card/basicdoc.ts
index eaefb9f8529..26d1d660e46 100644
--- a/src/app/showcase/doc/card/basicdoc.ts
+++ b/src/app/showcase/doc/card/basicdoc.ts
@@ -20,8 +20,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-card header="Title">
+        basic: `<p-card header="Title">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
         quas!
diff --git a/src/app/showcase/doc/carousel/basicdoc.ts b/src/app/showcase/doc/carousel/basicdoc.ts
index ce705a93e50..57888bdd99b 100644
--- a/src/app/showcase/doc/carousel/basicdoc.ts
+++ b/src/app/showcase/doc/carousel/basicdoc.ts
@@ -76,8 +76,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions">
+        basic: `<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions">
     <ng-template let-product pTemplate="item">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
diff --git a/src/app/showcase/doc/carousel/circulardoc.ts b/src/app/showcase/doc/carousel/circulardoc.ts
index a623164547f..e2a8c60af95 100644
--- a/src/app/showcase/doc/carousel/circulardoc.ts
+++ b/src/app/showcase/doc/carousel/circulardoc.ts
@@ -76,8 +76,7 @@ export class CircularDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="true" [responsiveOptions]="responsiveOptions" autoplayInterval="3000">
+        basic: `<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="true" [responsiveOptions]="responsiveOptions" autoplayInterval="3000">
     <ng-template let-product pTemplate="item">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
diff --git a/src/app/showcase/doc/carousel/numscrolldoc.ts b/src/app/showcase/doc/carousel/numscrolldoc.ts
index 125f8d3c944..fbf6166d945 100644
--- a/src/app/showcase/doc/carousel/numscrolldoc.ts
+++ b/src/app/showcase/doc/carousel/numscrolldoc.ts
@@ -76,8 +76,7 @@ export class NumScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
+        basic: `<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
     <ng-template let-product pTemplate="item">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
diff --git a/src/app/showcase/doc/carousel/responsivedoc.ts b/src/app/showcase/doc/carousel/responsivedoc.ts
index 92e2de53395..7d7df97282e 100644
--- a/src/app/showcase/doc/carousel/responsivedoc.ts
+++ b/src/app/showcase/doc/carousel/responsivedoc.ts
@@ -82,8 +82,7 @@ export class ResponsiveDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
+        basic: `<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
     <ng-template let-product pTemplate="item">
         <div class="product-item">
             <div class="product-item-content">
diff --git a/src/app/showcase/doc/carousel/templatedoc.ts b/src/app/showcase/doc/carousel/templatedoc.ts
index e609f8ab460..92ff8687e7b 100644
--- a/src/app/showcase/doc/carousel/templatedoc.ts
+++ b/src/app/showcase/doc/carousel/templatedoc.ts
@@ -82,8 +82,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
+        basic: `<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
     <ng-template pTemplate="header">
         <p>Header content</p>
     </ng-template>
diff --git a/src/app/showcase/doc/carousel/verticaldoc.ts b/src/app/showcase/doc/carousel/verticaldoc.ts
index 4d57d792b34..94ee75d1470 100644
--- a/src/app/showcase/doc/carousel/verticaldoc.ts
+++ b/src/app/showcase/doc/carousel/verticaldoc.ts
@@ -59,8 +59,7 @@ export class VerticalDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" orientation="vertical" verticalViewPortHeight="360px" [responsiveOptions]="responsiveOptions">
+        basic: `<p-carousel [value]="products" [numVisible]="3" [numScroll]="1" orientation="vertical" verticalViewPortHeight="360px" [responsiveOptions]="responsiveOptions">
     <ng-template let-product pTemplate="item">
         <div class="product-item">
             <div class="product-item-content">
diff --git a/src/app/showcase/doc/cascadeselect/basicdoc.ts b/src/app/showcase/doc/cascadeselect/basicdoc.ts
index 89b2e9224cd..026ad5d009c 100644
--- a/src/app/showcase/doc/cascadeselect/basicdoc.ts
+++ b/src/app/showcase/doc/cascadeselect/basicdoc.ts
@@ -99,8 +99,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-cascadeSelect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City"></p-cascadeSelect>`,
+        basic: `<p-cascadeSelect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City"></p-cascadeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts b/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts
index 60de0438762..95e6c138c89 100644
--- a/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts
@@ -113,8 +113,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-cascadeSelect formControlName="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City"></p-cascadeSelect>
 </form>`,
 
diff --git a/src/app/showcase/doc/cascadeselect/templatedoc.ts b/src/app/showcase/doc/cascadeselect/templatedoc.ts
index 1bfa93de01b..8953624688d 100644
--- a/src/app/showcase/doc/cascadeselect/templatedoc.ts
+++ b/src/app/showcase/doc/cascadeselect/templatedoc.ts
@@ -108,8 +108,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-cascadeSelect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City">
+        basic: `<p-cascadeSelect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City">
     <ng-template pTemplate="option" let-option>
         <div class="flex align-items-center gap-2">
             <img *ngIf="option.states" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts
index f729616c4f3..f2538e42387 100644
--- a/src/app/showcase/doc/chart/basicdoc.ts
+++ b/src/app/showcase/doc/chart/basicdoc.ts
@@ -78,8 +78,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="bar" [data]="basicData" [options]="basicOptions"></p-chart>`,
+        basic: `<p-chart type="bar" [data]="basicData" [options]="basicOptions"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="bar" [data]="basicData" [options]="basicOptions"></p-chart>
diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts
index 84ad0588d33..c912e3f54d9 100644
--- a/src/app/showcase/doc/chart/combodoc.ts
+++ b/src/app/showcase/doc/chart/combodoc.ts
@@ -90,8 +90,7 @@ export class ComboDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="line" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts
index 943e62485d2..efda6aba860 100644
--- a/src/app/showcase/doc/chart/doughnutdoc.ts
+++ b/src/app/showcase/doc/chart/doughnutdoc.ts
@@ -51,8 +51,7 @@ export class DoughnutDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="doughnut" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="doughnut" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card flex justify-content-center">
     <p-chart type="doughnut" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts
index 3fe1718a413..77c39d2b19c 100644
--- a/src/app/showcase/doc/chart/horizontalbardoc.ts
+++ b/src/app/showcase/doc/chart/horizontalbardoc.ts
@@ -85,8 +85,7 @@ export class HorizontalBarDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="bar" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="bar" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="bar" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts
index c134c1567ca..c7cd4756e16 100644
--- a/src/app/showcase/doc/chart/linedoc.ts
+++ b/src/app/showcase/doc/chart/linedoc.ts
@@ -83,8 +83,7 @@ export class LineDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="line" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts
index f3a606267bd..5bd73554764 100644
--- a/src/app/showcase/doc/chart/linestyledoc.ts
+++ b/src/app/showcase/doc/chart/linestyledoc.ts
@@ -90,8 +90,7 @@ export class LineStyleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="line" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/multiaxisdoc.ts b/src/app/showcase/doc/chart/multiaxisdoc.ts
index 13b08405519..edcd92aa19b 100644
--- a/src/app/showcase/doc/chart/multiaxisdoc.ts
+++ b/src/app/showcase/doc/chart/multiaxisdoc.ts
@@ -99,8 +99,7 @@ export class MultiAxisDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="line" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="line" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/piedoc.ts b/src/app/showcase/doc/chart/piedoc.ts
index 0728ee3bcf5..260b8e005e0 100644
--- a/src/app/showcase/doc/chart/piedoc.ts
+++ b/src/app/showcase/doc/chart/piedoc.ts
@@ -51,8 +51,7 @@ export class PieDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="pie" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="pie" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card flex justify-content-center">
     <p-chart type="pie" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/polarareadoc.ts b/src/app/showcase/doc/chart/polarareadoc.ts
index 49e973cd3bb..0b438c10734 100644
--- a/src/app/showcase/doc/chart/polarareadoc.ts
+++ b/src/app/showcase/doc/chart/polarareadoc.ts
@@ -64,8 +64,7 @@ export class PolarAreaDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="polarArea" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="polarArea" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card flex justify-content-center">
     <p-chart type="polarArea" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/radardoc.ts b/src/app/showcase/doc/chart/radardoc.ts
index f3f157d367a..968da3827fd 100644
--- a/src/app/showcase/doc/chart/radardoc.ts
+++ b/src/app/showcase/doc/chart/radardoc.ts
@@ -74,8 +74,7 @@ export class RadarDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="radar" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="radar" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card flex justify-content-center">
     <p-chart type="radar" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts
index 16b2faea96e..74b4041ed00 100644
--- a/src/app/showcase/doc/chart/stackedbardoc.ts
+++ b/src/app/showcase/doc/chart/stackedbardoc.ts
@@ -93,8 +93,7 @@ export class StackedBarDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="bar" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="bar" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="bar" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/chart/verticalbardoc.ts b/src/app/showcase/doc/chart/verticalbardoc.ts
index 618b57e3a9e..373446ef4d8 100644
--- a/src/app/showcase/doc/chart/verticalbardoc.ts
+++ b/src/app/showcase/doc/chart/verticalbardoc.ts
@@ -84,8 +84,7 @@ export class VerticalBarDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-chart type="bar" [data]="data" [options]="options"></p-chart>`,
+        basic: `<p-chart type="bar" [data]="data" [options]="options"></p-chart>`,
         html: `
 <div class="card">
     <p-chart type="bar" [data]="data" [options]="options"></p-chart>
diff --git a/src/app/showcase/doc/checkbox/basicdoc.ts b/src/app/showcase/doc/checkbox/basicdoc.ts
index cbeefdcdc31..239cbc4a651 100644
--- a/src/app/showcase/doc/checkbox/basicdoc.ts
+++ b/src/app/showcase/doc/checkbox/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     checked: boolean = false;
 
     code: Code = {
-        basic: `
-<p-checkbox [(ngModel)]="checked" [binary]="true" inputId="binary"></p-checkbox>`,
+        basic: `<p-checkbox [(ngModel)]="checked" [binary]="true" inputId="binary"></p-checkbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/checkbox/disableddoc.ts b/src/app/showcase/doc/checkbox/disableddoc.ts
index 2998b5e9525..3a2a829cdd5 100644
--- a/src/app/showcase/doc/checkbox/disableddoc.ts
+++ b/src/app/showcase/doc/checkbox/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     checked: boolean = false;
 
     code: Code = {
-        basic: `
-<p-checkbox [disabled]="true" [(ngModel)]="checked"></p-checkbox>`,
+        basic: `<p-checkbox [disabled]="true" [(ngModel)]="checked"></p-checkbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/checkbox/dynamicdoc.ts b/src/app/showcase/doc/checkbox/dynamicdoc.ts
index 85ea645b11b..443b801b71a 100644
--- a/src/app/showcase/doc/checkbox/dynamicdoc.ts
+++ b/src/app/showcase/doc/checkbox/dynamicdoc.ts
@@ -29,8 +29,7 @@ export class DynamicDoc {
     ];
 
     code: Code = {
-        basic: `
-<div *ngFor="let category of categories" class="field-checkbox">
+        basic: `<div *ngFor="let category of categories" class="field-checkbox">
     <p-checkbox name="group" [value]="category" [(ngModel)]="selectedCategories" [inputId]="category.key"></p-checkbox>
     <label [for]="category.key">{{ category.name }}</label>
 </div>`,
diff --git a/src/app/showcase/doc/checkbox/labeldoc.ts b/src/app/showcase/doc/checkbox/labeldoc.ts
index 047d685fd8e..a9c2dd3ad2a 100644
--- a/src/app/showcase/doc/checkbox/labeldoc.ts
+++ b/src/app/showcase/doc/checkbox/labeldoc.ts
@@ -18,8 +18,7 @@ export class LabelDoc {
     selectedValues: string[] = [];
 
     code: Code = {
-        basic: `
-<p-checkbox name="groupname" value="val1" label="Value 1" [(ngModel)]="selectedValues"></p-checkbox>
+        basic: `<p-checkbox name="groupname" value="val1" label="Value 1" [(ngModel)]="selectedValues"></p-checkbox>
 <p-checkbox name="groupname" value="val2" label="Value 2" [(ngModel)]="selectedValues"></p-checkbox>`,
 
         html: `
diff --git a/src/app/showcase/doc/checkbox/multipledoc.ts b/src/app/showcase/doc/checkbox/multipledoc.ts
index f24f39662cf..c431cfc9788 100644
--- a/src/app/showcase/doc/checkbox/multipledoc.ts
+++ b/src/app/showcase/doc/checkbox/multipledoc.ts
@@ -28,8 +28,7 @@ export class MultipleDoc {
     selectedCities: string[] = [];
 
     code: Code = {
-        basic: `
-<div class="flex align-items-center gap-1">
+        basic: `<div class="flex align-items-center gap-1">
         <p-checkbox name="group1" value="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox>
         <label for="ny">New York</label>
 </div>
diff --git a/src/app/showcase/doc/checkbox/reactiveformsdoc.ts b/src/app/showcase/doc/checkbox/reactiveformsdoc.ts
index a6e6acc976f..eb969b445e6 100644
--- a/src/app/showcase/doc/checkbox/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/checkbox/reactiveformsdoc.ts
@@ -27,8 +27,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form class="flex align-items-center gap-1" [formGroup]="formGroup">
+        basic: `<form class="flex align-items-center gap-1" [formGroup]="formGroup">
     <p-checkbox formControlName="city" value="New York" inputId="ny"></p-checkbox>
     <label for="ny">New York</label>
 </form>`,
diff --git a/src/app/showcase/doc/chip/basicdoc.ts b/src/app/showcase/doc/chip/basicdoc.ts
index 943233279ca..2e0cd8f3872 100644
--- a/src/app/showcase/doc/chip/basicdoc.ts
+++ b/src/app/showcase/doc/chip/basicdoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-chip label="Action"></p-chip>`,
+        basic: `<p-chip label="Action"></p-chip>`,
         html: `
 <div class="card flex align-items-center gap-2 flex-wrap">
     <p-chip label="Action"></p-chip>
diff --git a/src/app/showcase/doc/chip/icondoc.ts b/src/app/showcase/doc/chip/icondoc.ts
index 80d671bf739..1c979c318f4 100644
--- a/src/app/showcase/doc/chip/icondoc.ts
+++ b/src/app/showcase/doc/chip/icondoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class IconDoc {
     code: Code = {
-        basic: `
-<p-chip label="Apple" icon="pi pi-apple"></p-chip>`,
+        basic: `<p-chip label="Apple" icon="pi pi-apple"></p-chip>`,
         html: `
 <div class="card flex align-items-center gap-2 flex-wrap">
     <p-chip label="Apple" icon="pi pi-apple"></p-chip>
diff --git a/src/app/showcase/doc/chip/imagedoc.ts b/src/app/showcase/doc/chip/imagedoc.ts
index b188e5b01a6..ecdb5afcec9 100644
--- a/src/app/showcase/doc/chip/imagedoc.ts
+++ b/src/app/showcase/doc/chip/imagedoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class ImageDoc {
     code: Code = {
-        basic: `
-<p-chip label="Amy Elsner" image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"></p-chip>`,
+        basic: `<p-chip label="Amy Elsner" image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"></p-chip>`,
         html: `
 <div class="card flex align-items-center gap-2 flex-wrap">
     <p-chip label="Amy Elsner" image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"></p-chip>
diff --git a/src/app/showcase/doc/chip/templatedoc.ts b/src/app/showcase/doc/chip/templatedoc.ts
index 5b79d143f54..02840522078 100644
--- a/src/app/showcase/doc/chip/templatedoc.ts
+++ b/src/app/showcase/doc/chip/templatedoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-chip>
+        basic: `<p-chip>
     <div class="p-2">Content</div>
 </p-chip>`,
         html: `
diff --git a/src/app/showcase/doc/chips/basicdoc.ts b/src/app/showcase/doc/chips/basicdoc.ts
index 8f08cc60aa5..1d7455e0696 100644
--- a/src/app/showcase/doc/chips/basicdoc.ts
+++ b/src/app/showcase/doc/chips/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     values: string[] | undefined;
 
     code: Code = {
-        basic: `
-<p-chips [(ngModel)]="values"></p-chips>`,
+        basic: `<p-chips [(ngModel)]="values"></p-chips>`,
 
         html: `
 <div class="card p-fluid">
diff --git a/src/app/showcase/doc/chips/commaseparator.doc.ts b/src/app/showcase/doc/chips/commaseparator.doc.ts
index 290bedb0f23..377ec062eeb 100644
--- a/src/app/showcase/doc/chips/commaseparator.doc.ts
+++ b/src/app/showcase/doc/chips/commaseparator.doc.ts
@@ -15,8 +15,7 @@ export class CommaSeparatorDoc {
     values: string[] | undefined;
 
     code: Code = {
-        basic: `
-<p-chips [(ngModel)]="values" separator="," placeholder="Hint: a, b, c"></p-chips>`,
+        basic: `<p-chips [(ngModel)]="values" separator="," placeholder="Hint: a, b, c"></p-chips>`,
 
         html: `
 <div class="card p-fluid">
diff --git a/src/app/showcase/doc/chips/reactiveformsdoc.ts b/src/app/showcase/doc/chips/reactiveformsdoc.ts
index 08846b8f3b3..c46fa9e39d3 100644
--- a/src/app/showcase/doc/chips/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/chips/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-chips formControlName="values"></p-chips>
 </form>`,
 
diff --git a/src/app/showcase/doc/chips/regexpseparator.doc.ts b/src/app/showcase/doc/chips/regexpseparator.doc.ts
index 53e339f6128..09cf020f7a8 100644
--- a/src/app/showcase/doc/chips/regexpseparator.doc.ts
+++ b/src/app/showcase/doc/chips/regexpseparator.doc.ts
@@ -17,8 +17,7 @@ export class RegexpSeparatorDoc {
     values: string[] | undefined;
 
     code: Code = {
-        basic: `
-<p-chips [(ngModel)]="values" [separator]="separatorExp" placeholder="Hint: a, b c"></p-chips>`,
+        basic: `<p-chips [(ngModel)]="values" [separator]="separatorExp" placeholder="Hint: a, b c"></p-chips>`,
 
         html: `
 <div class="card p-fluid">
diff --git a/src/app/showcase/doc/chips/templatedoc.ts b/src/app/showcase/doc/chips/templatedoc.ts
index 2a9ac612c61..2e8dcd3b269 100644
--- a/src/app/showcase/doc/chips/templatedoc.ts
+++ b/src/app/showcase/doc/chips/templatedoc.ts
@@ -19,8 +19,7 @@ export class TemplateDoc {
     values: string[] | undefined;
 
     code: Code = {
-        basic: `
-<p-chips [(ngModel)]="values">
+        basic: `<p-chips [(ngModel)]="values">
     <ng-template let-item pTemplate="item"> {{ item }} - (active) <i class="pi pi-user ml-2"></i> </ng-template>
 </p-chips>`,
 
diff --git a/src/app/showcase/doc/colorpicker/basicdoc.ts b/src/app/showcase/doc/colorpicker/basicdoc.ts
index 2a1a0f8ce3d..e953d81fbc4 100644
--- a/src/app/showcase/doc/colorpicker/basicdoc.ts
+++ b/src/app/showcase/doc/colorpicker/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     color: string | undefined;
 
     code: Code = {
-        basic: `
-<p-colorPicker [(ngModel)]="color"></p-colorPicker>`,
+        basic: `<p-colorPicker [(ngModel)]="color"></p-colorPicker>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/colorpicker/disableddoc.ts b/src/app/showcase/doc/colorpicker/disableddoc.ts
index 75841edaa6f..c4795b157ce 100644
--- a/src/app/showcase/doc/colorpicker/disableddoc.ts
+++ b/src/app/showcase/doc/colorpicker/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     color: string | undefined;
 
     code: Code = {
-        basic: `
-<p-colorPicker [(ngModel)]="color" [disabled]="true"></p-colorPicker>`,
+        basic: `<p-colorPicker [(ngModel)]="color" [disabled]="true"></p-colorPicker>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/colorpicker/formatdoc.ts b/src/app/showcase/doc/colorpicker/formatdoc.ts
index cdc778e414d..a5e89b8f61f 100644
--- a/src/app/showcase/doc/colorpicker/formatdoc.ts
+++ b/src/app/showcase/doc/colorpicker/formatdoc.ts
@@ -35,8 +35,7 @@ export class FormatDoc {
     colorHSB: any = { h: 239, s: 59, b: 95 };
 
     code: Code = {
-        basic: `
-<p-colorPicker [(ngModel)]="color"></p-colorPicker>
+        basic: `<p-colorPicker [(ngModel)]="color"></p-colorPicker>
 <p-colorPicker [(ngModel)]="colorRGB" format="rgb"></p-colorPicker>
 <p-colorPicker [(ngModel)]="colorHSB" format="hsb"></p-colorPicker>`,
 
diff --git a/src/app/showcase/doc/colorpicker/inlinedoc.ts b/src/app/showcase/doc/colorpicker/inlinedoc.ts
index e0a9de4b107..7898a892ddd 100644
--- a/src/app/showcase/doc/colorpicker/inlinedoc.ts
+++ b/src/app/showcase/doc/colorpicker/inlinedoc.ts
@@ -17,8 +17,7 @@ export class InlineDoc {
     color: string | undefined;
 
     code: Code = {
-        basic: `
-<p-colorPicker [(ngModel)]="color1" [inline]="true"></p-colorPicker>`,
+        basic: `<p-colorPicker [(ngModel)]="color1" [inline]="true"></p-colorPicker>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts b/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts
index a168f99a0d8..517cc5d612a 100644
--- a/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-colorPicker formControlName="color"></p-colorPicker>
 </form>`,
 
diff --git a/src/app/showcase/doc/confirmdialog/basicdoc.ts b/src/app/showcase/doc/confirmdialog/basicdoc.ts
index 81267259fa6..26c178e7508 100644
--- a/src/app/showcase/doc/confirmdialog/basicdoc.ts
+++ b/src/app/showcase/doc/confirmdialog/basicdoc.ts
@@ -64,8 +64,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-confirmDialog [style]="{width: '50vw'}"></p-confirmDialog>
 <p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
 <p-button (click)="confirm2()" icon="pi pi-times" label="Delete" class="p-button-danger"></p-button>`,
diff --git a/src/app/showcase/doc/confirmdialog/positiondoc.ts b/src/app/showcase/doc/confirmdialog/positiondoc.ts
index 6db2eb67a97..8ae6cf2a876 100644
--- a/src/app/showcase/doc/confirmdialog/positiondoc.ts
+++ b/src/app/showcase/doc/confirmdialog/positiondoc.ts
@@ -60,8 +60,7 @@ export class PositionDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-confirmDialog [style]="{ width: '50vw' }" key="positionDialog" [position]="position" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
 <div class="flex flex-wrap justify-content-center gap-2">
     <p-button (click)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" styleClass="p-button-help"></p-button>
diff --git a/src/app/showcase/doc/confirmdialog/templatedoc.ts b/src/app/showcase/doc/confirmdialog/templatedoc.ts
index 02333ee65d4..eb1bc7bc48b 100644
--- a/src/app/showcase/doc/confirmdialog/templatedoc.ts
+++ b/src/app/showcase/doc/confirmdialog/templatedoc.ts
@@ -60,8 +60,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-confirmDialog #cd [style]="{ width: '50vw' }">
     <ng-template pTemplate="header">
         <h3>Header Content</h3>
diff --git a/src/app/showcase/doc/confirmpopup/basicdoc.ts b/src/app/showcase/doc/confirmpopup/basicdoc.ts
index 6ebf222c927..7ee63e613f9 100644
--- a/src/app/showcase/doc/confirmpopup/basicdoc.ts
+++ b/src/app/showcase/doc/confirmpopup/basicdoc.ts
@@ -35,8 +35,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-confirmPopup></p-confirmPopup>
 <p-button (click)="confirm($event)" icon="pi pi-check" label="Confirm"></p-button>`,
 
diff --git a/src/app/showcase/doc/contextmenu/basicdoc.ts b/src/app/showcase/doc/contextmenu/basicdoc.ts
index 11d97abf563..337887d8a21 100644
--- a/src/app/showcase/doc/contextmenu/basicdoc.ts
+++ b/src/app/showcase/doc/contextmenu/basicdoc.ts
@@ -26,8 +26,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true" class="max-w-full">
+        basic: `<img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true" class="max-w-full">
 <p-contextMenu [target]="img" [model]="items"></p-contextMenu>`,
 
         html: `
diff --git a/src/app/showcase/doc/contextmenu/documentdoc.ts b/src/app/showcase/doc/contextmenu/documentdoc.ts
index e6a82a2cb40..c4b3560de21 100644
--- a/src/app/showcase/doc/contextmenu/documentdoc.ts
+++ b/src/app/showcase/doc/contextmenu/documentdoc.ts
@@ -148,8 +148,7 @@ export class DocumentDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-contextMenu [model]="items" [global]="true"></p-contextMenu>`,
+        basic: `<p-contextMenu [model]="items" [global]="true"></p-contextMenu>`,
 
         html: `
 <div class="card text-center">
diff --git a/src/app/showcase/doc/dataview/basicdoc.ts b/src/app/showcase/doc/dataview/basicdoc.ts
index 1b72bd99b4c..570c5c4f564 100644
--- a/src/app/showcase/doc/dataview/basicdoc.ts
+++ b/src/app/showcase/doc/dataview/basicdoc.ts
@@ -69,8 +69,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dataView #dv [value]="products">
+        basic: `<p-dataView #dv [value]="products">
     <ng-template let-product pTemplate="listItem">
         <div class="col-12">
             <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
diff --git a/src/app/showcase/doc/dataview/layoutdoc.ts b/src/app/showcase/doc/dataview/layoutdoc.ts
index 704ddd7a433..0ce7c12b32c 100644
--- a/src/app/showcase/doc/dataview/layoutdoc.ts
+++ b/src/app/showcase/doc/dataview/layoutdoc.ts
@@ -98,8 +98,7 @@ export class LayoutDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dataView #dv [value]="products" [layout]="layout">
+        basic: `<p-dataView #dv [value]="products" [layout]="layout">
     <ng-template pTemplate="header">
         <div class="flex justify-content-end">
             <p-dataViewLayoutOptions [layout]="layout"></p-dataViewLayoutOptions>
diff --git a/src/app/showcase/doc/dataview/paginationdoc.ts b/src/app/showcase/doc/dataview/paginationdoc.ts
index 8a0edcae731..2b061e1af44 100644
--- a/src/app/showcase/doc/dataview/paginationdoc.ts
+++ b/src/app/showcase/doc/dataview/paginationdoc.ts
@@ -66,8 +66,7 @@ export class PaginationDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dataView #dv [value]="products" [rows]="5" [paginator]="true">
+        basic: `<p-dataView #dv [value]="products" [rows]="5" [paginator]="true">
     <ng-template let-product pTemplate="listItem">
         <div class="col-12">
             <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
diff --git a/src/app/showcase/doc/dataview/sortingdoc.ts b/src/app/showcase/doc/dataview/sortingdoc.ts
index 0f512522c3f..8842a1835cd 100644
--- a/src/app/showcase/doc/dataview/sortingdoc.ts
+++ b/src/app/showcase/doc/dataview/sortingdoc.ts
@@ -95,8 +95,7 @@ export class SortingDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dataView #dv [value]="products" [sortField]="sortField" [sortOrder]="sortOrder">
+        basic: `<p-dataView #dv [value]="products" [sortField]="sortField" [sortOrder]="sortOrder">
     <ng-template pTemplate="header">
         <div class="flex flex-column md:flex-row md:justify-content-between">
             <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 md:mb-0"></p-dropdown>
diff --git a/src/app/showcase/doc/defer/basicdoc.ts b/src/app/showcase/doc/defer/basicdoc.ts
index d417a96a034..57e9989a95d 100644
--- a/src/app/showcase/doc/defer/basicdoc.ts
+++ b/src/app/showcase/doc/defer/basicdoc.ts
@@ -29,8 +29,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<div pDefer (onLoad)="onLoad()">
+        basic: `<div pDefer (onLoad)="onLoad()">
     <ng-template>
         <img class="w-full md:w-30rem md:block md:mx-auto" src="https://primefaces.org/cdn/primeng/images/demo/nature/nature1.jpg" alt="Prime" />
     </ng-template>
diff --git a/src/app/showcase/doc/defer/datatabledoc.ts b/src/app/showcase/doc/defer/datatabledoc.ts
index 51bfea9de52..41c91cafb0f 100644
--- a/src/app/showcase/doc/defer/datatabledoc.ts
+++ b/src/app/showcase/doc/defer/datatabledoc.ts
@@ -52,8 +52,7 @@ export class DataTableDoc {
     }
 
     code: Code = {
-        basic: `
-<div pDefer (onLoad)="initData()">
+        basic: `<div pDefer (onLoad)="initData()">
     <ng-template>
         <p-table [value]="cars" responsiveLayout="scroll">
             <ng-template pTemplate="header">
diff --git a/src/app/showcase/doc/dialog/basicdoc.ts b/src/app/showcase/doc/dialog/basicdoc.ts
index 3622f326e76..6b8378281bc 100644
--- a/src/app/showcase/doc/dialog/basicdoc.ts
+++ b/src/app/showcase/doc/dialog/basicdoc.ts
@@ -27,8 +27,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [style]="{width: '50vw'}">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/dialog/longcontentdoc.ts b/src/app/showcase/doc/dialog/longcontentdoc.ts
index 2ae194c8425..e6b68883c60 100644
--- a/src/app/showcase/doc/dialog/longcontentdoc.ts
+++ b/src/app/showcase/doc/dialog/longcontentdoc.ts
@@ -41,8 +41,7 @@ export class LongContentDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Long Content" [(visible)]="visible" [style]="{ width: '50vw', height: '300px' }">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/dialog/maximizabledoc.ts b/src/app/showcase/doc/dialog/maximizabledoc.ts
index 75c2707a03d..7a50582622e 100644
--- a/src/app/showcase/doc/dialog/maximizabledoc.ts
+++ b/src/app/showcase/doc/dialog/maximizabledoc.ts
@@ -27,8 +27,7 @@ export class MaximizableDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [style]="{width: '50vw'}" [maximizable]="true">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/dialog/modaldoc.ts b/src/app/showcase/doc/dialog/modaldoc.ts
index 17bcffbe5e4..515ad1d3fb8 100644
--- a/src/app/showcase/doc/dialog/modaldoc.ts
+++ b/src/app/showcase/doc/dialog/modaldoc.ts
@@ -27,8 +27,7 @@ export class ModalDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts
index 5ab67d823be..9e7f0440572 100644
--- a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts
+++ b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts
@@ -48,8 +48,7 @@ export class OverlaysInsideDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [style]="{ width: '50vw' }">
     <div class="flex py-2 justify-content-center">
         <p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name"></p-dropdown>
diff --git a/src/app/showcase/doc/dialog/positiondoc.ts b/src/app/showcase/doc/dialog/positiondoc.ts
index c9f5d48b058..e9fe6d24409 100644
--- a/src/app/showcase/doc/dialog/positiondoc.ts
+++ b/src/app/showcase/doc/dialog/positiondoc.ts
@@ -43,8 +43,7 @@ export class PositionDoc {
     }
 
     code: Code = {
-        basic: `
-<div class="flex flex-wrap gap-2">
+        basic: `<div class="flex flex-wrap gap-2">
     <p-button (click)="showDialog('left')" icon="pi pi-arrow-right" label="Left" styleClass="p-button-help"></p-button>
     <p-button (click)="showDialog('right')" icon="pi pi-arrow-left" label="Right" styleClass="p-button-help"></p-button>
 </div>
diff --git a/src/app/showcase/doc/dialog/responsivedoc.ts b/src/app/showcase/doc/dialog/responsivedoc.ts
index a49265d3200..bc2f7078c85 100644
--- a/src/app/showcase/doc/dialog/responsivedoc.ts
+++ b/src/app/showcase/doc/dialog/responsivedoc.ts
@@ -30,8 +30,7 @@ export class ResponsiveDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [breakpoints]="{ '960px': '75vw' }" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/dialog/templatedoc.ts b/src/app/showcase/doc/dialog/templatedoc.ts
index 6d1f173dd23..f2eb767622d 100644
--- a/src/app/showcase/doc/dialog/templatedoc.ts
+++ b/src/app/showcase/doc/dialog/templatedoc.ts
@@ -33,8 +33,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [style]="{ width: '50vw' }">
     <ng-template pTemplate="header">
         <span class="text-xl font-bold">Header Content</span>
diff --git a/src/app/showcase/doc/divider/basicdoc.ts b/src/app/showcase/doc/divider/basicdoc.ts
index 9a5cdd0d0cf..1a9b79a9191 100644
--- a/src/app/showcase/doc/divider/basicdoc.ts
+++ b/src/app/showcase/doc/divider/basicdoc.ts
@@ -39,8 +39,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p>
+        basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
diff --git a/src/app/showcase/doc/divider/contentdoc.ts b/src/app/showcase/doc/divider/contentdoc.ts
index e61280f88d0..f99d40c24bd 100644
--- a/src/app/showcase/doc/divider/contentdoc.ts
+++ b/src/app/showcase/doc/divider/contentdoc.ts
@@ -51,8 +51,7 @@ import { Code } from '../../domain/code';
 })
 export class ContentDoc {
     code: Code = {
-        basic: `
-<p>
+        basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
diff --git a/src/app/showcase/doc/divider/logindoc.ts b/src/app/showcase/doc/divider/logindoc.ts
index 31fcc69dd2e..bfbded9c324 100644
--- a/src/app/showcase/doc/divider/logindoc.ts
+++ b/src/app/showcase/doc/divider/logindoc.ts
@@ -34,8 +34,7 @@ import { Code } from '../../domain/code';
 })
 export class LoginDoc {
     code: Code = {
-        basic: `
-<div class="flex flex-column md:flex-row">
+        basic: `<div class="flex flex-column md:flex-row">
     <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
         <div class="flex flex-wrap justify-content-center align-items-center gap-2">
             <label class="w-6rem">Username</label>
diff --git a/src/app/showcase/doc/divider/typedoc.ts b/src/app/showcase/doc/divider/typedoc.ts
index 856e8d80bb2..e7c82876d62 100644
--- a/src/app/showcase/doc/divider/typedoc.ts
+++ b/src/app/showcase/doc/divider/typedoc.ts
@@ -39,8 +39,7 @@ import { Code } from '../../domain/code';
 })
 export class TypeDoc {
     code: Code = {
-        basic: `
-<p>
+        basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
diff --git a/src/app/showcase/doc/divider/verticaldoc.ts b/src/app/showcase/doc/divider/verticaldoc.ts
index 9bfb5d2919a..53d3d11c471 100644
--- a/src/app/showcase/doc/divider/verticaldoc.ts
+++ b/src/app/showcase/doc/divider/verticaldoc.ts
@@ -32,8 +32,7 @@ import { Code } from '../../domain/code';
 })
 export class VerticalDoc {
     code: Code = {
-        basic: `
-<p>
+        basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
diff --git a/src/app/showcase/doc/dock/advanceddoc.ts b/src/app/showcase/doc/dock/advanceddoc.ts
index 44e118a2b04..697bdb40b79 100644
--- a/src/app/showcase/doc/dock/advanceddoc.ts
+++ b/src/app/showcase/doc/dock/advanceddoc.ts
@@ -367,8 +367,7 @@ export class AdvancedDoc implements OnInit, OnDestroy {
     }
 
     code: Code = {
-        basic: `
-<p-menubar [model]="menubarItems">
+        basic: `<p-menubar [model]="menubarItems">
     <ng-template pTemplate="start">
         <i class="pi pi-apple"></i>
     </ng-template>
diff --git a/src/app/showcase/doc/dock/basicdoc.ts b/src/app/showcase/doc/dock/basicdoc.ts
index 512cfbfddda..85ed67a31e5 100644
--- a/src/app/showcase/doc/dock/basicdoc.ts
+++ b/src/app/showcase/doc/dock/basicdoc.ts
@@ -72,8 +72,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-dock [model]="items" [position]="position">
+        basic: `<p-dock [model]="items" [position]="position">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.icon" [alt]="item.label" width="100%" />
     </ng-template>
diff --git a/src/app/showcase/doc/dragdrop/basicdoc.ts b/src/app/showcase/doc/dragdrop/basicdoc.ts
index 3e188e91759..ef60c578f90 100644
--- a/src/app/showcase/doc/dragdrop/basicdoc.ts
+++ b/src/app/showcase/doc/dragdrop/basicdoc.ts
@@ -75,8 +75,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="p-2 border-1 surface-border border-round w-15rem">
+        basic: `<div class="p-2 border-1 surface-border border-round w-15rem">
     <ul class="list-none flex flex-column gap-2 p-0 m-0">
         <li *ngFor="let product of availableProducts" class="p-2 border-round shadow-1" pDraggable (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
             {{product.name}}
diff --git a/src/app/showcase/doc/dragdrop/datatabledoc.ts b/src/app/showcase/doc/dragdrop/datatabledoc.ts
index 9c9b855033d..c07cf49c604 100644
--- a/src/app/showcase/doc/dragdrop/datatabledoc.ts
+++ b/src/app/showcase/doc/dragdrop/datatabledoc.ts
@@ -106,8 +106,7 @@ export class DataTableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="card grid grid-nogutter">
+        basic: `<div class="card grid grid-nogutter">
     <div class="col-12 md:col-6 drag-column">
         <div *ngFor="let product of availableProducts">
             <div class="product-item" pDraggable="products" (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
diff --git a/src/app/showcase/doc/dragdrop/draghandledoc.ts b/src/app/showcase/doc/dragdrop/draghandledoc.ts
index 09a522af6e8..3e21c606314 100644
--- a/src/app/showcase/doc/dragdrop/draghandledoc.ts
+++ b/src/app/showcase/doc/dragdrop/draghandledoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class DragHandleDoc {
     code: Code = {
-        basic: `
-<div pDraggable dragHandle=".p-panel-header" class="w-15rem">
+        basic: `<div pDraggable dragHandle=".p-panel-header" class="w-15rem">
     <p-panel header="Drag Header">
         Content
     </p-panel>
diff --git a/src/app/showcase/doc/dragdrop/dropindicatordoc.ts b/src/app/showcase/doc/dragdrop/dropindicatordoc.ts
index 49dc85dd3f3..d3b509682c1 100644
--- a/src/app/showcase/doc/dragdrop/dropindicatordoc.ts
+++ b/src/app/showcase/doc/dragdrop/dropindicatordoc.ts
@@ -71,8 +71,7 @@ export class DropIndicatorDoc {
         return index;
     }
     code: Code = {
-        basic: `
-<div class="p-2 border-1 surface-border border-round w-15rem h-10rem">
+        basic: `<div class="p-2 border-1 surface-border border-round w-15rem h-10rem">
     <ul class="list-none flex flex-column gap-2 p-0 m-0">
         <li *ngFor="let product of availableProducts" class="p-2 border-round shadow-1" pDraggable (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
             {{product.name}}
diff --git a/src/app/showcase/doc/dropdown/basicdoc.ts b/src/app/showcase/doc/dropdown/basicdoc.ts
index bb5c0a3fcc2..6c327cbbc8d 100644
--- a/src/app/showcase/doc/dropdown/basicdoc.ts
+++ b/src/app/showcase/doc/dropdown/basicdoc.ts
@@ -37,8 +37,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [showClear]="true" placeholder="Select a City"></p-dropdown>`,
+        basic: `<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [showClear]="true" placeholder="Select a City"></p-dropdown>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/dropdown/disableddoc.ts b/src/app/showcase/doc/dropdown/disableddoc.ts
index c9b164017c6..7153970ecef 100644
--- a/src/app/showcase/doc/dropdown/disableddoc.ts
+++ b/src/app/showcase/doc/dropdown/disableddoc.ts
@@ -34,8 +34,7 @@ export class DisabledDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [disabled]="true"></p-dropdown>`,
+        basic: `<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [disabled]="true"></p-dropdown>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/dropdown/editabledoc.ts b/src/app/showcase/doc/dropdown/editabledoc.ts
index 17f8c140088..c5e526da2ab 100644
--- a/src/app/showcase/doc/dropdown/editabledoc.ts
+++ b/src/app/showcase/doc/dropdown/editabledoc.ts
@@ -34,8 +34,7 @@ export class EditableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" [editable]="true" optionLabel="name"></p-dropdown>`,
+        basic: `<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" [editable]="true" optionLabel="name"></p-dropdown>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/dropdown/filterdoc.ts b/src/app/showcase/doc/dropdown/filterdoc.ts
index f88616fafc8..d18b3b6cc9e 100644
--- a/src/app/showcase/doc/dropdown/filterdoc.ts
+++ b/src/app/showcase/doc/dropdown/filterdoc.ts
@@ -47,8 +47,7 @@ export class FilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
+        basic: `<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
     <ng-template pTemplate="selectedItem">
         <div class="flex align-items-center gap-2" *ngIf="selectedCountry">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px"/>
diff --git a/src/app/showcase/doc/dropdown/floatlabeldoc.ts b/src/app/showcase/doc/dropdown/floatlabeldoc.ts
index 060a58a5829..6b0a85b56c1 100644
--- a/src/app/showcase/doc/dropdown/floatlabeldoc.ts
+++ b/src/app/showcase/doc/dropdown/floatlabeldoc.ts
@@ -37,8 +37,7 @@ export class FloatLabelDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" inputId="float-label"></p-dropdown>
     <label for="float-label">Select a City</label>
 </span>`,
diff --git a/src/app/showcase/doc/dropdown/groupdoc.ts b/src/app/showcase/doc/dropdown/groupdoc.ts
index f398051038e..26b51af4b72 100644
--- a/src/app/showcase/doc/dropdown/groupdoc.ts
+++ b/src/app/showcase/doc/dropdown/groupdoc.ts
@@ -62,8 +62,7 @@ export class GroupDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="groupedCities" [(ngModel)]="selectedCity" placeholder="Select a City" [group]="true">
+        basic: `<p-dropdown [options]="groupedCities" [(ngModel)]="selectedCity" placeholder="Select a City" [group]="true">
     <ng-template let-group pTemplate="group">
         <div class="flex align-items-center">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
diff --git a/src/app/showcase/doc/dropdown/reactiveformsdoc.ts b/src/app/showcase/doc/dropdown/reactiveformsdoc.ts
index 81b59fa1fef..19fe88cffb7 100644
--- a/src/app/showcase/doc/dropdown/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/dropdown/reactiveformsdoc.ts
@@ -41,8 +41,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-dropdown formControlName="selectedCity" [options]="cities" optionLabel="name" placeholder="Select a City"></p-dropdown>
 </form>`,
 
diff --git a/src/app/showcase/doc/dropdown/templatedoc.ts b/src/app/showcase/doc/dropdown/templatedoc.ts
index 94ba2936773..0889eebd1d5 100644
--- a/src/app/showcase/doc/dropdown/templatedoc.ts
+++ b/src/app/showcase/doc/dropdown/templatedoc.ts
@@ -50,8 +50,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" placeholder="Select a Country">
+        basic: `<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" placeholder="Select a Country">
     <ng-template pTemplate="selectedItem">
         <div class="flex align-items-center gap-2" *ngIf="selectedCountry">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px"/>
diff --git a/src/app/showcase/doc/dropdown/virtualscrolldoc.ts b/src/app/showcase/doc/dropdown/virtualscrolldoc.ts
index b4b0a98eb16..74d327ea7a0 100644
--- a/src/app/showcase/doc/dropdown/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/dropdown/virtualscrolldoc.ts
@@ -30,8 +30,7 @@ export class VirtualScrollDoc {
     }
 
     code: Code = {
-        basic: `
-<p-dropdown [options]="items" [(ngModel)]="selectedItem" placeholder="Select Item" 
+        basic: `<p-dropdown [options]="items" [(ngModel)]="selectedItem" placeholder="Select Item" 
     [virtualScroll]="true" [virtualScrollItemSize]="38"></p-dropdown>`,
 
         html: `
diff --git a/src/app/showcase/doc/dynamicdialog/basicdoc.ts b/src/app/showcase/doc/dynamicdialog/basicdoc.ts
index 293d2c463a4..cde84dafa89 100644
--- a/src/app/showcase/doc/dynamicdialog/basicdoc.ts
+++ b/src/app/showcase/doc/dynamicdialog/basicdoc.ts
@@ -54,8 +54,7 @@ export class BasicDoc implements OnDestroy {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-button (click)="show()" icon="pi pi-info-circle" label="Show"></p-button>`,
 
         html: `
diff --git a/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts b/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts
index 74756bc0d25..d9f52edef27 100644
--- a/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts
+++ b/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts
@@ -68,8 +68,7 @@ export class ProductListDemoDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" responsiveLayout="scroll" [paginator]="true" [rows]="5" [responsive]="true">
+        basic: `<p-table [value]="products" responsiveLayout="scroll" [paginator]="true" [rows]="5" [responsive]="true">
     <ng-template pTemplate="header">
         <tr>
             <th pSortableColumn="name">Name <p-sortIcon field="vin"></p-sortIcon></th>
diff --git a/src/app/showcase/doc/editor/basicdoc.ts b/src/app/showcase/doc/editor/basicdoc.ts
index 61bbbbade70..58f85806f2b 100644
--- a/src/app/showcase/doc/editor/basicdoc.ts
+++ b/src/app/showcase/doc/editor/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     text: string | undefined;
 
     code: Code = {
-        basic: `
-<p-editor [(ngModel)]="text" [style]="{ height: '320px' }"></p-editor>`,
+        basic: `<p-editor [(ngModel)]="text" [style]="{ height: '320px' }"></p-editor>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/editor/customtoolbardoc.ts b/src/app/showcase/doc/editor/customtoolbardoc.ts
index 9150e5efb6c..4d06cf84f93 100644
--- a/src/app/showcase/doc/editor/customtoolbardoc.ts
+++ b/src/app/showcase/doc/editor/customtoolbardoc.ts
@@ -25,8 +25,7 @@ export class CustomToolbarDoc {
     text: string = 'Hello World!';
 
     code: Code = {
-        basic: `
-<p-editor [(ngModel)]="text" [style]="{ height: '320px' }">
+        basic: `<p-editor [(ngModel)]="text" [style]="{ height: '320px' }">
     <ng-template pTemplate="header">
         <span class="ql-formats">
             <button type="button" class="ql-bold" aria-label="Bold"></button>
diff --git a/src/app/showcase/doc/editor/reactiveformsdoc.ts b/src/app/showcase/doc/editor/reactiveformsdoc.ts
index f70e11afeaf..1d9c873ae4e 100644
--- a/src/app/showcase/doc/editor/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/editor/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-editor formControlName="text" [style]="{ height: '320px' }"></p-editor>
 </form>`,
 
diff --git a/src/app/showcase/doc/editor/readonlydoc.ts b/src/app/showcase/doc/editor/readonlydoc.ts
index ddf0eed8ba6..50def218419 100644
--- a/src/app/showcase/doc/editor/readonlydoc.ts
+++ b/src/app/showcase/doc/editor/readonlydoc.ts
@@ -17,8 +17,7 @@ export class ReadOnlyDoc {
     text: string = 'Always bet on Prime!';
 
     code: Code = {
-        basic: `
-<p-editor [(ngModel)]="text" [readonly]="true" [style]="{ height: '320px' }"></p-editor>`,
+        basic: `<p-editor [(ngModel)]="text" [readonly]="true" [style]="{ height: '320px' }"></p-editor>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/fieldset/basicdoc.ts b/src/app/showcase/doc/fieldset/basicdoc.ts
index 38f537c0db2..26affa7ccca 100644
--- a/src/app/showcase/doc/fieldset/basicdoc.ts
+++ b/src/app/showcase/doc/fieldset/basicdoc.ts
@@ -20,8 +20,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-fieldset legend="Header">
+        basic: `<p-fieldset legend="Header">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/app/showcase/doc/fieldset/templatedoc.ts b/src/app/showcase/doc/fieldset/templatedoc.ts
index 8387ff7754f..272f52aa23c 100644
--- a/src/app/showcase/doc/fieldset/templatedoc.ts
+++ b/src/app/showcase/doc/fieldset/templatedoc.ts
@@ -23,8 +23,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-fieldset>
+        basic: `<p-fieldset>
     <ng-template pTemplate="header">
         <div class="flex align-items-center text-primary">
             <span class="pi pi-user mr-2"></span>
diff --git a/src/app/showcase/doc/fieldset/toggleabledoc.ts b/src/app/showcase/doc/fieldset/toggleabledoc.ts
index a3722921c64..79585a8e477 100644
--- a/src/app/showcase/doc/fieldset/toggleabledoc.ts
+++ b/src/app/showcase/doc/fieldset/toggleabledoc.ts
@@ -20,8 +20,7 @@ import { Code } from '../../domain/code';
 })
 export class ToggleableDoc {
     code: Code = {
-        basic: `
-<p-fieldset legend="Header" [toggleable]="true">
+        basic: `<p-fieldset legend="Header" [toggleable]="true">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/app/showcase/doc/fileupload/advanceddoc.ts b/src/app/showcase/doc/fileupload/advanceddoc.ts
index c137299084c..08b0f12e8db 100644
--- a/src/app/showcase/doc/fileupload/advanceddoc.ts
+++ b/src/app/showcase/doc/fileupload/advanceddoc.ts
@@ -41,8 +41,7 @@ export class AdvancedDoc {
     }
 
     code: Code = {
-        basic: `
-<p-fileUpload name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000">
+        basic: `<p-fileUpload name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000">
     <ng-template pTemplate="content">
         <ul *ngIf="uploadedFiles.length">
             <li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
diff --git a/src/app/showcase/doc/fileupload/autodoc.ts b/src/app/showcase/doc/fileupload/autodoc.ts
index efadabeb684..01a59978baa 100644
--- a/src/app/showcase/doc/fileupload/autodoc.ts
+++ b/src/app/showcase/doc/fileupload/autodoc.ts
@@ -29,8 +29,7 @@ export class AutoDoc {
     }
 
     code: Code = {
-        basic: `
-<p-fileUpload mode="basic" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" [auto]="true" chooseLabel="Browse"></p-fileUpload>`,
+        basic: `<p-fileUpload mode="basic" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" [auto]="true" chooseLabel="Browse"></p-fileUpload>`,
         html: `
 <div class="card flex justify-content-center">
     <p-toast></p-toast>
diff --git a/src/app/showcase/doc/fileupload/basicdoc.ts b/src/app/showcase/doc/fileupload/basicdoc.ts
index 0cef864aa01..15c65102bac 100644
--- a/src/app/showcase/doc/fileupload/basicdoc.ts
+++ b/src/app/showcase/doc/fileupload/basicdoc.ts
@@ -29,8 +29,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-fileUpload mode="basic" chooseLabel="Choose" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)"></p-fileUpload>`,
+        basic: `<p-fileUpload mode="basic" chooseLabel="Choose" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)"></p-fileUpload>`,
         html: `
 <div class="card flex justify-content-center">
     <p-toast></p-toast>
diff --git a/src/app/showcase/doc/fileupload/customdoc.ts b/src/app/showcase/doc/fileupload/customdoc.ts
index 555a03e1815..b3a36227d98 100644
--- a/src/app/showcase/doc/fileupload/customdoc.ts
+++ b/src/app/showcase/doc/fileupload/customdoc.ts
@@ -34,8 +34,7 @@ export class CustomDoc {
     }
 
     code: Code = {
-        basic: `
-<p-fileUpload name="myfile[]" [customUpload]="true" (uploadHandler)="customUploader($event)"></p-fileUpload>`,
+        basic: `<p-fileUpload name="myfile[]" [customUpload]="true" (uploadHandler)="customUploader($event)"></p-fileUpload>`,
         html: `
 <div class="card flex justify-content-center">
     <p-toast></p-toast>
diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts
index 495350577c7..37ea877fee4 100644
--- a/src/app/showcase/doc/fileupload/templatedoc.ts
+++ b/src/app/showcase/doc/fileupload/templatedoc.ts
@@ -29,8 +29,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
+        basic: `<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
     <ng-template pTemplate="toolbar">
         <div class="py-3">Upload 3 Files</div>
     </ng-template>
diff --git a/src/app/showcase/doc/filterservice/tableintegrationdoc.ts b/src/app/showcase/doc/filterservice/tableintegrationdoc.ts
index 14179916499..05a54a14430 100644
--- a/src/app/showcase/doc/filterservice/tableintegrationdoc.ts
+++ b/src/app/showcase/doc/filterservice/tableintegrationdoc.ts
@@ -74,8 +74,7 @@ export class TableIntegrationDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table #dt [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" responsiveLayout="scroll">
+        basic: `<p-table #dt [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" responsiveLayout="scroll">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/focustrap/basicdoc.ts b/src/app/showcase/doc/focustrap/basicdoc.ts
index ca5071175f3..4523f9a9b16 100644
--- a/src/app/showcase/doc/focustrap/basicdoc.ts
+++ b/src/app/showcase/doc/focustrap/basicdoc.ts
@@ -51,8 +51,7 @@ export class BasicDoc {
     ];
 
     code: Code = {
-        basic: `
-<div pFocusTrap class="card flex align-items-center justify-content-center flex-wrap gap-3">
+        basic: `<div pFocusTrap class="card flex align-items-center justify-content-center flex-wrap gap-3">
     <div>
         <h4>Input</h4>
         <input id="input" type="text" size="30" pInputText>
diff --git a/src/app/showcase/doc/galleria/advanceddoc.ts b/src/app/showcase/doc/galleria/advanceddoc.ts
index d1ce1d69856..78ec53ffc61 100644
--- a/src/app/showcase/doc/galleria/advanceddoc.ts
+++ b/src/app/showcase/doc/galleria/advanceddoc.ts
@@ -167,8 +167,7 @@ export class AdvancedDoc implements OnInit, OnDestroy {
     }
 
     code: Code = {
-        basic: `
-<p-galleria
+        basic: `<p-galleria
     #galleria
     [(value)]="images"
     [(activeIndex)]="activeIndex"
diff --git a/src/app/showcase/doc/galleria/autoplaydoc.ts b/src/app/showcase/doc/galleria/autoplaydoc.ts
index 79e8ecf0f49..7fb7b0ce6db 100644
--- a/src/app/showcase/doc/galleria/autoplaydoc.ts
+++ b/src/app/showcase/doc/galleria/autoplaydoc.ts
@@ -48,8 +48,7 @@ export class AutoPlayDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [autoPlay]="true" [circular]="true" [responsiveOptions]="responsiveOptions" [numVisible]="5"  [containerStyle]="{ 'max-width': '640px' }"> 
+        basic: `<p-galleria [(value)]="images" [autoPlay]="true" [circular]="true" [responsiveOptions]="responsiveOptions" [numVisible]="5"  [containerStyle]="{ 'max-width': '640px' }"> 
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/basicdoc.ts b/src/app/showcase/doc/galleria/basicdoc.ts
index af5de0ce070..f48743e740b 100644
--- a/src/app/showcase/doc/galleria/basicdoc.ts
+++ b/src/app/showcase/doc/galleria/basicdoc.ts
@@ -49,8 +49,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
+        basic: `<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/captiondoc.ts b/src/app/showcase/doc/galleria/captiondoc.ts
index b25c1a82acc..25119037256 100644
--- a/src/app/showcase/doc/galleria/captiondoc.ts
+++ b/src/app/showcase/doc/galleria/captiondoc.ts
@@ -52,8 +52,7 @@ export class CaptionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
+        basic: `<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/controlleddoc.ts b/src/app/showcase/doc/galleria/controlleddoc.ts
index f408503701d..3bdd27703ee 100644
--- a/src/app/showcase/doc/galleria/controlleddoc.ts
+++ b/src/app/showcase/doc/galleria/controlleddoc.ts
@@ -72,8 +72,7 @@ export class ControlledDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="py-2">
+        basic: `<div class="py-2">
     <p-button type="button" icon="pi pi-minus" (click)="prev()" styleClass="p-button-secondary mr-2"></p-button>
     <p-button type="button" icon="pi pi-plus" (click)="next()" styleClass="p-button-primary"></p-button>
 </div>
diff --git a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts
index add3cae64a8..fd23a660eb7 100644
--- a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts
+++ b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts
@@ -72,8 +72,7 @@ export class FullScreenTemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria
+        basic: `<p-galleria
     [(value)]="images"
     [(visible)]="displayCustom"
     [(activeIndex)]="activeIndex"
diff --git a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts
index 5a637f474ee..054b6b2750f 100644
--- a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts
+++ b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts
@@ -60,8 +60,7 @@ export class WithoutThumbnailsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria
+        basic: `<p-galleria
     [(value)]="images"
     [(visible)]="displayBasic"
     [responsiveOptions]="responsiveOptions"
diff --git a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts
index dfeecc532d8..0b9cc92464d 100644
--- a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts
+++ b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts
@@ -55,8 +55,7 @@ export class WithThumbnailsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '50%' }" [numVisible]="9" [circular]="true" [fullScreen]="true" [showItemNavigators]="true">
+        basic: `<p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '50%' }" [numVisible]="9" [circular]="true" [fullScreen]="true" [showItemNavigators]="true">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts
index 79221382b84..fcbdf6e8183 100644
--- a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts
+++ b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts
@@ -45,8 +45,7 @@ export class ClickEventDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }">
+        basic: `<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts
index 04292da31f5..9f5a2c74243 100644
--- a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts
+++ b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts
@@ -45,8 +45,7 @@ export class HoverEventDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [changeItemOnIndicatorHover]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }"> 
+        basic: `<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [changeItemOnIndicatorHover]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }"> 
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts
index 90312f51c05..73c81566e83 100644
--- a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts
+++ b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts
@@ -85,8 +85,7 @@ export class PositionedDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria
+        basic: `<p-galleria
     [(value)]="images"
     [indicatorsPosition]="position"
     [showIndicators]="true"
diff --git a/src/app/showcase/doc/galleria/indicator/templatedoc.ts b/src/app/showcase/doc/galleria/indicator/templatedoc.ts
index 60b61515dd3..6af439572a5 100644
--- a/src/app/showcase/doc/galleria/indicator/templatedoc.ts
+++ b/src/app/showcase/doc/galleria/indicator/templatedoc.ts
@@ -50,8 +50,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [showIndicatorsOnItem]="true" indicatorsPosition="left" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '100%', 'margin-top': '2em' }">
+        basic: `<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [showIndicatorsOnItem]="true" indicatorsPosition="left" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '100%', 'margin-top': '2em' }">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts
index 6113d08fa94..95086690e71 100644
--- a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts
+++ b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts
@@ -51,8 +51,7 @@ export class HoverDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [showIndicators]="false" [showItemNavigatorsOnHover]="true" [showItemNavigators]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }">
+        basic: `<p-galleria [(value)]="images" [showIndicators]="false" [showItemNavigatorsOnHover]="true" [showItemNavigators]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts
index da4fa46dbd5..4817c345a1d 100644
--- a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts
+++ b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts
@@ -59,8 +59,7 @@ export class IndicatorsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [showItemNavigators]="true" [showThumbnails]="false" [showIndicators]="true" [showIndicatorsOnItem]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px', 'margin-top': '2em' }">
+        basic: `<p-galleria [(value)]="images" [showItemNavigators]="true" [showThumbnails]="false" [showIndicators]="true" [showIndicatorsOnItem]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px', 'margin-top': '2em' }">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts
index 4edb13474e8..e78f8305138 100644
--- a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts
+++ b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts
@@ -51,8 +51,7 @@ export class ItemThumbnailsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [showItemNavigators]="true" [responsiveOptions]="responsiveOptions" [circular]="true" [numVisible]="5" [containerStyle]="{ 'max-width': '640px' }">
+        basic: `<p-galleria [(value)]="images" [showItemNavigators]="true" [responsiveOptions]="responsiveOptions" [circular]="true" [numVisible]="5" [containerStyle]="{ 'max-width': '640px' }">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts
index 089ec33b175..79328ea2d0d 100644
--- a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts
+++ b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts
@@ -46,8 +46,7 @@ export class ItemWithoutThumbnailsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [numVisible]="5" [circular]="true" [showItemNavigators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }">
+        basic: `<p-galleria [(value)]="images" [numVisible]="5" [circular]="true" [showItemNavigators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/responsivedoc.ts b/src/app/showcase/doc/galleria/responsivedoc.ts
index f7b24c98cc7..f027b420ac9 100644
--- a/src/app/showcase/doc/galleria/responsivedoc.ts
+++ b/src/app/showcase/doc/galleria/responsivedoc.ts
@@ -48,8 +48,7 @@ export class ResponsiveDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="7" [circular]="true">
+        basic: `<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="7" [circular]="true">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/galleria/thumbnaildoc.ts b/src/app/showcase/doc/galleria/thumbnaildoc.ts
index 55b9e8e08ea..150e0e47d00 100644
--- a/src/app/showcase/doc/galleria/thumbnaildoc.ts
+++ b/src/app/showcase/doc/galleria/thumbnaildoc.ts
@@ -72,8 +72,7 @@ export class ThumbnailDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-galleria [(value)]="images" [thumbnailsPosition]="position" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
+        basic: `<p-galleria [(value)]="images" [thumbnailsPosition]="position" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
     <ng-template pTemplate="item" let-item>
         <img [src]="item.itemImageSrc" style="width: 100%; min-height: 420px; display: block;" />
     </ng-template>
diff --git a/src/app/showcase/doc/icons/basicdoc.ts b/src/app/showcase/doc/icons/basicdoc.ts
index 331be06dda8..1cf080c4bc4 100644
--- a/src/app/showcase/doc/icons/basicdoc.ts
+++ b/src/app/showcase/doc/icons/basicdoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<i class="pi pi-check"></i>
+        basic: `<i class="pi pi-check"></i>
 <i class="pi pi-times"></i>
 <span class="pi pi-search"></span>
 <span class="pi pi-user"></span>`
diff --git a/src/app/showcase/doc/inplace/basicdoc.ts b/src/app/showcase/doc/inplace/basicdoc.ts
index 9190047da68..21716132992 100644
--- a/src/app/showcase/doc/inplace/basicdoc.ts
+++ b/src/app/showcase/doc/inplace/basicdoc.ts
@@ -25,8 +25,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-inplace>
+        basic: `<p-inplace>
     <ng-template pTemplate="display">
         <span>View Content</span>
     </ng-template>
diff --git a/src/app/showcase/doc/inplace/datadoc.ts b/src/app/showcase/doc/inplace/datadoc.ts
index 47bcd30a2c7..47550331ae5 100644
--- a/src/app/showcase/doc/inplace/datadoc.ts
+++ b/src/app/showcase/doc/inplace/datadoc.ts
@@ -49,8 +49,7 @@ export class DataDoc {
     }
 
     code: Code = {
-        basic: `
-<p-inplace>
+        basic: `<p-inplace>
     <ng-template pTemplate="display">
         <div class="inline-flex align-items-center">
             <span class="pi pi-table" style="vertical-align: middle"></span>
diff --git a/src/app/showcase/doc/inplace/imagedoc.ts b/src/app/showcase/doc/inplace/imagedoc.ts
index 3508cdbc20f..51f94ba7867 100644
--- a/src/app/showcase/doc/inplace/imagedoc.ts
+++ b/src/app/showcase/doc/inplace/imagedoc.ts
@@ -25,8 +25,7 @@ import { Code } from '../../domain/code';
 })
 export class ImageDoc {
     code: Code = {
-        basic: `
-<p-inplace>
+        basic: `<p-inplace>
     <ng-template pTemplate="display">
         <div class="inline-flex align-items-center">
             <span class="pi pi-image" style="vertical-align: middle"></span>
diff --git a/src/app/showcase/doc/inplace/inputdoc.ts b/src/app/showcase/doc/inplace/inputdoc.ts
index 4dcb891f82d..13b10a926f1 100644
--- a/src/app/showcase/doc/inplace/inputdoc.ts
+++ b/src/app/showcase/doc/inplace/inputdoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class InputDoc {
     code: Code = {
-        basic: `
-<p-inplace closable="closable">
+        basic: `<p-inplace closable="closable">
     <ng-template pTemplate="display">
         <span>Click to Edit</span>
     </ng-template>
diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts
index 46e765b5962..1d2921ea88a 100644
--- a/src/app/showcase/doc/inputgroup/basicdoc.ts
+++ b/src/app/showcase/doc/inputgroup/basicdoc.ts
@@ -29,8 +29,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<div class="p-inputgroup">
+        basic: `<div class="p-inputgroup">
     <span class="p-inputgroup-addon">
         <i class="pi pi-user"></i>
     </span>
diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts
index 3adf9f84883..bd8876191dd 100644
--- a/src/app/showcase/doc/inputgroup/buttondoc.ts
+++ b/src/app/showcase/doc/inputgroup/buttondoc.ts
@@ -29,8 +29,7 @@ import { Code } from '../../domain/code';
 })
 export class ButtonDoc {
     code: Code = {
-        basic: `
-<div class="p-inputgroup">
+        basic: `<div class="p-inputgroup">
     <button type="button" pButton label="Search"></button>
     <input type="text" pInputText placeholder="Keyword" />
 </div>
diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts
index 428d0b1e297..599be793b8c 100644
--- a/src/app/showcase/doc/inputgroup/checkboxdoc.ts
+++ b/src/app/showcase/doc/inputgroup/checkboxdoc.ts
@@ -35,8 +35,7 @@ export class CheckboxDoc {
     category: string | undefined;
 
     code: Code = {
-        basic: `
-<div class="p-inputgroup">
+        basic: `<div class="p-inputgroup">
     <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
     <input type="text" pInputText placeholder="Username" />
 </div>
diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts
index 061c1e6345b..1e22d5487ab 100644
--- a/src/app/showcase/doc/inputgroup/multipledoc.ts
+++ b/src/app/showcase/doc/inputgroup/multipledoc.ts
@@ -25,8 +25,7 @@ import { Code } from '../../domain/code';
 })
 export class MultipleDoc {
     code: Code = {
-        basic: `
-<div class="p-inputgroup w-full md:w-30rem">
+        basic: `<div class="p-inputgroup w-full md:w-30rem">
     <span class="p-inputgroup-addon">
         <i class="pi pi-clock"></i>
     </span>
diff --git a/src/app/showcase/doc/inputmask/basicdoc.ts b/src/app/showcase/doc/inputmask/basicdoc.ts
index 9e2c4dc2757..116f495dbbf 100644
--- a/src/app/showcase/doc/inputmask/basicdoc.ts
+++ b/src/app/showcase/doc/inputmask/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<p-inputMask mask="99-999999" [(ngModel)]="value" placeholder="99-999999"></p-inputMask>`,
+        basic: `<p-inputMask mask="99-999999" [(ngModel)]="value" placeholder="99-999999"></p-inputMask>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputmask/disableddoc.ts b/src/app/showcase/doc/inputmask/disableddoc.ts
index 3b6ee09e66c..6fbef3d3e3a 100644
--- a/src/app/showcase/doc/inputmask/disableddoc.ts
+++ b/src/app/showcase/doc/inputmask/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<p-inputMask mask="999-99-9999" [(ngModel)]="value" [disabled]="true"></p-inputMask>`,
+        basic: `<p-inputMask mask="999-99-9999" [(ngModel)]="value" [disabled]="true"></p-inputMask>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputmask/floatlabeldoc.ts b/src/app/showcase/doc/inputmask/floatlabeldoc.ts
index 103dcff8971..d11bb337c19 100644
--- a/src/app/showcase/doc/inputmask/floatlabeldoc.ts
+++ b/src/app/showcase/doc/inputmask/floatlabeldoc.ts
@@ -20,8 +20,7 @@ export class FloatlabelDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <p-inputMask mask="999-99-9999" [(ngModel)]="value" id="ssn_input"></p-inputMask>
     <label htmlFor="ssn_input">SSN</label>
 </span>`,
diff --git a/src/app/showcase/doc/inputmask/invaliddoc.ts b/src/app/showcase/doc/inputmask/invaliddoc.ts
index f72d2cd208a..549dc35f7cb 100644
--- a/src/app/showcase/doc/inputmask/invaliddoc.ts
+++ b/src/app/showcase/doc/inputmask/invaliddoc.ts
@@ -17,8 +17,7 @@ export class InvalidDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<p-inputMask mask="999-99-9999" [(ngModel)]="value" class="ng-invalid ng-dirty"></p-inputMask>`,
+        basic: `<p-inputMask mask="999-99-9999" [(ngModel)]="value" class="ng-invalid ng-dirty"></p-inputMask>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputmask/maskdoc.ts b/src/app/showcase/doc/inputmask/maskdoc.ts
index f7017398b63..d70f11369db 100644
--- a/src/app/showcase/doc/inputmask/maskdoc.ts
+++ b/src/app/showcase/doc/inputmask/maskdoc.ts
@@ -35,8 +35,7 @@ export class MaskDoc {
     value3: string | undefined;
 
     code: Code = {
-        basic: `
-<span class="font-bold block mb-2">SSN</span>
+        basic: `<span class="font-bold block mb-2">SSN</span>
 <p-inputMask mask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999"></p-inputMask>
 
 <span class="font-bold block mb-2">Phone</span>
diff --git a/src/app/showcase/doc/inputmask/optionaldoc.ts b/src/app/showcase/doc/inputmask/optionaldoc.ts
index d75478c7ccd..a8238536d81 100644
--- a/src/app/showcase/doc/inputmask/optionaldoc.ts
+++ b/src/app/showcase/doc/inputmask/optionaldoc.ts
@@ -17,8 +17,7 @@ export class OptionalDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999"></p-inputMask>`,
+        basic: `<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999"></p-inputMask>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputmask/reactiveformsdoc.ts b/src/app/showcase/doc/inputmask/reactiveformsdoc.ts
index 5de56f4f30a..9aec3294912 100644
--- a/src/app/showcase/doc/inputmask/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/inputmask/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-inputMask mask="99-999999" [(ngModel)]="value" placeholder="99-999999"></p-inputMask>`,
+        basic: `<p-inputMask mask="99-999999" [(ngModel)]="value" placeholder="99-999999"></p-inputMask>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputmask/slotchardoc.ts b/src/app/showcase/doc/inputmask/slotchardoc.ts
index 957f83a928a..d1b76c06e55 100644
--- a/src/app/showcase/doc/inputmask/slotchardoc.ts
+++ b/src/app/showcase/doc/inputmask/slotchardoc.ts
@@ -17,8 +17,7 @@ export class SlotCharDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<p-inputMask [(ngModel)]="value" mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>`,
+        basic: `<p-inputMask [(ngModel)]="value" mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputnumber/buttonsdoc.ts b/src/app/showcase/doc/inputnumber/buttonsdoc.ts
index 47033c0f7b9..ca65e54750f 100644
--- a/src/app/showcase/doc/inputnumber/buttonsdoc.ts
+++ b/src/app/showcase/doc/inputnumber/buttonsdoc.ts
@@ -48,8 +48,7 @@ export class ButtonsDoc {
     value3: number = 25;
 
     code: Code = {
-        basic: `
-<p-inputNumber [(ngModel)]="value1" [showButtons]="true" inputId="stacked" mode="currency" currency="USD"> </p-inputNumber>
+        basic: `<p-inputNumber [(ngModel)]="value1" [showButtons]="true" inputId="stacked" mode="currency" currency="USD"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value2" mode="decimal" [showButtons]="true" inputId="minmax-buttons" [min]="0" [max]="100"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value3" [showButtons]="true" buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="0.25"
     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"></p-inputNumber>`,
diff --git a/src/app/showcase/doc/inputnumber/currencydoc.ts b/src/app/showcase/doc/inputnumber/currencydoc.ts
index ce89c49ecec..76bbbaad346 100644
--- a/src/app/showcase/doc/inputnumber/currencydoc.ts
+++ b/src/app/showcase/doc/inputnumber/currencydoc.ts
@@ -41,8 +41,7 @@ export class CurrencyDoc {
     value4: number = 5002;
 
     code: Code = {
-        basic: `
-<p-inputNumber [(ngModel)]="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US"> </p-inputNumber>
+        basic: `<p-inputNumber [(ngModel)]="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value2" mode="currency" inputId="currency-germany" currency="EUR" locale="de-DE"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value3" mode="currency" inputId="currency-india" currency="INR" currencyDisplay="code" locale="en-IN"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value4" mode="currency" inputId="currency-japan" currency="JPY" locale="jp-JP"> </p-inputNumber>`,
diff --git a/src/app/showcase/doc/inputnumber/disableddoc.ts b/src/app/showcase/doc/inputnumber/disableddoc.ts
index f5ac98c5aa8..3ae6d714d85 100644
--- a/src/app/showcase/doc/inputnumber/disableddoc.ts
+++ b/src/app/showcase/doc/inputnumber/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     value1: number = 50;
 
     code: Code = {
-        basic: `
-<p-inputNumber inputId="integeronly" [disabled]="true" prefix="%" [(ngModel)]="value1"> </p-inputNumber>`,
+        basic: `<p-inputNumber inputId="integeronly" [disabled]="true" prefix="%" [(ngModel)]="value1"> </p-inputNumber>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputnumber/floatlabeldoc.ts b/src/app/showcase/doc/inputnumber/floatlabeldoc.ts
index 3cfcfa1006f..43ca5accabe 100644
--- a/src/app/showcase/doc/inputnumber/floatlabeldoc.ts
+++ b/src/app/showcase/doc/inputnumber/floatlabeldoc.ts
@@ -20,8 +20,7 @@ export class FloatlabelDoc {
     value1!: number;
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
     <label htmlFor="number-input">Number</label>
 </span>`,
diff --git a/src/app/showcase/doc/inputnumber/invaliddoc.ts b/src/app/showcase/doc/inputnumber/invaliddoc.ts
index 02251919ff0..d6d515340e2 100644
--- a/src/app/showcase/doc/inputnumber/invaliddoc.ts
+++ b/src/app/showcase/doc/inputnumber/invaliddoc.ts
@@ -17,8 +17,7 @@ export class InvalidDoc {
     value1!: number;
 
     code: Code = {
-        basic: `
-<p-inputNumber inputId="integeronly" class="ng-invalid ng-dirty" [(ngModel)]="value1"> </p-inputNumber>`,
+        basic: `<p-inputNumber inputId="integeronly" class="ng-invalid ng-dirty" [(ngModel)]="value1"> </p-inputNumber>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputnumber/localedoc.ts b/src/app/showcase/doc/inputnumber/localedoc.ts
index ffc02878a56..58f46aa3270 100644
--- a/src/app/showcase/doc/inputnumber/localedoc.ts
+++ b/src/app/showcase/doc/inputnumber/localedoc.ts
@@ -38,8 +38,7 @@ export class LocaleDoc {
     value4: number = 732762;
 
     code: Code = {
-        basic: `
-<p-inputNumber [(ngModel)]="value1" inputId="locale-user" [minFractionDigits]="2"></p-inputNumber>
+        basic: `<p-inputNumber [(ngModel)]="value1" inputId="locale-user" [minFractionDigits]="2"></p-inputNumber>
 <p-inputNumber [(ngModel)]="value2" inputId="locale-us" mode="decimal" locale="en-US" [minFractionDigits]="2"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value3" inputId="locale-german" mode="decimal" locale="de-DE" [minFractionDigits]="2"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value4" inputId="locale-indian" mode="decimal" locale="en-IN" [minFractionDigits]="2"> </p-inputNumber>`,
diff --git a/src/app/showcase/doc/inputnumber/numeralsdoc.ts b/src/app/showcase/doc/inputnumber/numeralsdoc.ts
index 2476c693669..8d14393b028 100644
--- a/src/app/showcase/doc/inputnumber/numeralsdoc.ts
+++ b/src/app/showcase/doc/inputnumber/numeralsdoc.ts
@@ -38,8 +38,7 @@ export class NumeralsDoc {
     value4: number = 50;
 
     code: Code = {
-        basic: `
-<p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
+        basic: `<p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value2" mode="decimal" inputId="withoutgrouping" [useGrouping]="false"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value3" inputId="minmaxfraction" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value4" inputId="minmax" mode="decimal" [min]="0" [max]="100"> </p-inputNumber>
diff --git a/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts b/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts
index 3ad5602a879..be292afc2bc 100644
--- a/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts
+++ b/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts
@@ -38,8 +38,7 @@ export class PrefixSuffixDoc {
     value4: number = 20;
 
     code: Code = {
-        basic: `
-<p-inputNumber [(ngModel)]="value1" inputId="mile" suffix=" mi"> </p-inputNumber>
+        basic: `<p-inputNumber [(ngModel)]="value1" inputId="mile" suffix=" mi"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value2" inputId="percent" prefix="%"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value3" inputId="expiry" prefix="Expires in " suffix=" days"> </p-inputNumber>
 <p-inputNumber [(ngModel)]="value4" prefix="↑ " inputId="temperature" suffix="℃" [min]="0" [max]="40"> </p-inputNumber>`,
diff --git a/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts b/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts
index f0c504d69a5..978ee749a06 100644
--- a/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-inputNumber inputId="integeronly" formControlName="value"></p-inputNumber>
 </form>`,
 
diff --git a/src/app/showcase/doc/inputnumber/verticaldoc.ts b/src/app/showcase/doc/inputnumber/verticaldoc.ts
index 744470519bb..cd4b8ddaecd 100644
--- a/src/app/showcase/doc/inputnumber/verticaldoc.ts
+++ b/src/app/showcase/doc/inputnumber/verticaldoc.ts
@@ -28,8 +28,7 @@ export class VerticalDoc {
     value1: number = 50;
 
     code: Code = {
-        basic: `
-<p-inputNumber [(ngModel)]="value1" [showButtons]="true" buttonLayout="vertical" spinnerMode="vertical" inputId="vertical" decrementButtonClass="p-button-secondary"
+        basic: `<p-inputNumber [(ngModel)]="value1" [showButtons]="true" buttonLayout="vertical" spinnerMode="vertical" inputId="vertical" decrementButtonClass="p-button-secondary"
     incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" ></p-inputNumber>`,
 
         html: `
diff --git a/src/app/showcase/doc/inputswitch/basicdoc.ts b/src/app/showcase/doc/inputswitch/basicdoc.ts
index 99599d6a480..c125e420160 100644
--- a/src/app/showcase/doc/inputswitch/basicdoc.ts
+++ b/src/app/showcase/doc/inputswitch/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     checked: boolean = false;
 
     code: Code = {
-        basic: `
-<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>`,
+        basic: `<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>`,
 
         html: ` 
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputswitch/disableddoc.ts b/src/app/showcase/doc/inputswitch/disableddoc.ts
index ce07dff3d30..e3ab61a1dbe 100644
--- a/src/app/showcase/doc/inputswitch/disableddoc.ts
+++ b/src/app/showcase/doc/inputswitch/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     checked: boolean = false;
 
     code: Code = {
-        basic: `
-<p-inputSwitch [(ngModel)]="checked" [disabled]="true"></p-inputSwitch>`,
+        basic: `<p-inputSwitch [(ngModel)]="checked" [disabled]="true"></p-inputSwitch>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputswitch/preselectiondoc.ts b/src/app/showcase/doc/inputswitch/preselectiondoc.ts
index c27cd8e2456..4ee945bc3fd 100644
--- a/src/app/showcase/doc/inputswitch/preselectiondoc.ts
+++ b/src/app/showcase/doc/inputswitch/preselectiondoc.ts
@@ -17,8 +17,7 @@ export class PreselectionDoc {
     checked: boolean = true;
 
     code: Code = {
-        basic: `
-<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>`,
+        basic: `<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts b/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts
index af5b17c9fad..d246eef4390 100644
--- a/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-inputSwitch formControlName="checked"></p-inputSwitch>`,
+        basic: `<p-inputSwitch formControlName="checked"></p-inputSwitch>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtext/basicdoc.ts b/src/app/showcase/doc/inputtext/basicdoc.ts
index 3bd84e28ea7..2c756c6e364 100644
--- a/src/app/showcase/doc/inputtext/basicdoc.ts
+++ b/src/app/showcase/doc/inputtext/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value: string;
 
     code: Code = {
-        basic: `
-<input type="text" pInputText [(ngModel)]="value" />`,
+        basic: `<input type="text" pInputText [(ngModel)]="value" />`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtext/disableddoc.ts b/src/app/showcase/doc/inputtext/disableddoc.ts
index 9c813a3ad16..388a5192714 100644
--- a/src/app/showcase/doc/inputtext/disableddoc.ts
+++ b/src/app/showcase/doc/inputtext/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<input id="disabled-input" type="text" pInputText [disabled]="true" [(ngModel)]="value" />`,
+        basic: `<input id="disabled-input" type="text" pInputText [disabled]="true" [(ngModel)]="value" />`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtext/floatlabeldoc.ts b/src/app/showcase/doc/inputtext/floatlabeldoc.ts
index 9a48eb63e61..9c0ad5cf2fb 100644
--- a/src/app/showcase/doc/inputtext/floatlabeldoc.ts
+++ b/src/app/showcase/doc/inputtext/floatlabeldoc.ts
@@ -20,8 +20,7 @@ export class FloatLabelDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <input pInputText id="username" [(ngModel)]="value" />
     <label htmlFor="username">Username</label>
 </span>`,
diff --git a/src/app/showcase/doc/inputtext/helptextdoc.ts b/src/app/showcase/doc/inputtext/helptextdoc.ts
index 6959d31f4f0..efcc3f086c7 100644
--- a/src/app/showcase/doc/inputtext/helptextdoc.ts
+++ b/src/app/showcase/doc/inputtext/helptextdoc.ts
@@ -21,8 +21,7 @@ export class HelpTextDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<div class="flex flex-column gap-2">
+        basic: `<div class="flex flex-column gap-2">
     <label htmlFor="username">Username</label>
     <input pInputText id="username" aria-describedby="username-help" [(ngModel)]="value" />
     <small id="username-help">Enter your username to reset your password.</small>
diff --git a/src/app/showcase/doc/inputtext/iconsdoc.ts b/src/app/showcase/doc/inputtext/iconsdoc.ts
index 77e590dc15f..f1f3cfdaf2e 100644
--- a/src/app/showcase/doc/inputtext/iconsdoc.ts
+++ b/src/app/showcase/doc/inputtext/iconsdoc.ts
@@ -27,8 +27,7 @@ export class IconsDoc {
     value2: string | undefined;
 
     code: Code = {
-        basic: `
-<span class="p-input-icon-left">
+        basic: `<span class="p-input-icon-left">
     <i class="pi pi-search"></i>
     <input type="text" pInputText [(ngModel)]="value" />
 </span>`,
diff --git a/src/app/showcase/doc/inputtext/invaliddoc.ts b/src/app/showcase/doc/inputtext/invaliddoc.ts
index 1058eb3e5cf..ae8f892c069 100644
--- a/src/app/showcase/doc/inputtext/invaliddoc.ts
+++ b/src/app/showcase/doc/inputtext/invaliddoc.ts
@@ -17,8 +17,7 @@ export class InvalidDoc {
     value: string | undefined;
 
     code: Code = {
-        basic: `
-<input pInputText class="ng-invalid ng-dirty" [(ngModel)]="value" />`,
+        basic: `<input pInputText class="ng-invalid ng-dirty" [(ngModel)]="value" />`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtext/keyfilterdoc.ts b/src/app/showcase/doc/inputtext/keyfilterdoc.ts
index 0862c4519ef..cd389f03cc6 100644
--- a/src/app/showcase/doc/inputtext/keyfilterdoc.ts
+++ b/src/app/showcase/doc/inputtext/keyfilterdoc.ts
@@ -17,8 +17,7 @@ export class KeyFilterDoc {
     value: number | undefined;
 
     code: Code = {
-        basic: `
-<input pInputText pKeyFilter="int" placeholder="Integers" [(ngModel)]="value" />`,
+        basic: `<input pInputText pKeyFilter="int" placeholder="Integers" [(ngModel)]="value" />`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtext/reactiveformsdoc.ts b/src/app/showcase/doc/inputtext/reactiveformsdoc.ts
index a9d20409901..b4a84326a9a 100644
--- a/src/app/showcase/doc/inputtext/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/inputtext/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<input type="text" pInputText formControlName="text"/>`,
+        basic: `<input type="text" pInputText formControlName="text"/>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtext/sizesdoc.ts b/src/app/showcase/doc/inputtext/sizesdoc.ts
index 0aafc315836..0701de982b7 100644
--- a/src/app/showcase/doc/inputtext/sizesdoc.ts
+++ b/src/app/showcase/doc/inputtext/sizesdoc.ts
@@ -23,8 +23,7 @@ export class SizesDoc {
     value3: string | undefined;
 
     code: Code = {
-        basic: `
-<input pInputText type="text" class="p-inputtext-sm" placeholder="Small" [(ngModel)]="value" />
+        basic: `<input pInputText type="text" class="p-inputtext-sm" placeholder="Small" [(ngModel)]="value" />
 <input pInputText type="text" placeholder="Normal" [(ngModel)]="value2" />
 <input pInputText type="text" class="p-inputtext-lg" placeholder="Large" [(ngModel)]="value3" />`,
 
diff --git a/src/app/showcase/doc/inputtextarea/autoresizedoc.ts b/src/app/showcase/doc/inputtextarea/autoresizedoc.ts
index b4c8abf87d8..92403d9bab6 100644
--- a/src/app/showcase/doc/inputtextarea/autoresizedoc.ts
+++ b/src/app/showcase/doc/inputtextarea/autoresizedoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class AutoResizeDoc {
     code: Code = {
-        basic: `
-<textarea rows="5" cols="30" pInputTextarea [autoResize]="true"></textarea>`,
+        basic: `<textarea rows="5" cols="30" pInputTextarea [autoResize]="true"></textarea>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtextarea/basicdoc.ts b/src/app/showcase/doc/inputtextarea/basicdoc.ts
index 5ab71e747da..6ee9befdf73 100644
--- a/src/app/showcase/doc/inputtextarea/basicdoc.ts
+++ b/src/app/showcase/doc/inputtextarea/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<textarea rows="5" cols="30" pInputTextarea [(ngModel)]="value"></textarea>`,
+        basic: `<textarea rows="5" cols="30" pInputTextarea [(ngModel)]="value"></textarea>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtextarea/disableddoc.ts b/src/app/showcase/doc/inputtextarea/disableddoc.ts
index 934fa45d74e..d425a4a3f86 100644
--- a/src/app/showcase/doc/inputtextarea/disableddoc.ts
+++ b/src/app/showcase/doc/inputtextarea/disableddoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class DisabledDoc {
     code: Code = {
-        basic: `
-<textarea rows="5" cols="30" pInputTextarea [disabled]="true"></textarea>`,
+        basic: `<textarea rows="5" cols="30" pInputTextarea [disabled]="true"></textarea>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts b/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts
index 047120067b0..d804c0468c1 100644
--- a/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts
+++ b/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class FloatlabelDoc {
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <textarea id="float-input" rows="5" cols="30" pInputTextarea></textarea>
     <label for="float-input">Summary</label>
 </span>`,
diff --git a/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts b/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts
index ee738d414d9..3f84e68f07f 100644
--- a/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts
+++ b/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class KeyfilterDoc {
     code: Code = {
-        basic: `
-<textarea pKeyFilter="int" rows="5" cols="30" pInputTextarea></textarea>`,
+        basic: `<textarea pKeyFilter="int" rows="5" cols="30" pInputTextarea></textarea>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts b/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts
index 5a2245fa7c0..5ede07f730f 100644
--- a/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <textarea rows="5" cols="30" pInputTextarea formControlName="text"></textarea>
 </form>`,
 
diff --git a/src/app/showcase/doc/keyfilter/presetsdoc.ts b/src/app/showcase/doc/keyfilter/presetsdoc.ts
index 43735967bca..57aadfa52bd 100644
--- a/src/app/showcase/doc/keyfilter/presetsdoc.ts
+++ b/src/app/showcase/doc/keyfilter/presetsdoc.ts
@@ -42,8 +42,7 @@ import { Code } from '../../domain/code';
 })
 export class PresetsDoc {
     code: Code = {
-        basic: `
-<input pInputText pKeyFilter="int" />
+        basic: `<input pInputText pKeyFilter="int" />
 <input pInputText pKeyFilter="num" />
 <input pInputText pKeyFilter="money" />
 <input pInputText pKeyFilter="hex" />
diff --git a/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts b/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts
index b30ea661387..096524592d7 100644
--- a/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts
@@ -27,8 +27,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <label for="integer" class="font-bold block mb-2"> Integer </label>
     <input pInputText id="integer" pKeyFilter="int" class="w-full" formControlName="value"/>
 </form>`,
diff --git a/src/app/showcase/doc/keyfilter/regexdoc.ts b/src/app/showcase/doc/keyfilter/regexdoc.ts
index 56445e27709..79d4ba028f5 100644
--- a/src/app/showcase/doc/keyfilter/regexdoc.ts
+++ b/src/app/showcase/doc/keyfilter/regexdoc.ts
@@ -26,8 +26,7 @@ export class RegexDoc {
     blockChars: RegExp = /^[^<>*!]+$/;
 
     code: Code = {
-        basic: `
-<input pInputText [pKeyFilter]="blockSpace" />
+        basic: `<input pInputText [pKeyFilter]="blockSpace" />
 <input pInputText [pKeyFilter]="blockChars" />`,
 
         html: `
diff --git a/src/app/showcase/doc/knob/basicdoc.ts b/src/app/showcase/doc/knob/basicdoc.ts
index 3d8103e31d9..2cdd14715d7 100644
--- a/src/app/showcase/doc/knob/basicdoc.ts
+++ b/src/app/showcase/doc/knob/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/colordoc.ts b/src/app/showcase/doc/knob/colordoc.ts
index 1f7ae54d87f..4527a3ddaf8 100644
--- a/src/app/showcase/doc/knob/colordoc.ts
+++ b/src/app/showcase/doc/knob/colordoc.ts
@@ -17,8 +17,7 @@ export class ColorDoc {
     value: number = 50;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/disableddoc.ts b/src/app/showcase/doc/knob/disableddoc.ts
index 0356d26c9f5..6f078bca990 100644
--- a/src/app/showcase/doc/knob/disableddoc.ts
+++ b/src/app/showcase/doc/knob/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     value: number = 75;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" [disabled]="true"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" [disabled]="true"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/minmaxdoc.ts b/src/app/showcase/doc/knob/minmaxdoc.ts
index e5b4b17e67e..c3382d00bb4 100644
--- a/src/app/showcase/doc/knob/minmaxdoc.ts
+++ b/src/app/showcase/doc/knob/minmaxdoc.ts
@@ -17,8 +17,7 @@ export class MinMaxDoc {
     value: number = 10;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" [min]="-50" [max]="50"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" [min]="-50" [max]="50"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/reactiveformsdoc.ts b/src/app/showcase/doc/knob/reactiveformsdoc.ts
index 4cd1561383d..63751f56f40 100644
--- a/src/app/showcase/doc/knob/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/knob/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-knob formControlName="value"></p-knob>
 </form>`,
 
diff --git a/src/app/showcase/doc/knob/readonlydoc.ts b/src/app/showcase/doc/knob/readonlydoc.ts
index f07f7606966..d94d2dcc5cf 100644
--- a/src/app/showcase/doc/knob/readonlydoc.ts
+++ b/src/app/showcase/doc/knob/readonlydoc.ts
@@ -17,8 +17,7 @@ export class ReadonlyDoc {
     value: number = 50;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" [readonly]="true"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" [readonly]="true"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/sizedoc.ts b/src/app/showcase/doc/knob/sizedoc.ts
index c45c6c886f8..ee5fd8cda0a 100644
--- a/src/app/showcase/doc/knob/sizedoc.ts
+++ b/src/app/showcase/doc/knob/sizedoc.ts
@@ -17,8 +17,7 @@ export class SizeDoc {
     value: number = 60;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" [size]="200"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" [size]="200"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/stepdoc.ts b/src/app/showcase/doc/knob/stepdoc.ts
index af95e11d5c4..aac70b52838 100644
--- a/src/app/showcase/doc/knob/stepdoc.ts
+++ b/src/app/showcase/doc/knob/stepdoc.ts
@@ -17,8 +17,7 @@ export class StepDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" [step]="10"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" [step]="10"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/strokedoc.ts b/src/app/showcase/doc/knob/strokedoc.ts
index 5f9159c4afa..b52ea030b51 100644
--- a/src/app/showcase/doc/knob/strokedoc.ts
+++ b/src/app/showcase/doc/knob/strokedoc.ts
@@ -17,8 +17,7 @@ export class StrokeDoc {
     value: number = 40;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" [strokeWidth]="5"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" [strokeWidth]="5"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/knob/templatedoc.ts b/src/app/showcase/doc/knob/templatedoc.ts
index 0601af49d2e..0ba17b95cd9 100644
--- a/src/app/showcase/doc/knob/templatedoc.ts
+++ b/src/app/showcase/doc/knob/templatedoc.ts
@@ -17,8 +17,7 @@ export class TemplateDoc {
     value: number = 60;
 
     code: Code = {
-        basic: `
-<p-knob [(ngModel)]="value" valueTemplate="{value}%"></p-knob>`,
+        basic: `<p-knob [(ngModel)]="value" valueTemplate="{value}%"></p-knob>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/listbox/basicdoc.ts b/src/app/showcase/doc/listbox/basicdoc.ts
index 845608c7222..b21e4d99556 100644
--- a/src/app/showcase/doc/listbox/basicdoc.ts
+++ b/src/app/showcase/doc/listbox/basicdoc.ts
@@ -38,8 +38,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [style]="{'width':'15rem'}" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
+        basic: `<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [style]="{'width':'15rem'}" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/listbox/disableddoc.ts b/src/app/showcase/doc/listbox/disableddoc.ts
index bc208123795..23a7e5a0d12 100644
--- a/src/app/showcase/doc/listbox/disableddoc.ts
+++ b/src/app/showcase/doc/listbox/disableddoc.ts
@@ -34,8 +34,7 @@ export class DisabledDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [disabled]="true" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
+        basic: `<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [disabled]="true" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/listbox/filterdoc.ts b/src/app/showcase/doc/listbox/filterdoc.ts
index 018466fffeb..0736c98d5cf 100644
--- a/src/app/showcase/doc/listbox/filterdoc.ts
+++ b/src/app/showcase/doc/listbox/filterdoc.ts
@@ -34,8 +34,7 @@ export class FilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [filter]="true" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
+        basic: `<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [filter]="true" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/listbox/groupdoc.ts b/src/app/showcase/doc/listbox/groupdoc.ts
index a88a43fba8d..e78b4a65f75 100644
--- a/src/app/showcase/doc/listbox/groupdoc.ts
+++ b/src/app/showcase/doc/listbox/groupdoc.ts
@@ -67,8 +67,7 @@ export class GroupDoc {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="groupedCities" [group]="true" [(ngModel)]="selectedCountry" [listStyle]="{ 'max-height': '250px' }" [style]="{ width: '15rem' }">
+        basic: `<p-listbox [options]="groupedCities" [group]="true" [(ngModel)]="selectedCountry" [listStyle]="{ 'max-height': '250px' }" [style]="{ width: '15rem' }">
     <ng-template let-group pTemplate="group">
         <div class="flex align-items-center">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
diff --git a/src/app/showcase/doc/listbox/invaliddoc.ts b/src/app/showcase/doc/listbox/invaliddoc.ts
index ba9dd01d44f..f06dea3f1a0 100644
--- a/src/app/showcase/doc/listbox/invaliddoc.ts
+++ b/src/app/showcase/doc/listbox/invaliddoc.ts
@@ -34,8 +34,7 @@ export class InvalidDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" class="ng-invalid ng-dirty" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
+        basic: `<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" class="ng-invalid ng-dirty" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/listbox/multipledoc.ts b/src/app/showcase/doc/listbox/multipledoc.ts
index cb1220a3f7e..64f45db88de 100644
--- a/src/app/showcase/doc/listbox/multipledoc.ts
+++ b/src/app/showcase/doc/listbox/multipledoc.ts
@@ -37,8 +37,7 @@ export class MultipleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" [style]="{'width':'15rem'}" [multiple]="true" [metaKeySelection]="false" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
+        basic: `<p-listbox [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" [style]="{'width':'15rem'}" [multiple]="true" [metaKeySelection]="false" [listStyle]="{'max-height': '220px'}"></p-listbox>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/listbox/reactiveformsdoc.ts b/src/app/showcase/doc/listbox/reactiveformsdoc.ts
index 484e4412890..0d78637af8e 100644
--- a/src/app/showcase/doc/listbox/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/listbox/reactiveformsdoc.ts
@@ -41,8 +41,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-listbox [options]="cities" formControlName="selectedCity" optionLabel="name" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}"></p-listbox>
 </form>`,
 
diff --git a/src/app/showcase/doc/listbox/templatedoc.ts b/src/app/showcase/doc/listbox/templatedoc.ts
index 904a0b83c89..d6d3474664b 100644
--- a/src/app/showcase/doc/listbox/templatedoc.ts
+++ b/src/app/showcase/doc/listbox/templatedoc.ts
@@ -46,8 +46,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-listbox [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [listStyle]="{ 'max-height': '250px' }" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}">
+        basic: `<p-listbox [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [listStyle]="{ 'max-height': '250px' }" [style]="{ width: '15rem' }" [listStyle]="{'max-height': '220px'}">
     <ng-template let-country pTemplate="item">
         <div class="flex align-items-center gap-2">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px"/>
diff --git a/src/app/showcase/doc/listbox/virtualscrolldoc.ts b/src/app/showcase/doc/listbox/virtualscrolldoc.ts
index c397ab6ce4c..7652075addb 100644
--- a/src/app/showcase/doc/listbox/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/listbox/virtualscrolldoc.ts
@@ -51,8 +51,7 @@ export class VirtualScrollDoc {
     }
 
     code: Code = {
-        basic: `
-<p-listbox
+        basic: `<p-listbox
     [options]="items"
     [(ngModel)]="selectedItems"
     [selectAll]="selectAll"
diff --git a/src/app/showcase/doc/megamenu/basicdoc.ts b/src/app/showcase/doc/megamenu/basicdoc.ts
index 96807ab88f8..85d98866b16 100644
--- a/src/app/showcase/doc/megamenu/basicdoc.ts
+++ b/src/app/showcase/doc/megamenu/basicdoc.ts
@@ -137,8 +137,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-megaMenu [model]="items"></p-megaMenu>`,
+        basic: `<p-megaMenu [model]="items"></p-megaMenu>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/megamenu/templatedoc.ts b/src/app/showcase/doc/megamenu/templatedoc.ts
index d990899b9ba..90f70ed6a19 100644
--- a/src/app/showcase/doc/megamenu/templatedoc.ts
+++ b/src/app/showcase/doc/megamenu/templatedoc.ts
@@ -144,8 +144,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-megaMenu [model]="items" styleClass="flex">
+        basic: `<p-megaMenu [model]="items" styleClass="flex">
     <ng-template pTemplate="start">
         <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="40" class="mr-2" />
     </ng-template>
diff --git a/src/app/showcase/doc/megamenu/verticaldoc.ts b/src/app/showcase/doc/megamenu/verticaldoc.ts
index 41f8fa20c82..8ddd569c429 100644
--- a/src/app/showcase/doc/megamenu/verticaldoc.ts
+++ b/src/app/showcase/doc/megamenu/verticaldoc.ts
@@ -137,8 +137,7 @@ export class VerticalDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-megaMenu [model]="items"></p-megaMenu>`,
+        basic: `<p-megaMenu [model]="items"></p-megaMenu>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/menu/basicdoc.ts b/src/app/showcase/doc/menu/basicdoc.ts
index 7f7e07fe7a9..56483e15c20 100644
--- a/src/app/showcase/doc/menu/basicdoc.ts
+++ b/src/app/showcase/doc/menu/basicdoc.ts
@@ -31,8 +31,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-menu [model]="items"></p-menu>`,
+        basic: `<p-menu [model]="items"></p-menu>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/menu/commanddoc.ts b/src/app/showcase/doc/menu/commanddoc.ts
index d189183b396..f0cff6de9d8 100644
--- a/src/app/showcase/doc/menu/commanddoc.ts
+++ b/src/app/showcase/doc/menu/commanddoc.ts
@@ -49,8 +49,7 @@ export class CommandDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-menu [model]="items"></p-menu>`,
 
         html: `
diff --git a/src/app/showcase/doc/menu/customdoc.ts b/src/app/showcase/doc/menu/customdoc.ts
index 5b8d3cf3c29..12845df9e88 100644
--- a/src/app/showcase/doc/menu/customdoc.ts
+++ b/src/app/showcase/doc/menu/customdoc.ts
@@ -71,8 +71,7 @@ export class CustomContentDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-menu [model]="items">
+        basic: `<p-menu [model]="items">
     <ng-template pTemplate="item" let-item>
         <a class="p-menuitem-link flex justify-content-between align-items-center p-3">
             <div>
diff --git a/src/app/showcase/doc/menu/groupdoc.ts b/src/app/showcase/doc/menu/groupdoc.ts
index 419dc330461..d78121136d6 100644
--- a/src/app/showcase/doc/menu/groupdoc.ts
+++ b/src/app/showcase/doc/menu/groupdoc.ts
@@ -69,8 +69,7 @@ export class GroupDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-menu [model]="items"></p-menu>`,
 
         html: `
diff --git a/src/app/showcase/doc/menu/navigationdoc.ts b/src/app/showcase/doc/menu/navigationdoc.ts
index aec52f46317..c3f53d16414 100644
--- a/src/app/showcase/doc/menu/navigationdoc.ts
+++ b/src/app/showcase/doc/menu/navigationdoc.ts
@@ -34,8 +34,7 @@ export class NavigationDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-menu [model]="items"></p-menu>`,
+        basic: `<p-menu [model]="items"></p-menu>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/menu/popupdoc.ts b/src/app/showcase/doc/menu/popupdoc.ts
index 1a83bcfb114..6d80ac8d84b 100644
--- a/src/app/showcase/doc/menu/popupdoc.ts
+++ b/src/app/showcase/doc/menu/popupdoc.ts
@@ -70,8 +70,7 @@ export class PopupDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-menu #menu [model]="items" [popup]="true"></p-menu>
 <button pButton type="button" (click)="menu.toggle($event)" icon="pi pi-bars" label="Show"></button>`,
 
diff --git a/src/app/showcase/doc/menubar/basicdoc.ts b/src/app/showcase/doc/menubar/basicdoc.ts
index 0400d1eb508..d045bcb90d5 100644
--- a/src/app/showcase/doc/menubar/basicdoc.ts
+++ b/src/app/showcase/doc/menubar/basicdoc.ts
@@ -144,8 +144,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-menubar [model]="items"></p-menubar>`,
+        basic: `<p-menubar [model]="items"></p-menubar>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/menubar/templatedoc.ts b/src/app/showcase/doc/menubar/templatedoc.ts
index 16eb0aeff2c..5c92cbe3d7a 100644
--- a/src/app/showcase/doc/menubar/templatedoc.ts
+++ b/src/app/showcase/doc/menubar/templatedoc.ts
@@ -151,8 +151,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-menubar [model]="items">
+        basic: `<p-menubar [model]="items">
     <ng-template pTemplate="start">
         <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="40" class="mr-2" />
     </ng-template>
diff --git a/src/app/showcase/doc/messages/animationdoc.ts b/src/app/showcase/doc/messages/animationdoc.ts
index 380d7b47a8f..703c6b73628 100644
--- a/src/app/showcase/doc/messages/animationdoc.ts
+++ b/src/app/showcase/doc/messages/animationdoc.ts
@@ -25,8 +25,7 @@ export class AnimationDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-messages [(value)]="messages" [showTransitionOptions]="'500ms'" [hideTransitionOptions]="'500ms'" [enableService]="false"></p-messages>`,
+        basic: `<p-messages [(value)]="messages" [showTransitionOptions]="'500ms'" [hideTransitionOptions]="'500ms'" [enableService]="false"></p-messages>`,
         html: `
 <div class="card">
     <p-messages [(value)]="messages" [showTransitionOptions]="'500ms'" [hideTransitionOptions]="'500ms'" [enableService]="false"></p-messages>
diff --git a/src/app/showcase/doc/messages/basicdoc.ts b/src/app/showcase/doc/messages/basicdoc.ts
index 5ae57f35668..c0f2fcbd097 100644
--- a/src/app/showcase/doc/messages/basicdoc.ts
+++ b/src/app/showcase/doc/messages/basicdoc.ts
@@ -25,8 +25,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>`,
+        basic: `<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>`,
         html: `
 <div class="card">
     <p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>
diff --git a/src/app/showcase/doc/messages/closabledoc.ts b/src/app/showcase/doc/messages/closabledoc.ts
index eac522b0bde..d388e9b8cf9 100644
--- a/src/app/showcase/doc/messages/closabledoc.ts
+++ b/src/app/showcase/doc/messages/closabledoc.ts
@@ -36,8 +36,7 @@ export class ClosableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-messages [(value)]="messages1" [enableService]="false" [closable]="false"></p-messages>
+        basic: `<p-messages [(value)]="messages1" [enableService]="false" [closable]="false"></p-messages>
 <p-messages [(value)]="messages2" [enableService]="false"></p-messages>`,
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/messages/dynamicdoc.ts b/src/app/showcase/doc/messages/dynamicdoc.ts
index addbf3ab70a..73c5c230d9a 100644
--- a/src/app/showcase/doc/messages/dynamicdoc.ts
+++ b/src/app/showcase/doc/messages/dynamicdoc.ts
@@ -33,8 +33,7 @@ export class DynamicDoc {
     }
 
     code: Code = {
-        basic: `
-<button type="button" pButton pRipple (click)="addMessages()" label="Show" class="mr-2"></button>
+        basic: `<button type="button" pButton pRipple (click)="addMessages()" label="Show" class="mr-2"></button>
 <button type="button" pButton pRipple (click)="clearMessages()" icon="pi pi-times" label="Clear" class="p-button-secondary"></button>
 <p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>`,
         html: `
diff --git a/src/app/showcase/doc/messages/inlinedoc.ts b/src/app/showcase/doc/messages/inlinedoc.ts
index 16139d82cd0..996a6657c11 100644
--- a/src/app/showcase/doc/messages/inlinedoc.ts
+++ b/src/app/showcase/doc/messages/inlinedoc.ts
@@ -36,8 +36,7 @@ import { Code } from '../../domain/code';
 })
 export class InlineDoc {
     code: Code = {
-        basic: `
-<div class="flex justify-content-center gap-2">
+        basic: `<div class="flex justify-content-center gap-2">
     <p-message severity="info" text="Message Content"></p-message>
     <p-message severity="success" text="Message Content"></p-message>  
     <p-message severity="warn" text="Message Content"></p-message>  
diff --git a/src/app/showcase/doc/messages/servicedoc.ts b/src/app/showcase/doc/messages/servicedoc.ts
index 0f6a86315a2..24c1bf34256 100644
--- a/src/app/showcase/doc/messages/servicedoc.ts
+++ b/src/app/showcase/doc/messages/servicedoc.ts
@@ -42,8 +42,7 @@ export class ServiceDoc {
     }
 
     code: Code = {
-        basic: `
-<div class="flex justify-content-center gap-2">
+        basic: `<div class="flex justify-content-center gap-2">
     <button type="button" pButton class="p-button-primary" (click)="addSingle()" label="Single"></button>
     <button type="button" pButton class="p-button-success" (click)="addMultiple()" label="Multiple"></button>
     <button type="button" pButton class="p-button-secondary" (click)="clear()" label="Clear"></button>
diff --git a/src/app/showcase/doc/messages/severitydoc.ts b/src/app/showcase/doc/messages/severitydoc.ts
index 6d481b96fb4..4a25e645d0e 100644
--- a/src/app/showcase/doc/messages/severitydoc.ts
+++ b/src/app/showcase/doc/messages/severitydoc.ts
@@ -27,8 +27,7 @@ export class SeverityDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>`,
+        basic: `<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>`,
         html: `
 <div class="card">
     <p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>
diff --git a/src/app/showcase/doc/messages/staticdoc.ts b/src/app/showcase/doc/messages/staticdoc.ts
index a1a0829189f..e22a70d372c 100644
--- a/src/app/showcase/doc/messages/staticdoc.ts
+++ b/src/app/showcase/doc/messages/staticdoc.ts
@@ -20,8 +20,7 @@ import { Code } from '../../domain/code';
 })
 export class StaticDoc {
     code: Code = {
-        basic: `
-<p-messages severity="info">
+        basic: `<p-messages severity="info">
     <ng-template pTemplate>
         <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" width="32" />
         <div class="ml-2">Always bet on Prime.</div>
diff --git a/src/app/showcase/doc/multiselect/basicdoc.ts b/src/app/showcase/doc/multiselect/basicdoc.ts
index ee408838bfb..b912e7b012f 100644
--- a/src/app/showcase/doc/multiselect/basicdoc.ts
+++ b/src/app/showcase/doc/multiselect/basicdoc.ts
@@ -38,8 +38,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name"></p-multiSelect>`,
+        basic: `<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name"></p-multiSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/multiselect/chipsdoc.ts b/src/app/showcase/doc/multiselect/chipsdoc.ts
index 786b6281bea..b25dfc9771c 100644
--- a/src/app/showcase/doc/multiselect/chipsdoc.ts
+++ b/src/app/showcase/doc/multiselect/chipsdoc.ts
@@ -34,8 +34,7 @@ export class ChipsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" placeholder="Select Cities" optionLabel="name" display="chip" [showClear]="true"></p-multiSelect>`,
+        basic: `<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" placeholder="Select Cities" optionLabel="name" display="chip" [showClear]="true"></p-multiSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/multiselect/disableddoc.ts b/src/app/showcase/doc/multiselect/disableddoc.ts
index 0de5968e757..6213ba422e2 100644
--- a/src/app/showcase/doc/multiselect/disableddoc.ts
+++ b/src/app/showcase/doc/multiselect/disableddoc.ts
@@ -34,8 +34,7 @@ export class DisabledDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" [disabled]="true" optionLabel="name"></p-multiSelect>`,
+        basic: `<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" [disabled]="true" optionLabel="name"></p-multiSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/multiselect/filterdoc.ts b/src/app/showcase/doc/multiselect/filterdoc.ts
index 05e5d4dd482..63d4f8483f5 100644
--- a/src/app/showcase/doc/multiselect/filterdoc.ts
+++ b/src/app/showcase/doc/multiselect/filterdoc.ts
@@ -34,8 +34,7 @@ export class FilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" [filter]="true" optionLabel="name" placeholder="Select Cities"></p-multiSelect>`,
+        basic: `<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" [filter]="true" optionLabel="name" placeholder="Select Cities"></p-multiSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/multiselect/floatlabeldoc.ts b/src/app/showcase/doc/multiselect/floatlabeldoc.ts
index e1bf630d8c9..be0975c22ce 100644
--- a/src/app/showcase/doc/multiselect/floatlabeldoc.ts
+++ b/src/app/showcase/doc/multiselect/floatlabeldoc.ts
@@ -37,8 +37,7 @@ export class FloatLabelDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <p-multiSelect inputId="float-label" [options]="cities" [(ngModel)]="selectedCities" optionLabel="name"></p-multiSelect>
     <label for="float-label">Select Cities</label>
 </span>`,
diff --git a/src/app/showcase/doc/multiselect/groupdoc.ts b/src/app/showcase/doc/multiselect/groupdoc.ts
index 5421449c1d0..9616c160879 100644
--- a/src/app/showcase/doc/multiselect/groupdoc.ts
+++ b/src/app/showcase/doc/multiselect/groupdoc.ts
@@ -67,8 +67,7 @@ export class GroupDoc {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities" placeholder="Select Cities" scrollHeight="250px" display="chip">
+        basic: `<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities" placeholder="Select Cities" scrollHeight="250px" display="chip">
     <ng-template let-group pTemplate="group">
         <div class="flex align-items-center">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
diff --git a/src/app/showcase/doc/multiselect/invaliddoc.ts b/src/app/showcase/doc/multiselect/invaliddoc.ts
index 9cb835c2a7c..cb81fef0f83 100644
--- a/src/app/showcase/doc/multiselect/invaliddoc.ts
+++ b/src/app/showcase/doc/multiselect/invaliddoc.ts
@@ -34,8 +34,7 @@ export class InvalidDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" class="ng-dirty ng-invalid" optionLabel="name"></p-multiSelect>`,
+        basic: `<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" class="ng-dirty ng-invalid" optionLabel="name"></p-multiSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/multiselect/reactiveformsdoc.ts b/src/app/showcase/doc/multiselect/reactiveformsdoc.ts
index 7d6066adc8b..900717a4eb9 100644
--- a/src/app/showcase/doc/multiselect/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/multiselect/reactiveformsdoc.ts
@@ -41,8 +41,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-multiSelect [options]="cities" formControlName="selectedCities" optionLabel="name" placeholder="Select Cities"></p-multiSelect>
 </form>`,
 
diff --git a/src/app/showcase/doc/multiselect/templatedoc.ts b/src/app/showcase/doc/multiselect/templatedoc.ts
index d3f1a294bdf..10e2dbe6a05 100644
--- a/src/app/showcase/doc/multiselect/templatedoc.ts
+++ b/src/app/showcase/doc/multiselect/templatedoc.ts
@@ -53,8 +53,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select Countries" optionLabel="name">
+        basic: `<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select Countries" optionLabel="name">
     <ng-template let-value pTemplate="selectedItems">
         <div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
             <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
diff --git a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
index f06c5737441..0f1ab23925d 100644
--- a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
@@ -47,8 +47,7 @@ export class VirtualScrollDoc {
     }
 
     code: Code = {
-        basic: `
-<p-multiSelect
+        basic: `<p-multiSelect
     [options]="items"
     [showToggleAll]="true"
     [selectAll]="selectAll"
diff --git a/src/app/showcase/doc/orderlist/basicdoc.ts b/src/app/showcase/doc/orderlist/basicdoc.ts
index 3ff0b83bb18..7f3e8506d1d 100644
--- a/src/app/showcase/doc/orderlist/basicdoc.ts
+++ b/src/app/showcase/doc/orderlist/basicdoc.ts
@@ -53,8 +53,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
+        basic: `<p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
     <ng-template let-product pTemplate="item">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
             <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
diff --git a/src/app/showcase/doc/orderlist/dragdropdoc.ts b/src/app/showcase/doc/orderlist/dragdropdoc.ts
index f878179a857..706b4336cc2 100644
--- a/src/app/showcase/doc/orderlist/dragdropdoc.ts
+++ b/src/app/showcase/doc/orderlist/dragdropdoc.ts
@@ -53,8 +53,7 @@ export class DragDropDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
+        basic: `<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
     <ng-template let-product pTemplate="item">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
             <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
diff --git a/src/app/showcase/doc/orderlist/filterdoc.ts b/src/app/showcase/doc/orderlist/filterdoc.ts
index b44db2565c7..8bf85352089 100644
--- a/src/app/showcase/doc/orderlist/filterdoc.ts
+++ b/src/app/showcase/doc/orderlist/filterdoc.ts
@@ -53,8 +53,7 @@ export class FilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
+        basic: `<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
     <ng-template let-product pTemplate="item">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
             <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
diff --git a/src/app/showcase/doc/organizationchart/basicdoc.ts b/src/app/showcase/doc/organizationchart/basicdoc.ts
index 7930ac57df3..79d1c0c4496 100644
--- a/src/app/showcase/doc/organizationchart/basicdoc.ts
+++ b/src/app/showcase/doc/organizationchart/basicdoc.ts
@@ -49,8 +49,7 @@ export class BasicDoc {
     ];
 
     code: Code = {
-        basic: `
-<p-organizationChart [value]="data"></p-organizationChart>`,
+        basic: `<p-organizationChart [value]="data"></p-organizationChart>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/organizationchart/colored.doc.ts b/src/app/showcase/doc/organizationchart/colored.doc.ts
index f3601d8bedc..9bd08918872 100644
--- a/src/app/showcase/doc/organizationchart/colored.doc.ts
+++ b/src/app/showcase/doc/organizationchart/colored.doc.ts
@@ -81,8 +81,7 @@ export class ColoredDoc {
     ];
 
     code: Code = {
-        basic: `
-<p-organizationChart [value]="data">
+        basic: `<p-organizationChart [value]="data">
     <ng-template let-node pTemplate="person">
         <div class="p-2 text-center">
             <img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
diff --git a/src/app/showcase/doc/organizationchart/selectiondoc.ts b/src/app/showcase/doc/organizationchart/selectiondoc.ts
index 6fc1a35122f..fec6976dbe7 100644
--- a/src/app/showcase/doc/organizationchart/selectiondoc.ts
+++ b/src/app/showcase/doc/organizationchart/selectiondoc.ts
@@ -76,8 +76,7 @@ export class SelectionDoc {
     ];
 
     code: Code = {
-        basic: `
-<p-organizationChart [value]="data" selectionMode="multiple" [(selection)]="selectedNodes">
+        basic: `<p-organizationChart [value]="data" selectionMode="multiple" [(selection)]="selectedNodes">
     <ng-template let-node pTemplate="person">
         <div class="p-2 text-center">
             <img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
diff --git a/src/app/showcase/doc/organizationchart/templatedoc.ts b/src/app/showcase/doc/organizationchart/templatedoc.ts
index 02989992fa5..b971aae4c85 100644
--- a/src/app/showcase/doc/organizationchart/templatedoc.ts
+++ b/src/app/showcase/doc/organizationchart/templatedoc.ts
@@ -64,8 +64,7 @@ export class TemplateDoc {
     ];
 
     code: Code = {
-        basic: `
-<p-organizationChart [value]="data">
+        basic: `<p-organizationChart [value]="data">
     <ng-template let-node pTemplate="default">
         <div class="p-2 text-center">
             <img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" />
diff --git a/src/app/showcase/doc/overlay/basicdoc.ts b/src/app/showcase/doc/overlay/basicdoc.ts
index 56d9144dd3e..92cd59dd793 100644
--- a/src/app/showcase/doc/overlay/basicdoc.ts
+++ b/src/app/showcase/doc/overlay/basicdoc.ts
@@ -20,8 +20,7 @@ export class OverlayBasicDemo {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="toggle()" label="Show Overlay"></p-button>
+        basic: `<p-button (click)="toggle()" label="Show Overlay"></p-button>
 <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
     Content
 </p-overlay>`,
diff --git a/src/app/showcase/doc/overlay/modedoc.ts b/src/app/showcase/doc/overlay/modedoc.ts
index fd3fbb12eb2..de3887b1a60 100644
--- a/src/app/showcase/doc/overlay/modedoc.ts
+++ b/src/app/showcase/doc/overlay/modedoc.ts
@@ -33,8 +33,7 @@ export class AppComponent implements OnInit {
     };
 
     code2: Code = {
-        basic: `
-import { PrimeNGConfig, OverlayOptions, ResponsiveOverlayDirectionType } from 'primeng/api';
+        basic: `import { PrimeNGConfig, OverlayOptions, ResponsiveOverlayDirectionType } from 'primeng/api';
 
 const responsiveOptions: ResponsiveOverlayOptions = {
     // style?: any;                                     // Style of component in given breakpoint or media query
diff --git a/src/app/showcase/doc/overlay/responsivedoc.ts b/src/app/showcase/doc/overlay/responsivedoc.ts
index 8ad7ffe5baa..ff1a66b1c3e 100644
--- a/src/app/showcase/doc/overlay/responsivedoc.ts
+++ b/src/app/showcase/doc/overlay/responsivedoc.ts
@@ -36,8 +36,7 @@ export class ResponsiveDoc {
     @ViewChild('docsectiontext', { static: true }) docsectiontext: AppDocSectionTextComponent;
 
     code: Code = {
-        basic: `
-import { PrimeNGConfig, OverlayOptions, ResponsiveOverlayDirectionType } from 'primeng/api';
+        basic: `import { PrimeNGConfig, OverlayOptions, ResponsiveOverlayDirectionType } from 'primeng/api';
 
 const responsiveOptions: ResponsiveOverlayOptions = {
     // style?: any;                                     // Style of component in given breakpoint or media query
diff --git a/src/app/showcase/doc/overlay/targetdoc.ts b/src/app/showcase/doc/overlay/targetdoc.ts
index 4bf22c6e83d..0ce4ff784de 100644
--- a/src/app/showcase/doc/overlay/targetdoc.ts
+++ b/src/app/showcase/doc/overlay/targetdoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class TargetDoc {
     code: Code = {
-        basic: `
-import { PrimeNGConfig, OverlayOptions } from 'primeng/api';
+        basic: `import { PrimeNGConfig, OverlayOptions } from 'primeng/api';
 
 this.primengConfig.overlayOptions: OverlayOptions = {
     appendTo: 'body'
diff --git a/src/app/showcase/doc/overlay/templatedoc.ts b/src/app/showcase/doc/overlay/templatedoc.ts
index 31efda6cfce..cfbdc03ffac 100644
--- a/src/app/showcase/doc/overlay/templatedoc.ts
+++ b/src/app/showcase/doc/overlay/templatedoc.ts
@@ -22,8 +22,7 @@ export class OverlayTemplateDemo {
     }
 
     code: Code = {
-        basic: `
-<p-button (click)="toggle()" label="Show Overlay"></p-button>
+        basic: `<p-button (click)="toggle()" label="Show Overlay"></p-button>
 <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
     <ng-template pTemplate="content" let-option>
         Content - {{option.mode}}
diff --git a/src/app/showcase/doc/overlaypanel/basicdoc.ts b/src/app/showcase/doc/overlaypanel/basicdoc.ts
index 1f3044b537c..a35eccfec84 100644
--- a/src/app/showcase/doc/overlaypanel/basicdoc.ts
+++ b/src/app/showcase/doc/overlaypanel/basicdoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-overlayPanel #op>
+        basic: `<p-overlayPanel #op>
     <img src="https://primefaces.org/cdn/primeng/images/demo/product/bamboo-watch.jpg" alt="product" />
 </p-overlayPanel>
 <p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>`,
diff --git a/src/app/showcase/doc/overlaypanel/datatabledoc.ts b/src/app/showcase/doc/overlaypanel/datatabledoc.ts
index 9e80a6ec2af..3958bb4fcab 100644
--- a/src/app/showcase/doc/overlaypanel/datatabledoc.ts
+++ b/src/app/showcase/doc/overlaypanel/datatabledoc.ts
@@ -76,8 +76,7 @@ export class DataTableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-button (click)="op.toggle($event)" icon="pi pi-search" label="Search"></p-button>
 <div *ngIf="selectedProduct" class="p-5 surface-card shadow-2 border-round">
     <div class="relative">
diff --git a/src/app/showcase/doc/overlaypanel/targetdoc.ts b/src/app/showcase/doc/overlaypanel/targetdoc.ts
index 71dfd310c97..f883eecdd14 100644
--- a/src/app/showcase/doc/overlaypanel/targetdoc.ts
+++ b/src/app/showcase/doc/overlaypanel/targetdoc.ts
@@ -24,8 +24,7 @@ import { Code } from '../../domain/code';
 })
 export class TargetDoc {
     code: Code = {
-        basic: `
-<p-button (click)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
+        basic: `<p-button (click)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
 <div #targetEl class="mt-5 w-10rem h-5rem border-1 surface-border border-round flex align-items-center justify-content-center">
     <span>Target Element</span>
 </div>
diff --git a/src/app/showcase/doc/overlaypanel/templatedoc.ts b/src/app/showcase/doc/overlaypanel/templatedoc.ts
index 3f9a3d6bf14..a0f34262625 100644
--- a/src/app/showcase/doc/overlaypanel/templatedoc.ts
+++ b/src/app/showcase/doc/overlaypanel/templatedoc.ts
@@ -20,8 +20,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-overlayPanel #op>
+        basic: `<p-overlayPanel #op>
     <ng-template pTemplate="content">
         <h4>Custom Content</h4>
     </ng-template>
diff --git a/src/app/showcase/doc/paginator/basicdoc.ts b/src/app/showcase/doc/paginator/basicdoc.ts
index 3090d8f0b90..e14a99f3569 100644
--- a/src/app/showcase/doc/paginator/basicdoc.ts
+++ b/src/app/showcase/doc/paginator/basicdoc.ts
@@ -34,8 +34,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]"></p-paginator>`,
+        basic: `<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]"></p-paginator>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/paginator/imagesdoc.ts b/src/app/showcase/doc/paginator/imagesdoc.ts
index ac67006048b..f978fddc71b 100644
--- a/src/app/showcase/doc/paginator/imagesdoc.ts
+++ b/src/app/showcase/doc/paginator/imagesdoc.ts
@@ -32,8 +32,7 @@ export class ImagesDoc {
     }
 
     code: Code = {
-        basic: `
-<p-paginator [first]="first" [rows]="1" [totalRecords]="120" (onPageChange)="onPageChange($event)" [showJumpToPageDropdown]="true" [showPageLinks]="false"></p-paginator>
+        basic: `<p-paginator [first]="first" [rows]="1" [totalRecords]="120" (onPageChange)="onPageChange($event)" [showJumpToPageDropdown]="true" [showPageLinks]="false"></p-paginator>
 <img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature{{ first + 1 }}.jpg" class="max-w-full"/>`,
 
         html: `
diff --git a/src/app/showcase/doc/paginator/localedoc.ts b/src/app/showcase/doc/paginator/localedoc.ts
index fc70d016860..ca961ba1f8a 100644
--- a/src/app/showcase/doc/paginator/localedoc.ts
+++ b/src/app/showcase/doc/paginator/localedoc.ts
@@ -42,8 +42,7 @@ export class LocaleDoc {
     }
 
     code: Code = {
-        basic: `
-<div class="flex-auto">
+        basic: `<div class="flex-auto">
     <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]"></p-paginator>
 </div>
 <div class="flex-auto">
diff --git a/src/app/showcase/doc/paginator/templatedoc.ts b/src/app/showcase/doc/paginator/templatedoc.ts
index 8c49b929703..d61fa8c8322 100644
--- a/src/app/showcase/doc/paginator/templatedoc.ts
+++ b/src/app/showcase/doc/paginator/templatedoc.ts
@@ -99,8 +99,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<div class="flex align-items-center justify-content-center">
+        basic: `<div class="flex align-items-center justify-content-center">
     <div>
         <p-button icon="pi pi-star" styleClass="p-button-outlined"></p-button>
     </div>
diff --git a/src/app/showcase/doc/panel/basicdoc.ts b/src/app/showcase/doc/panel/basicdoc.ts
index 8bbb04fee0f..4e13b915ee1 100644
--- a/src/app/showcase/doc/panel/basicdoc.ts
+++ b/src/app/showcase/doc/panel/basicdoc.ts
@@ -20,8 +20,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-panel header="Header">
+        basic: `<p-panel header="Header">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/app/showcase/doc/panel/templatedoc.ts b/src/app/showcase/doc/panel/templatedoc.ts
index 0d181e7975b..35a65932377 100644
--- a/src/app/showcase/doc/panel/templatedoc.ts
+++ b/src/app/showcase/doc/panel/templatedoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-panel>
+        basic: `<p-panel>
     <ng-template pTemplate="header"> <span class="text-primary font-semibold text-xl">Header</span></ng-template>
     Body Content
     <ng-template pTemplate="footer"> Footer content here </ng-template>
diff --git a/src/app/showcase/doc/panel/toggleabledoc.ts b/src/app/showcase/doc/panel/toggleabledoc.ts
index 112cf47e4ea..c1b206e2217 100644
--- a/src/app/showcase/doc/panel/toggleabledoc.ts
+++ b/src/app/showcase/doc/panel/toggleabledoc.ts
@@ -23,8 +23,7 @@ import { Code } from '../../domain/code';
 })
 export class ToggleableDoc {
     code: Code = {
-        basic: `
-<p-panel header="Header" [toggleable]="true">
+        basic: `<p-panel header="Header" [toggleable]="true">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/app/showcase/doc/panelmenu/basicdoc.ts b/src/app/showcase/doc/panelmenu/basicdoc.ts
index eef4f845bc2..5a069862ac9 100644
--- a/src/app/showcase/doc/panelmenu/basicdoc.ts
+++ b/src/app/showcase/doc/panelmenu/basicdoc.ts
@@ -141,8 +141,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>`,
+        basic: `<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/panelmenu/multipledoc.ts b/src/app/showcase/doc/panelmenu/multipledoc.ts
index 3af01e104df..21bd184120b 100644
--- a/src/app/showcase/doc/panelmenu/multipledoc.ts
+++ b/src/app/showcase/doc/panelmenu/multipledoc.ts
@@ -137,8 +137,7 @@ export class MultipleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-panelMenu [model]="items" [style]="{'width':'300px'}" [multiple]="true"></p-panelMenu>`,
+        basic: `<p-panelMenu [model]="items" [style]="{'width':'300px'}" [multiple]="true"></p-panelMenu>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/password/basicdoc.ts b/src/app/showcase/doc/password/basicdoc.ts
index dd22d223fee..f8d8c25c1ba 100644
--- a/src/app/showcase/doc/password/basicdoc.ts
+++ b/src/app/showcase/doc/password/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-password [(ngModel)]="value" [feedback]="false"></p-password>`,
+        basic: `<p-password [(ngModel)]="value" [feedback]="false"></p-password>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/password/disableddoc.ts b/src/app/showcase/doc/password/disableddoc.ts
index 25af44f4610..216471e1405 100644
--- a/src/app/showcase/doc/password/disableddoc.ts
+++ b/src/app/showcase/doc/password/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-password [(ngModel)]="value" [disabled]="true"></p-password>`,
+        basic: `<p-password [(ngModel)]="value" [disabled]="true"></p-password>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/password/floatlabeldoc.ts b/src/app/showcase/doc/password/floatlabeldoc.ts
index c197f48c9b4..294b8f22538 100644
--- a/src/app/showcase/doc/password/floatlabeldoc.ts
+++ b/src/app/showcase/doc/password/floatlabeldoc.ts
@@ -20,8 +20,7 @@ export class FloatLabelDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<span class="p-float-label">
+        basic: `<span class="p-float-label">
     <p-password [(ngModel)]="value" [feedback]="false"></p-password>
     <label for="password">Password</label>
 </span>`,
diff --git a/src/app/showcase/doc/password/invaliddoc.ts b/src/app/showcase/doc/password/invaliddoc.ts
index 3e9c09aea3d..eab388ef6d3 100644
--- a/src/app/showcase/doc/password/invaliddoc.ts
+++ b/src/app/showcase/doc/password/invaliddoc.ts
@@ -17,8 +17,7 @@ export class InvalidDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-password [(ngModel)]="value" class="ng-invalid ng-dirty"></p-password>`,
+        basic: `<p-password [(ngModel)]="value" class="ng-invalid ng-dirty"></p-password>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/password/meterdoc.ts b/src/app/showcase/doc/password/meterdoc.ts
index 86add25adff..4caebb41e14 100644
--- a/src/app/showcase/doc/password/meterdoc.ts
+++ b/src/app/showcase/doc/password/meterdoc.ts
@@ -17,8 +17,7 @@ export class MeterDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-password [(ngModel)]="value"></p-password>`,
+        basic: `<p-password [(ngModel)]="value"></p-password>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/password/reactiveformsdoc.ts b/src/app/showcase/doc/password/reactiveformsdoc.ts
index df21e90f03f..b14fca424b4 100644
--- a/src/app/showcase/doc/password/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/password/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-password formControlName="value" [feedback]="false"></p-password>
 </form>`,
 
diff --git a/src/app/showcase/doc/password/templatedoc.ts b/src/app/showcase/doc/password/templatedoc.ts
index 0fe162e7216..f64ee8aacef 100644
--- a/src/app/showcase/doc/password/templatedoc.ts
+++ b/src/app/showcase/doc/password/templatedoc.ts
@@ -31,8 +31,7 @@ export class TemplateDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-password [(ngModel)]="value">
+        basic: `<p-password [(ngModel)]="value">
     <ng-template pTemplate="header">
         <h6>Pick a password</h6>
     </ng-template>
diff --git a/src/app/showcase/doc/password/togglemaskdoc.ts b/src/app/showcase/doc/password/togglemaskdoc.ts
index 3675a8d3c91..19f86a0b7d3 100644
--- a/src/app/showcase/doc/password/togglemaskdoc.ts
+++ b/src/app/showcase/doc/password/togglemaskdoc.ts
@@ -17,8 +17,7 @@ export class ToggleMaskDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-password [(ngModel)]="value" [toggleMask]="true"></p-password>`,
+        basic: `<p-password [(ngModel)]="value" [toggleMask]="true"></p-password>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/picklist/basicdoc.ts b/src/app/showcase/doc/picklist/basicdoc.ts
index 7ba1e8c41a7..c7a3bdcccb9 100644
--- a/src/app/showcase/doc/picklist/basicdoc.ts
+++ b/src/app/showcase/doc/picklist/basicdoc.ts
@@ -55,8 +55,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" 
+        basic: `<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" 
     [sourceStyle]="{ height: '30rem' }" [targetStyle]="{ height: '30rem' }" breakpoint="1400px">
     <ng-template let-product pTemplate="item">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
diff --git a/src/app/showcase/doc/picklist/filterdoc.ts b/src/app/showcase/doc/picklist/filterdoc.ts
index abc0257b857..a317eb0dbcb 100644
--- a/src/app/showcase/doc/picklist/filterdoc.ts
+++ b/src/app/showcase/doc/picklist/filterdoc.ts
@@ -58,8 +58,7 @@ export class FilterDoc {
     }
 
     code: Code = {
-        basic: `
-<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" [sourceStyle]="{ height: '30rem' }"
+        basic: `<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" [sourceStyle]="{ height: '30rem' }"
     [targetStyle]="{ height: '30rem' }" filterBy="name" sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" breakpoint="1400px">
     <ng-template let-product pTemplate="item">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
diff --git a/src/app/showcase/doc/progressbar/basicdoc.ts b/src/app/showcase/doc/progressbar/basicdoc.ts
index ebc7299c1f4..0f36a078e0c 100644
--- a/src/app/showcase/doc/progressbar/basicdoc.ts
+++ b/src/app/showcase/doc/progressbar/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-progressBar [value]="50"></p-progressBar>`,
+        basic: `<p-progressBar [value]="50"></p-progressBar>`,
         html: `
 <div class="card">
     <p-progressBar [value]="50"></p-progressBar>
diff --git a/src/app/showcase/doc/progressbar/dynamicdoc.ts b/src/app/showcase/doc/progressbar/dynamicdoc.ts
index ffb0ed712d5..27baac5acc1 100644
--- a/src/app/showcase/doc/progressbar/dynamicdoc.ts
+++ b/src/app/showcase/doc/progressbar/dynamicdoc.ts
@@ -33,8 +33,7 @@ export class DynamicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-progressBar [value]="value"></p-progressBar>`,
+        basic: `<p-progressBar [value]="value"></p-progressBar>`,
         html: `
 <div class="card">
     <p-toast></p-toast>
diff --git a/src/app/showcase/doc/progressbar/indeterminatedoc.ts b/src/app/showcase/doc/progressbar/indeterminatedoc.ts
index b66dd9656ad..3434dd88cf9 100644
--- a/src/app/showcase/doc/progressbar/indeterminatedoc.ts
+++ b/src/app/showcase/doc/progressbar/indeterminatedoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class IndeterminateDoc {
     code: Code = {
-        basic: `
-<p-progressBar mode="indeterminate" [style]="{ height: '6px' }"></p-progressBar>`,
+        basic: `<p-progressBar mode="indeterminate" [style]="{ height: '6px' }"></p-progressBar>`,
         html: `
 <div class="card">
     <p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>
diff --git a/src/app/showcase/doc/progressspinner/basicdoc.ts b/src/app/showcase/doc/progressspinner/basicdoc.ts
index 5990429a18f..3a82fcc138b 100644
--- a/src/app/showcase/doc/progressspinner/basicdoc.ts
+++ b/src/app/showcase/doc/progressspinner/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-progressSpinner></p-progressSpinner>`,
+        basic: `<p-progressSpinner></p-progressSpinner>`,
         html: `
 <div class="card">
     <p-progressSpinner></p-progressSpinner>
diff --git a/src/app/showcase/doc/progressspinner/templatedoc.ts b/src/app/showcase/doc/progressspinner/templatedoc.ts
index d61f67a8ae9..5e3c6594a63 100644
--- a/src/app/showcase/doc/progressspinner/templatedoc.ts
+++ b/src/app/showcase/doc/progressspinner/templatedoc.ts
@@ -19,8 +19,7 @@ export class TemplateDoc {
     @Input() title: string;
 
     code: Code = {
-        basic: `
-<p-progressSpinner styleClass="w-4rem h-4rem" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"></p-progressSpinner>`,
+        basic: `<p-progressSpinner styleClass="w-4rem h-4rem" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"></p-progressSpinner>`,
         html: `
 <div class="card">
     <p-progressSpinner styleClass="w-4rem h-4rem" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"></p-progressSpinner>
diff --git a/src/app/showcase/doc/radiobutton/disableddoc.ts b/src/app/showcase/doc/radiobutton/disableddoc.ts
index ba3aceba7dc..a7f3906040f 100644
--- a/src/app/showcase/doc/radiobutton/disableddoc.ts
+++ b/src/app/showcase/doc/radiobutton/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     checked: any;
 
     code: Code = {
-        basic: `
-<p-radioButton [disabled]="true"></p-radioButton>`,
+        basic: `<p-radioButton [disabled]="true"></p-radioButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/radiobutton/dynamicdoc.ts b/src/app/showcase/doc/radiobutton/dynamicdoc.ts
index 2e65f8d095a..880adb12957 100644
--- a/src/app/showcase/doc/radiobutton/dynamicdoc.ts
+++ b/src/app/showcase/doc/radiobutton/dynamicdoc.ts
@@ -33,8 +33,7 @@ export class DynamicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="flex flex-column gap-3">
+        basic: `<div class="flex flex-column gap-3">
     <div *ngFor="let category of categories" class="field-checkbox">
         <p-radioButton [inputId]="category.key" name="category" [value]="category" [(ngModel)]="selectedCategory"></p-radioButton>
         <label [for]="category.key" class="ml-2">{{ category.name }}</label>
diff --git a/src/app/showcase/doc/radiobutton/groupdoc.ts b/src/app/showcase/doc/radiobutton/groupdoc.ts
index ef48e019612..4c28cca4adf 100644
--- a/src/app/showcase/doc/radiobutton/groupdoc.ts
+++ b/src/app/showcase/doc/radiobutton/groupdoc.ts
@@ -36,8 +36,7 @@ export class GroupDoc {
     ingredient!: string;
 
     code: Code = {
-        basic: `
-<div class="flex flex-wrap gap-3">
+        basic: `<div class="flex flex-wrap gap-3">
     <div class="flex align-items-center">
         <p-radioButton name="pizza" value="Cheese" [(ngModel)]="ingredient" inputId="ingredient1"></p-radioButton>
         <label for="ingredient1" class="ml-2">Cheese</label>
diff --git a/src/app/showcase/doc/radiobutton/invaliddoc.ts b/src/app/showcase/doc/radiobutton/invaliddoc.ts
index e289d8093c2..94e0da9ca5a 100644
--- a/src/app/showcase/doc/radiobutton/invaliddoc.ts
+++ b/src/app/showcase/doc/radiobutton/invaliddoc.ts
@@ -17,8 +17,7 @@ export class InvalidDoc {
     checked: any;
 
     code: Code = {
-        basic: `
-<p-radioButton class="ng-invalid ng-dirty"></p-radioButton>`,
+        basic: `<p-radioButton class="ng-invalid ng-dirty"></p-radioButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts b/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts
index 946a0f9352e..0f552103e1d 100644
--- a/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts
@@ -36,8 +36,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form class="flex flex-column gap-3" [formGroup]="formGroup">
+        basic: `<form class="flex flex-column gap-3" [formGroup]="formGroup">
     <div *ngFor="let category of categories" class="field-checkbox">
         <p-radioButton [inputId]="category.key" [value]="category" formControlName="selectedCategory"></p-radioButton>
         <label [for]="category.key" class="ml-2">{{ category.name }}</label>
diff --git a/src/app/showcase/doc/rating/basicdoc.ts b/src/app/showcase/doc/rating/basicdoc.ts
index 3c6a952d4aa..a673ebf959e 100644
--- a/src/app/showcase/doc/rating/basicdoc.ts
+++ b/src/app/showcase/doc/rating/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-rating [(ngModel)]="value"></p-rating>`,
+        basic: `<p-rating [(ngModel)]="value"></p-rating>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/rating/disableddoc.ts b/src/app/showcase/doc/rating/disableddoc.ts
index 39e97335087..7c812c02799 100644
--- a/src/app/showcase/doc/rating/disableddoc.ts
+++ b/src/app/showcase/doc/rating/disableddoc.ts
@@ -17,8 +17,7 @@ export class DisabledDoc {
     value: number = 5;
 
     code: Code = {
-        basic: `
-<p-rating [(ngModel)]="value" [disabled]="true" [cancel]="false"></p-rating>`,
+        basic: `<p-rating [(ngModel)]="value" [disabled]="true" [cancel]="false"></p-rating>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/rating/numberofstarsdoc.ts b/src/app/showcase/doc/rating/numberofstarsdoc.ts
index cddb0b1e76c..8135b6cf1f3 100644
--- a/src/app/showcase/doc/rating/numberofstarsdoc.ts
+++ b/src/app/showcase/doc/rating/numberofstarsdoc.ts
@@ -17,8 +17,7 @@ export class NumberOfStarsDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-rating [(ngModel)]="value" [stars]="10"></p-rating>`,
+        basic: `<p-rating [(ngModel)]="value" [stars]="10"></p-rating>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/rating/reactiveformsdoc.ts b/src/app/showcase/doc/rating/reactiveformsdoc.ts
index 78e9ef912a9..084978e6621 100644
--- a/src/app/showcase/doc/rating/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/rating/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-rating formControlName="value"></p-rating>
 </form>`,
 
diff --git a/src/app/showcase/doc/rating/readonlydoc.ts b/src/app/showcase/doc/rating/readonlydoc.ts
index d3cc24a47d1..6a6bb6375a4 100644
--- a/src/app/showcase/doc/rating/readonlydoc.ts
+++ b/src/app/showcase/doc/rating/readonlydoc.ts
@@ -17,8 +17,7 @@ export class ReadOnlyDoc {
     value: number = 5;
 
     code: Code = {
-        basic: `
-<p-rating [(ngModel)]="value" [readonly]="true" [cancel]="false"></p-rating>`,
+        basic: `<p-rating [(ngModel)]="value" [readonly]="true" [cancel]="false"></p-rating>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/rating/templatedoc.ts b/src/app/showcase/doc/rating/templatedoc.ts
index 99177b36caf..ba0f585e9dd 100644
--- a/src/app/showcase/doc/rating/templatedoc.ts
+++ b/src/app/showcase/doc/rating/templatedoc.ts
@@ -27,8 +27,7 @@ export class TemplateDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-rating [(ngModel)]="value" stars="5">
+        basic: `<p-rating [(ngModel)]="value" stars="5">
     <ng-template pTemplate="cancel">
         <img src="https://primefaces.org/cdn/primeng/images/demo/rating/cancel.png" width="25px" height="25px" />
     </ng-template>
diff --git a/src/app/showcase/doc/rating/withoutcanceldoc.ts b/src/app/showcase/doc/rating/withoutcanceldoc.ts
index e6856d906ef..726f790b266 100644
--- a/src/app/showcase/doc/rating/withoutcanceldoc.ts
+++ b/src/app/showcase/doc/rating/withoutcanceldoc.ts
@@ -17,8 +17,7 @@ export class WithoutCancelDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-rating [(ngModel)]="value" [cancel]="false"></p-rating>`,
+        basic: `<p-rating [(ngModel)]="value" [cancel]="false"></p-rating>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/ripple/customdoc.ts b/src/app/showcase/doc/ripple/customdoc.ts
index 970ac27fd6f..0d25c74e4ef 100644
--- a/src/app/showcase/doc/ripple/customdoc.ts
+++ b/src/app/showcase/doc/ripple/customdoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class CustomDoc {
     code: Code = {
-        basic: `
-<div pRipple class="card styled-box-green shadow-2">Green</div>`,
+        basic: `<div pRipple class="card styled-box-green shadow-2">Green</div>`,
         html: `
 <div class="card card-container flex justify-content-center align-items-center">
     <div pRipple class="card styled-box-green shadow-2">Green</div>
diff --git a/src/app/showcase/doc/ripple/defaultdoc.ts b/src/app/showcase/doc/ripple/defaultdoc.ts
index ae8ca54734e..955a30fd357 100644
--- a/src/app/showcase/doc/ripple/defaultdoc.ts
+++ b/src/app/showcase/doc/ripple/defaultdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class DefaultDoc {
     code: Code = {
-        basic: `
-<div pRipple class="card text-primary bg-primary flex select-none justify-content-center align-items-center shadow-2">Default</div>`,
+        basic: `<div pRipple class="card text-primary bg-primary flex select-none justify-content-center align-items-center shadow-2">Default</div>`,
         html: `
 <div class="card card-container flex justify-content-center align-items-center">
     <div pRipple class="card text-primary bg-primary flex select-none justify-content-center align-items-center shadow-2">Default</div>
diff --git a/src/app/showcase/doc/scroller/basicdoc.ts b/src/app/showcase/doc/scroller/basicdoc.ts
index 8936307d197..e36617919ff 100644
--- a/src/app/showcase/doc/scroller/basicdoc.ts
+++ b/src/app/showcase/doc/scroller/basicdoc.ts
@@ -29,8 +29,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-scroller [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
     </ng-template>
diff --git a/src/app/showcase/doc/scroller/delaydoc.ts b/src/app/showcase/doc/scroller/delaydoc.ts
index 8ee8332d1b1..9136794238a 100644
--- a/src/app/showcase/doc/scroller/delaydoc.ts
+++ b/src/app/showcase/doc/scroller/delaydoc.ts
@@ -44,8 +44,7 @@ export class DelayDoc {
     }
 
     code: Code = {
-        basic: `
-<p-scroller [items]="items" [itemSize]="50" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller [items]="items" [itemSize]="50" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
     </ng-template>
diff --git a/src/app/showcase/doc/scroller/griddoc.ts b/src/app/showcase/doc/scroller/griddoc.ts
index 030a9c58844..8ce9d51ca65 100644
--- a/src/app/showcase/doc/scroller/griddoc.ts
+++ b/src/app/showcase/doc/scroller/griddoc.ts
@@ -31,8 +31,7 @@ export class GridDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-scroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground' : options.odd }" style="height: 50px;">
             <div *ngFor="let el of item" style="width: 100px">{{ el }}</div>
diff --git a/src/app/showcase/doc/scroller/horizontaldoc.ts b/src/app/showcase/doc/scroller/horizontaldoc.ts
index 26118283fc8..084665c18c1 100644
--- a/src/app/showcase/doc/scroller/horizontaldoc.ts
+++ b/src/app/showcase/doc/scroller/horizontaldoc.ts
@@ -26,8 +26,7 @@ export class HorizontalDoc {
     }
 
     code: Code = {
-        basic: `
-<p-scroller [items]="items" [itemSize]="50" scrollHeight="200px" orientation="horizontal" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller [items]="items" [itemSize]="50" scrollHeight="200px" orientation="horizontal" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" style="writing-mode: vertical-lr; width: 50px;" [ngClass]="{ 'surface-ground': options.odd }">{{ item }}</div>
     </ng-template>
diff --git a/src/app/showcase/doc/scroller/lazyloaddoc.ts b/src/app/showcase/doc/scroller/lazyloaddoc.ts
index 96845cdbad8..5b9acc527a2 100644
--- a/src/app/showcase/doc/scroller/lazyloaddoc.ts
+++ b/src/app/showcase/doc/scroller/lazyloaddoc.ts
@@ -62,8 +62,7 @@ export class LazyLoadDoc {
     }
 
     code: Code = {
-        basic: `
-<p-scroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" [loading]="lazyLoading" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" [loading]="lazyLoading" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
     </ng-template>
diff --git a/src/app/showcase/doc/scroller/loaderdoc.ts b/src/app/showcase/doc/scroller/loaderdoc.ts
index 4bb496fcb77..3657a380f27 100644
--- a/src/app/showcase/doc/scroller/loaderdoc.ts
+++ b/src/app/showcase/doc/scroller/loaderdoc.ts
@@ -40,8 +40,7 @@ export class LoaderDoc {
     }
 
     code: Code = {
-        basic: `
-<p-scroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground' : options.odd }" style="height: 50px;">{{ item }}</div>
     </ng-template>
diff --git a/src/app/showcase/doc/scroller/programmaticdoc.ts b/src/app/showcase/doc/scroller/programmaticdoc.ts
index 807fded93cc..284f127b0af 100644
--- a/src/app/showcase/doc/scroller/programmaticdoc.ts
+++ b/src/app/showcase/doc/scroller/programmaticdoc.ts
@@ -33,8 +33,7 @@ export class ProgrammaticDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-button label="Reset" (click)="reset()"></p-button>
+        basic: `<p-button label="Reset" (click)="reset()"></p-button>
 <p-scroller #sc [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
diff --git a/src/app/showcase/doc/scroller/templatedoc.ts b/src/app/showcase/doc/scroller/templatedoc.ts
index be133e47e51..2715575bda8 100644
--- a/src/app/showcase/doc/scroller/templatedoc.ts
+++ b/src/app/showcase/doc/scroller/templatedoc.ts
@@ -45,8 +45,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-scroller class="custom-loading" [items]="items" [itemSize]="25 * 7" [showLoader]="true" [delay]="250" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
+        basic: `<p-scroller class="custom-loading" [items]="items" [itemSize]="25 * 7" [showLoader]="true" [delay]="250" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
     <ng-template pTemplate="item" let-item let-options="options">
         <div class="flex flex-column align-items-strech" [ngClass]="{'surface-ground': options.odd}">
             <div class="flex align-items-center px-2" style="height: 25px">Item: {{item}}</div>
diff --git a/src/app/showcase/doc/scrollpanel/basicdoc.ts b/src/app/showcase/doc/scrollpanel/basicdoc.ts
index 78afa85ccd6..731ff2ac9f7 100644
--- a/src/app/showcase/doc/scrollpanel/basicdoc.ts
+++ b/src/app/showcase/doc/scrollpanel/basicdoc.ts
@@ -28,8 +28,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-scrollPanel [style]="{ width: '100%', height: '150px' }">
+        basic: `<p-scrollPanel [style]="{ width: '100%', height: '150px' }">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/app/showcase/doc/scrollpanel/customdoc.ts b/src/app/showcase/doc/scrollpanel/customdoc.ts
index 6c78f5878a6..f9740d1ac9e 100644
--- a/src/app/showcase/doc/scrollpanel/customdoc.ts
+++ b/src/app/showcase/doc/scrollpanel/customdoc.ts
@@ -50,8 +50,7 @@ import { Code } from '../../domain/code';
 })
 export class CusstomDoc {
     code: Code = {
-        basic: `
-<p-scrollPanel [style]="{ width: '100%', height: '200px' }" styleClass="custombar1">
+        basic: `<p-scrollPanel [style]="{ width: '100%', height: '200px' }" styleClass="custombar1">
     <p>
         Lorem ipsum dolor sit amet...
     </p>
diff --git a/src/app/showcase/doc/scrolltop/basicdoc.ts b/src/app/showcase/doc/scrolltop/basicdoc.ts
index bbbd57628bc..2b4ddb5e7a4 100644
--- a/src/app/showcase/doc/scrolltop/basicdoc.ts
+++ b/src/app/showcase/doc/scrolltop/basicdoc.ts
@@ -17,8 +17,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-scrollTop></p-scrollTop>`,
+        basic: `<p-scrollTop></p-scrollTop>`,
         html: `
 <div class="card flex flex-column align-items-center">
     <p>Scroll down the page to display the ScrollTo component.</p>
diff --git a/src/app/showcase/doc/scrolltop/elementdoc.ts b/src/app/showcase/doc/scrolltop/elementdoc.ts
index cda0f23a70e..ebd1d0e88f7 100644
--- a/src/app/showcase/doc/scrolltop/elementdoc.ts
+++ b/src/app/showcase/doc/scrolltop/elementdoc.ts
@@ -24,8 +24,7 @@ import { Code } from '../../domain/code';
 })
 export class ElementDoc {
     code: Code = {
-        basic: `
-<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>`,
+        basic: `<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>`,
         html: `
 <div class="card">
     <div style="width: 250px; height: 200px; overflow: auto">
diff --git a/src/app/showcase/doc/selectbutton/basicdoc.ts b/src/app/showcase/doc/selectbutton/basicdoc.ts
index 651ae7ed029..592e751f970 100644
--- a/src/app/showcase/doc/selectbutton/basicdoc.ts
+++ b/src/app/showcase/doc/selectbutton/basicdoc.ts
@@ -22,8 +22,7 @@ export class BasicDoc {
     value: string = 'off';
 
     code: Code = {
-        basic: `
-<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value"></p-selectButton>`,
+        basic: `<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value"></p-selectButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/selectbutton/disableddoc.ts b/src/app/showcase/doc/selectbutton/disableddoc.ts
index d32b1ca70a6..a55654c4f73 100644
--- a/src/app/showcase/doc/selectbutton/disableddoc.ts
+++ b/src/app/showcase/doc/selectbutton/disableddoc.ts
@@ -30,8 +30,7 @@ export class DisabledDoc {
     value2: string = 'Option 1';
 
     code: Code = {
-        basic: `
-<p-selectButton [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value" [disabled]="true"></p-selectButton>
+        basic: `<p-selectButton [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value" [disabled]="true"></p-selectButton>
 <p-selectButton [options]="stateOptions2" [(ngModel)]="value2" optionLabel="label" optionValue="value" optionDisabled="constant"></p-selectButton>`,
 
         html: `
diff --git a/src/app/showcase/doc/selectbutton/invaliddoc.ts b/src/app/showcase/doc/selectbutton/invaliddoc.ts
index 9d819019e35..1f3bc56e188 100644
--- a/src/app/showcase/doc/selectbutton/invaliddoc.ts
+++ b/src/app/showcase/doc/selectbutton/invaliddoc.ts
@@ -22,8 +22,7 @@ export class InvalidDoc {
     value: string = 'off';
 
     code: Code = {
-        basic: `
-<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value" class="ng-invalid ng-dirty"></p-selectButton>`,
+        basic: `<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value" class="ng-invalid ng-dirty"></p-selectButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/selectbutton/multipledoc.ts b/src/app/showcase/doc/selectbutton/multipledoc.ts
index 6825c5a09a2..dc2efb579fe 100644
--- a/src/app/showcase/doc/selectbutton/multipledoc.ts
+++ b/src/app/showcase/doc/selectbutton/multipledoc.ts
@@ -23,8 +23,7 @@ export class MultipleDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-selectButton [options]="paymentOptions" [(ngModel)]="value" [multiple]="true" optionLabel="name" optionValue="value"></p-selectButton>`,
+        basic: `<p-selectButton [options]="paymentOptions" [(ngModel)]="value" [multiple]="true" optionLabel="name" optionValue="value"></p-selectButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts b/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts
index f10d57f138a..3ce1895bf54 100644
--- a/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts
@@ -31,8 +31,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-selectButton [options]="stateOptions" formControlName="value" optionLabel="label" optionValue="value"></p-selectButton>
 </form>`,
 
diff --git a/src/app/showcase/doc/selectbutton/templatedoc.ts b/src/app/showcase/doc/selectbutton/templatedoc.ts
index ad29d6fcd7b..d2416802049 100644
--- a/src/app/showcase/doc/selectbutton/templatedoc.ts
+++ b/src/app/showcase/doc/selectbutton/templatedoc.ts
@@ -28,8 +28,7 @@ export class TemplateDoc {
     ];
 
     code: Code = {
-        basic: `
-<p-selectButton [options]="justifyOptions" [(ngModel)]="value" optionLabel="icon">
+        basic: `<p-selectButton [options]="justifyOptions" [(ngModel)]="value" optionLabel="icon">
     <ng-template let-item pTemplate>
         <i [class]="item.icon"></i>
     </ng-template>
diff --git a/src/app/showcase/doc/sidebar/basicdoc.ts b/src/app/showcase/doc/sidebar/basicdoc.ts
index e1d0cfe7c9d..c8ccb15d0fd 100644
--- a/src/app/showcase/doc/sidebar/basicdoc.ts
+++ b/src/app/showcase/doc/sidebar/basicdoc.ts
@@ -24,8 +24,7 @@ export class BasicDoc {
     sidebarVisible: boolean = false;
 
     code: Code = {
-        basic: `
-<p-sidebar [(visible)]="sidebarVisible">
+        basic: `<p-sidebar [(visible)]="sidebarVisible">
     <h3>Sidebar</h3>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
diff --git a/src/app/showcase/doc/sidebar/fullscreendoc.ts b/src/app/showcase/doc/sidebar/fullscreendoc.ts
index 90a5fb9ec34..7a7696b9251 100644
--- a/src/app/showcase/doc/sidebar/fullscreendoc.ts
+++ b/src/app/showcase/doc/sidebar/fullscreendoc.ts
@@ -20,8 +20,7 @@ export class FullScreenDoc {
     sidebarVisible: boolean = false;
 
     code: Code = {
-        basic: `
-<p-sidebar [(visible)]="sidebarVisible" [fullScreen]="true">
+        basic: `<p-sidebar [(visible)]="sidebarVisible" [fullScreen]="true">
     <h3>Full Screen Sidebar</h3>
 </p-sidebar>
 <p-button (click)="sidebarVisible = true" icon="pi pi-th-large"></p-button>`,
diff --git a/src/app/showcase/doc/sidebar/positiondoc.ts b/src/app/showcase/doc/sidebar/positiondoc.ts
index 18d5512a5a0..e48630d5f69 100644
--- a/src/app/showcase/doc/sidebar/positiondoc.ts
+++ b/src/app/showcase/doc/sidebar/positiondoc.ts
@@ -42,8 +42,7 @@ export class PositionDoc {
     sidebarVisible4: boolean = false;
 
     code: Code = {
-        basic: `
-<p-sidebar [(visible)]="sidebarVisible1" position="left">
+        basic: `<p-sidebar [(visible)]="sidebarVisible1" position="left">
     <h3>Left Sidebar</h3>
 </p-sidebar>
 
diff --git a/src/app/showcase/doc/sidebar/sizedoc.ts b/src/app/showcase/doc/sidebar/sizedoc.ts
index 6ef792afc22..bd17d2e2c82 100644
--- a/src/app/showcase/doc/sidebar/sizedoc.ts
+++ b/src/app/showcase/doc/sidebar/sizedoc.ts
@@ -23,8 +23,7 @@ export class SizeDoc {
     sidebarVisible: boolean = false;
 
     code: Code = {
-        basic: `
-<p-sidebar [(visible)]="sidebarVisible" styleClass="w-30rem">
+        basic: `<p-sidebar [(visible)]="sidebarVisible" styleClass="w-30rem">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/src/app/showcase/doc/sidebar/templatedoc.ts b/src/app/showcase/doc/sidebar/templatedoc.ts
index bc019d76231..f0595c64726 100644
--- a/src/app/showcase/doc/sidebar/templatedoc.ts
+++ b/src/app/showcase/doc/sidebar/templatedoc.ts
@@ -22,8 +22,7 @@ export class TemplateDoc {
     sidebarVisible: boolean = false;
 
     code: Code = {
-        basic: `
-<p-sidebar [(visible)]="sidebarVisible">
+        basic: `<p-sidebar [(visible)]="sidebarVisible">
     <ng-template pTemplate="header">Header Content</ng-template>
     <ng-template pTemplate="content">Body Content</ng-template>
     <ng-template pTemplate="footer">Footer Content</ng-template>
diff --git a/src/app/showcase/doc/skeleton/carddoc.ts b/src/app/showcase/doc/skeleton/carddoc.ts
index d85301b621d..d80a8e0f22b 100644
--- a/src/app/showcase/doc/skeleton/carddoc.ts
+++ b/src/app/showcase/doc/skeleton/carddoc.ts
@@ -29,8 +29,7 @@ import { Code } from '../../domain/code';
 })
 export class CardDoc {
     code: Code = {
-        basic: `
-<div class="border-round border-1 surface-border p-4 surface-card">
+        basic: `<div class="border-round border-1 surface-border p-4 surface-card">
     <div class="flex mb-3">
         <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
         <div>
diff --git a/src/app/showcase/doc/skeleton/datatabledoc.ts b/src/app/showcase/doc/skeleton/datatabledoc.ts
index 937e19b47a0..7dcdd3fddd6 100644
--- a/src/app/showcase/doc/skeleton/datatabledoc.ts
+++ b/src/app/showcase/doc/skeleton/datatabledoc.ts
@@ -38,8 +38,7 @@ export class DataTableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+        basic: `<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="header">
         <tr>
             <th>Code</th>
diff --git a/src/app/showcase/doc/skeleton/listdoc.ts b/src/app/showcase/doc/skeleton/listdoc.ts
index 177d48299f4..4e38dddf124 100644
--- a/src/app/showcase/doc/skeleton/listdoc.ts
+++ b/src/app/showcase/doc/skeleton/listdoc.ts
@@ -54,8 +54,7 @@ import { Code } from '../../domain/code';
 })
 export class ListDoc {
     code: Code = {
-        basic: `
-<div class="border-round border-1 surface-border p-4 surface-card">
+        basic: `<div class="border-round border-1 surface-border p-4 surface-card">
     <ul class="m-0 p-0 list-none">
         <li class="mb-3">
             <div class="flex">
diff --git a/src/app/showcase/doc/skeleton/shapesdoc.ts b/src/app/showcase/doc/skeleton/shapesdoc.ts
index e66a80b20b6..39e8aeb0abb 100644
--- a/src/app/showcase/doc/skeleton/shapesdoc.ts
+++ b/src/app/showcase/doc/skeleton/shapesdoc.ts
@@ -48,8 +48,7 @@ import { Code } from '../../domain/code';
 })
 export class ShapesDoc {
     code: Code = {
-        basic: `
-<h5>Rectangle</h5>
+        basic: `<h5>Rectangle</h5>
 <p-skeleton styleClass="mb-2"></p-skeleton>
 <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
 <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
diff --git a/src/app/showcase/doc/slider/basicdoc.ts b/src/app/showcase/doc/slider/basicdoc.ts
index 9e81704e704..1859c336a9c 100644
--- a/src/app/showcase/doc/slider/basicdoc.ts
+++ b/src/app/showcase/doc/slider/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-slider [(ngModel)]="value"></p-slider>`,
+        basic: `<p-slider [(ngModel)]="value"></p-slider>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/slider/inputdoc.ts b/src/app/showcase/doc/slider/inputdoc.ts
index 3c64c93c764..4ae7d577079 100644
--- a/src/app/showcase/doc/slider/inputdoc.ts
+++ b/src/app/showcase/doc/slider/inputdoc.ts
@@ -20,8 +20,7 @@ export class InputDoc {
     value: number = 50;
 
     code: Code = {
-        basic: `
-<div>
+        basic: `<div>
     <input type="text" pInputText [(ngModel)]="value" class="w-full"/>
     <p-slider [(ngModel)]="value" class="w-full"></p-slider>
 </div>`,
diff --git a/src/app/showcase/doc/slider/rangedoc.ts b/src/app/showcase/doc/slider/rangedoc.ts
index 00859e7a89b..c52b3e1a4f2 100644
--- a/src/app/showcase/doc/slider/rangedoc.ts
+++ b/src/app/showcase/doc/slider/rangedoc.ts
@@ -17,8 +17,7 @@ export class RangeDoc {
     rangeValues: number[] = [20, 80];
 
     code: Code = {
-        basic: `
-<p-slider [(ngModel)]="rangeValues" [range]="true"></p-slider>`,
+        basic: `<p-slider [(ngModel)]="rangeValues" [range]="true"></p-slider>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/slider/reactiveformsdoc.ts b/src/app/showcase/doc/slider/reactiveformsdoc.ts
index 47a54ee1b6b..53b6c9f25ee 100644
--- a/src/app/showcase/doc/slider/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/slider/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-slider formControlName="value"></p-slider>
 </form>`,
 
diff --git a/src/app/showcase/doc/slider/stepdoc.ts b/src/app/showcase/doc/slider/stepdoc.ts
index 445678f94d0..f17568f67d2 100644
--- a/src/app/showcase/doc/slider/stepdoc.ts
+++ b/src/app/showcase/doc/slider/stepdoc.ts
@@ -17,8 +17,7 @@ export class StepDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-slider [(ngModel)]="value" [step]="20"></p-slider>`,
+        basic: `<p-slider [(ngModel)]="value" [step]="20"></p-slider>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/slider/verticaldoc.ts b/src/app/showcase/doc/slider/verticaldoc.ts
index 56e7739514b..d346db9ba42 100644
--- a/src/app/showcase/doc/slider/verticaldoc.ts
+++ b/src/app/showcase/doc/slider/verticaldoc.ts
@@ -17,8 +17,7 @@ export class VerticalDoc {
     value!: number;
 
     code: Code = {
-        basic: `
-<p-slider [(ngModel)]="value" orientation="vertical"></p-slider>`,
+        basic: `<p-slider [(ngModel)]="value" orientation="vertical"></p-slider>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/speeddial/circledoc.ts b/src/app/showcase/doc/speeddial/circledoc.ts
index c124495603a..298de7a12f4 100644
--- a/src/app/showcase/doc/speeddial/circledoc.ts
+++ b/src/app/showcase/doc/speeddial/circledoc.ts
@@ -56,8 +56,7 @@ export class CircleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="items" type="circle" [radius]="80" buttonClassName="p-button-warning"></p-speedDial>`,
+        basic: `<p-speedDial [model]="items" type="circle" [radius]="80" buttonClassName="p-button-warning"></p-speedDial>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/speeddial/customdoc.ts b/src/app/showcase/doc/speeddial/customdoc.ts
index 185cf529918..7ca35e6b50d 100644
--- a/src/app/showcase/doc/speeddial/customdoc.ts
+++ b/src/app/showcase/doc/speeddial/customdoc.ts
@@ -56,8 +56,7 @@ export class CustomDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="items" direction="up" transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined"></p-speedDial>`,
+        basic: `<p-speedDial [model]="items" direction="up" transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined"></p-speedDial>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/speeddial/lineardoc.ts b/src/app/showcase/doc/speeddial/lineardoc.ts
index 6b03e02be90..517ee2373e6 100644
--- a/src/app/showcase/doc/speeddial/lineardoc.ts
+++ b/src/app/showcase/doc/speeddial/lineardoc.ts
@@ -59,8 +59,7 @@ export class LinearDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="items" direction="up"></p-speedDial>
+        basic: `<p-speedDial [model]="items" direction="up"></p-speedDial>
 <p-speedDial [model]="items" direction="down"></p-speedDial>
 <p-speedDial [model]="items" direction="left"></p-speedDial>
 <p-speedDial [model]="items" direction="right"></p-speedDial>`,
diff --git a/src/app/showcase/doc/speeddial/maskdoc.ts b/src/app/showcase/doc/speeddial/maskdoc.ts
index 18acf8c1757..8423b57a48a 100644
--- a/src/app/showcase/doc/speeddial/maskdoc.ts
+++ b/src/app/showcase/doc/speeddial/maskdoc.ts
@@ -56,8 +56,7 @@ export class MaskDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="items" direction="up" [mask]="true"></p-speedDial>`,
+        basic: `<p-speedDial [model]="items" direction="up" [mask]="true"></p-speedDial>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/speeddial/quartercircledoc.ts b/src/app/showcase/doc/speeddial/quartercircledoc.ts
index 40551f63a16..198ecd55b20 100644
--- a/src/app/showcase/doc/speeddial/quartercircledoc.ts
+++ b/src/app/showcase/doc/speeddial/quartercircledoc.ts
@@ -59,8 +59,7 @@ export class QuarterCircleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="items" radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
+        basic: `<p-speedDial [model]="items" radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
 <p-speedDial [model]="items" radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
 <p-speedDial [model]="items" radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>
 <p-speedDial [model]="items" radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success"></p-speedDial>`,
diff --git a/src/app/showcase/doc/speeddial/semicircledoc.ts b/src/app/showcase/doc/speeddial/semicircledoc.ts
index 8bebdfc119f..b9fcde6158a 100644
--- a/src/app/showcase/doc/speeddial/semicircledoc.ts
+++ b/src/app/showcase/doc/speeddial/semicircledoc.ts
@@ -59,8 +59,7 @@ export class SemiCircleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="items" direction="up" [radius]="80" type="semi-circle"></p-speedDial>
+        basic: `<p-speedDial [model]="items" direction="up" [radius]="80" type="semi-circle"></p-speedDial>
 <p-speedDial [model]="items" direction="down" [radius]="80" type="semi-circle"></p-speedDial>
 <p-speedDial [model]="items" direction="left" [radius]="80" type="semi-circle"></p-speedDial>
 <p-speedDial [model]="items" direction="right" [radius]="80" type="semi-circle"></p-speedDial>`,
diff --git a/src/app/showcase/doc/speeddial/tooltipdoc.ts b/src/app/showcase/doc/speeddial/tooltipdoc.ts
index 0c3cbfb4e32..6d252ff133d 100644
--- a/src/app/showcase/doc/speeddial/tooltipdoc.ts
+++ b/src/app/showcase/doc/speeddial/tooltipdoc.ts
@@ -122,8 +122,7 @@ export class TooltipDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-speedDial [model]="leftTooltipItems" className="speeddial-right" direction="up"></p-speedDial>
+        basic: `<p-speedDial [model]="leftTooltipItems" className="speeddial-right" direction="up"></p-speedDial>
 <p-speedDial [model]="tooltipItems" className="speeddial-left" direction="up"></p-speedDial>`,
 
         html: `
diff --git a/src/app/showcase/doc/splitbutton/basicdoc.ts b/src/app/showcase/doc/splitbutton/basicdoc.ts
index 529dd4d1dcc..5989551c522 100644
--- a/src/app/showcase/doc/splitbutton/basicdoc.ts
+++ b/src/app/showcase/doc/splitbutton/basicdoc.ts
@@ -54,8 +54,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>`,
+        basic: `<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/splitbutton/disableddoc.ts b/src/app/showcase/doc/splitbutton/disableddoc.ts
index e47f982ad5e..0dc842f5a64 100644
--- a/src/app/showcase/doc/splitbutton/disableddoc.ts
+++ b/src/app/showcase/doc/splitbutton/disableddoc.ts
@@ -54,8 +54,7 @@ export class DisabledDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" [disabled]="true"></p-splitButton>`,
+        basic: `<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" [disabled]="true"></p-splitButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/splitbutton/nesteddoc.ts b/src/app/showcase/doc/splitbutton/nesteddoc.ts
index cb00fda3d45..8baaed49b47 100644
--- a/src/app/showcase/doc/splitbutton/nesteddoc.ts
+++ b/src/app/showcase/doc/splitbutton/nesteddoc.ts
@@ -153,8 +153,7 @@ export class NestedDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>`,
+        basic: `<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/splitbutton/outlineddoc.ts b/src/app/showcase/doc/splitbutton/outlineddoc.ts
index 9c951858b22..a08eabf4918 100644
--- a/src/app/showcase/doc/splitbutton/outlineddoc.ts
+++ b/src/app/showcase/doc/splitbutton/outlineddoc.ts
@@ -60,8 +60,7 @@ export class OutlinedDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined mr-2 mb-2"></p-splitButton>
+        basic: `<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-secondary mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-success mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-info mr-2 mb-2"></p-splitButton>
diff --git a/src/app/showcase/doc/splitbutton/raiseddoc.ts b/src/app/showcase/doc/splitbutton/raiseddoc.ts
index c8c586fad70..c0175e19bef 100644
--- a/src/app/showcase/doc/splitbutton/raiseddoc.ts
+++ b/src/app/showcase/doc/splitbutton/raiseddoc.ts
@@ -60,8 +60,7 @@ export class RaisedDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised mr-2 mb-2"></p-splitButton>
+        basic: `<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-secondary mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Success" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-success mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Info" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-info mr-2 mb-2"></p-splitButton>
diff --git a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts
index 3881a59aa1a..574445de29b 100644
--- a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts
+++ b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts
@@ -61,8 +61,7 @@ export class RaisedTextDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-raised p-button-text mr-2 mb-2"></p-splitButton>
+        basic: `<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-raised p-button-text mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-raised p-button-secondary p-button-text mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-raised p-button-success p-button-text mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-raised p-button-info p-button-text mr-2 mb-2"></p-splitButton>
diff --git a/src/app/showcase/doc/splitbutton/roundeddoc.ts b/src/app/showcase/doc/splitbutton/roundeddoc.ts
index 390f5d7f490..7e612608f84 100644
--- a/src/app/showcase/doc/splitbutton/roundeddoc.ts
+++ b/src/app/showcase/doc/splitbutton/roundeddoc.ts
@@ -60,8 +60,7 @@ export class RoundedDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-rounded mr-2 mb-2"></p-splitButton>
+        basic: `<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-rounded mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-rounded p-button-secondary mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-rounded p-button-success mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-rounded p-button-info mr-2 mb-2"></p-splitButton>
diff --git a/src/app/showcase/doc/splitbutton/severitydoc.ts b/src/app/showcase/doc/splitbutton/severitydoc.ts
index 381272c1372..816eea07d70 100644
--- a/src/app/showcase/doc/splitbutton/severitydoc.ts
+++ b/src/app/showcase/doc/splitbutton/severitydoc.ts
@@ -60,8 +60,7 @@ export class SeverityDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
+        basic: `<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
 <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-secondary mb-2"></p-splitButton>
 <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('success')" [model]="items" styleClass="p-button-success mb-2"></p-splitButton>
 <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-info mb-2"></p-splitButton>
diff --git a/src/app/showcase/doc/splitbutton/sizesdoc.ts b/src/app/showcase/doc/splitbutton/sizesdoc.ts
index 2780737ee97..f9795790d7c 100644
--- a/src/app/showcase/doc/splitbutton/sizesdoc.ts
+++ b/src/app/showcase/doc/splitbutton/sizesdoc.ts
@@ -56,8 +56,7 @@ export class SizesDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Small" [model]="this.items" (onClick)="save('info')" styleClass="p-button-sm mr-2 mb-2"></p-splitButton>
+        basic: `<p-splitButton label="Small" [model]="this.items" (onClick)="save('info')" styleClass="p-button-sm mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Normal" [model]="this.items" (onClick)="save('info')" styleClass="mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Large" [model]="this.items" (onClick)="save('info')" styleClass="p-button-lg mr-2 mb-2"></p-splitButton>`,
 
diff --git a/src/app/showcase/doc/splitbutton/textdoc.ts b/src/app/showcase/doc/splitbutton/textdoc.ts
index d352a63640e..a336684eb79 100644
--- a/src/app/showcase/doc/splitbutton/textdoc.ts
+++ b/src/app/showcase/doc/splitbutton/textdoc.ts
@@ -61,8 +61,7 @@ export class TextDoc {
     }
 
     code: Code = {
-        basic: `
-<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text mr-2 mb-2"></p-splitButton>
+        basic: `<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-secondary mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-success mr-2 mb-2"></p-splitButton>
 <p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-info mr-2 mb-2"></p-splitButton>
diff --git a/src/app/showcase/doc/splitter/horizontaldoc.ts b/src/app/showcase/doc/splitter/horizontaldoc.ts
index 48b9f23be8a..3825385e73b 100644
--- a/src/app/showcase/doc/splitter/horizontaldoc.ts
+++ b/src/app/showcase/doc/splitter/horizontaldoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class HorizontalDoc {
     code: Code = {
-        basic: `
-<p-splitter [style]="{ height: '300px' }" styleClass="mb-5">
+        basic: `<p-splitter [style]="{ height: '300px' }" styleClass="mb-5">
     <ng-template pTemplate>
         <div class="col flex align-items-center justify-content-center">Panel 1</div>
     </ng-template>
diff --git a/src/app/showcase/doc/splitter/nesteddoc.ts b/src/app/showcase/doc/splitter/nesteddoc.ts
index 2e2b3a18c84..5190860c1e2 100644
--- a/src/app/showcase/doc/splitter/nesteddoc.ts
+++ b/src/app/showcase/doc/splitter/nesteddoc.ts
@@ -36,8 +36,7 @@ import { Code } from '../../domain/code';
 })
 export class NestedDoc {
     code: Code = {
-        basic: `
-<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-5">
+        basic: `<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-5">
     <ng-template pTemplate>
         <div class="col flex align-items-center justify-content-center">Panel 1</div>
     </ng-template>
diff --git a/src/app/showcase/doc/splitter/sizedoc.ts b/src/app/showcase/doc/splitter/sizedoc.ts
index 164d6aa524c..189e1705a83 100644
--- a/src/app/showcase/doc/splitter/sizedoc.ts
+++ b/src/app/showcase/doc/splitter/sizedoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class SizeDoc {
     code: Code = {
-        basic: `
-<p-splitter [panelSizes]="[25, 75]" [style]="{ height: '300px' }" styleClass="mb-5">
+        basic: `<p-splitter [panelSizes]="[25, 75]" [style]="{ height: '300px' }" styleClass="mb-5">
     <ng-template pTemplate>
         <div class="col flex align-items-center justify-content-center">Panel 1</div>
     </ng-template>
diff --git a/src/app/showcase/doc/splitter/verticaldoc.ts b/src/app/showcase/doc/splitter/verticaldoc.ts
index d064ac48cc0..1608480e641 100644
--- a/src/app/showcase/doc/splitter/verticaldoc.ts
+++ b/src/app/showcase/doc/splitter/verticaldoc.ts
@@ -22,8 +22,7 @@ import { Code } from '../../domain/code';
 })
 export class VerticalDoc {
     code: Code = {
-        basic: `
-<p-splitter [style]="{ height: '300px' }" styleClass="mb-5" layout="vertical">
+        basic: `<p-splitter [style]="{ height: '300px' }" styleClass="mb-5" layout="vertical">
     <ng-template pTemplate>
         <div class="col flex align-items-center justify-content-center">Panel 1</div>
     </ng-template>
diff --git a/src/app/showcase/doc/steps/basicdoc.ts b/src/app/showcase/doc/steps/basicdoc.ts
index c781a56a12c..a724f0b72c4 100644
--- a/src/app/showcase/doc/steps/basicdoc.ts
+++ b/src/app/showcase/doc/steps/basicdoc.ts
@@ -39,8 +39,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-steps [model]="items" [readonly]="true"></p-steps>`,
+        basic: `<p-steps [model]="items" [readonly]="true"></p-steps>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/steps/interactivedoc.ts b/src/app/showcase/doc/steps/interactivedoc.ts
index 268177d2f64..a66abf0c959 100644
--- a/src/app/showcase/doc/steps/interactivedoc.ts
+++ b/src/app/showcase/doc/steps/interactivedoc.ts
@@ -49,8 +49,7 @@ export class InteractiveDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-steps [model]="items" [readonly]="false" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)"></p-steps>`,
 
         html: `
diff --git a/src/app/showcase/doc/steps/routingdoc.ts b/src/app/showcase/doc/steps/routingdoc.ts
index d25d89ee081..7a3097dd4b6 100644
--- a/src/app/showcase/doc/steps/routingdoc.ts
+++ b/src/app/showcase/doc/steps/routingdoc.ts
@@ -57,8 +57,7 @@ export class RoutingDoc implements OnInit {
         }
     }
     code: Code = {
-        basic: `
-<div class="card">
+        basic: `<div class="card">
     <p-toast></p-toast>
     <p-steps [model]="items" [readonly]="false"></p-steps>
 </div>
diff --git a/src/app/showcase/doc/styleclass/animationdoc.ts b/src/app/showcase/doc/styleclass/animationdoc.ts
index e246a72cba0..30332a34332 100644
--- a/src/app/showcase/doc/styleclass/animationdoc.ts
+++ b/src/app/showcase/doc/styleclass/animationdoc.ts
@@ -25,8 +25,7 @@ import { Code } from '../../domain/code';
 })
 export class AnimationDoc {
     code: Code = {
-        basic: `
-<div>
+        basic: `<div>
     <button pButton label="Show" class="mr-2" pStyleClass=".box" enterClass="hidden" enterActiveClass="fadein"></button>
     <button pButton label="Hide" pStyleClass=".box" leaveActiveClass="fadeout" leaveToClass="hidden"></button>
 </div>
diff --git a/src/app/showcase/doc/styleclass/toggleclassdoc.ts b/src/app/showcase/doc/styleclass/toggleclassdoc.ts
index aa1c8be13a2..c304842379d 100644
--- a/src/app/showcase/doc/styleclass/toggleclassdoc.ts
+++ b/src/app/showcase/doc/styleclass/toggleclassdoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class ToggleClassDoc {
     code: Code = {
-        basic: `
-<button pButton label="Toggle p-disabled" pStyleClass="@next" toggleClass="p-disabled"></button>
+        basic: `<button pButton label="Toggle p-disabled" pStyleClass="@next" toggleClass="p-disabled"></button>
 <input type="text" pInputText class="block mt-3" />`,
         html: `
 <div class="card flex flex-column align-items-center">
diff --git a/src/app/showcase/doc/table/basicdoc.ts b/src/app/showcase/doc/table/basicdoc.ts
index 5d3cad289cd..5f95c71ceea 100644
--- a/src/app/showcase/doc/table/basicdoc.ts
+++ b/src/app/showcase/doc/table/basicdoc.ts
@@ -44,8 +44,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+        basic: `<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="header">
         <tr>
             <th>Code</th>
diff --git a/src/app/showcase/doc/table/celleditdoc.ts b/src/app/showcase/doc/table/celleditdoc.ts
index 9151dbae1e7..9ff64f5150e 100644
--- a/src/app/showcase/doc/table/celleditdoc.ts
+++ b/src/app/showcase/doc/table/celleditdoc.ts
@@ -80,8 +80,7 @@ export class CellEditDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
+        basic: `<p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="header">
         <tr>
             <th style="width:25%">Code</th>
diff --git a/src/app/showcase/doc/table/checkboxselectiondoc.ts b/src/app/showcase/doc/table/checkboxselectiondoc.ts
index a2944fb9b37..88022ecef4e 100644
--- a/src/app/showcase/doc/table/checkboxselectiondoc.ts
+++ b/src/app/showcase/doc/table/checkboxselectiondoc.ts
@@ -52,8 +52,7 @@ export class CheckboxSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th style="width: 4rem">
diff --git a/src/app/showcase/doc/table/columngroupdoc.ts b/src/app/showcase/doc/table/columngroupdoc.ts
index f7908692b51..9757c42be51 100644
--- a/src/app/showcase/doc/table/columngroupdoc.ts
+++ b/src/app/showcase/doc/table/columngroupdoc.ts
@@ -93,8 +93,7 @@ export class ColumnGroupDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="sales" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="sales" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th rowspan="3">Product</th>
diff --git a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts
index 6af16a4c930..6241e129eb7 100644
--- a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts
+++ b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts
@@ -44,8 +44,7 @@ export class ColumnResizeExpandModeDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [resizableColumns]="true" columnResizeMode="expand" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [resizableColumns]="true" columnResizeMode="expand" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th pResizableColumn>Code</th>
diff --git a/src/app/showcase/doc/table/columnresizefitmodedoc.ts b/src/app/showcase/doc/table/columnresizefitmodedoc.ts
index 8a3edcf7c3b..f86b8263231 100644
--- a/src/app/showcase/doc/table/columnresizefitmodedoc.ts
+++ b/src/app/showcase/doc/table/columnresizefitmodedoc.ts
@@ -44,8 +44,7 @@ export class ColumnResizeFitModeDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th pResizableColumn>Code</th>
diff --git a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts
index 36369bf8912..7b66553e31f 100644
--- a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts
+++ b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts
@@ -41,8 +41,7 @@ export class ColumnResizeScrollableModeDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th pResizableColumn>Name</th>
diff --git a/src/app/showcase/doc/table/columnselectiondoc.ts b/src/app/showcase/doc/table/columnselectiondoc.ts
index b9d71390f00..058b2f54c43 100644
--- a/src/app/showcase/doc/table/columnselectiondoc.ts
+++ b/src/app/showcase/doc/table/columnselectiondoc.ts
@@ -57,8 +57,7 @@ export class ColumnSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="header">
         <tr>
diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts
index a698926e8bc..29ca9068014 100644
--- a/src/app/showcase/doc/table/columntoggledoc.ts
+++ b/src/app/showcase/doc/table/columntoggledoc.ts
@@ -63,8 +63,7 @@ export class ColumnToggleDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="caption">
         <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
             selectedItemsLabel="{0} columns selected" [style]="{'min-width': '200px'}" placeholder="Choose Columns"></p-multiSelect>
diff --git a/src/app/showcase/doc/table/contextmenudoc.ts b/src/app/showcase/doc/table/contextmenudoc.ts
index e4eb67e6b7e..464c98d4a7a 100644
--- a/src/app/showcase/doc/table/contextmenudoc.ts
+++ b/src/app/showcase/doc/table/contextmenudoc.ts
@@ -70,8 +70,7 @@ export class ContextMenuDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-contextMenu #cm [model]="items"></p-contextMenu>
+        basic: `<p-contextMenu #cm [model]="items"></p-contextMenu>
 <p-table [value]="products" [(contextMenuSelection)]="selectedProduct" [contextMenu]="cm" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
diff --git a/src/app/showcase/doc/table/controlledselectiondoc.ts b/src/app/showcase/doc/table/controlledselectiondoc.ts
index 9281e3bc1c6..db85ed9e5b5 100644
--- a/src/app/showcase/doc/table/controlledselectiondoc.ts
+++ b/src/app/showcase/doc/table/controlledselectiondoc.ts
@@ -62,8 +62,7 @@ export class ControlledSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [rowSelectable]="isRowSelectable" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [rowSelectable]="isRowSelectable" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th style="width: 4rem">
diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts
index 0cc0e6adf3b..804e453d28a 100644
--- a/src/app/showcase/doc/table/customersdoc.ts
+++ b/src/app/showcase/doc/table/customersdoc.ts
@@ -239,8 +239,7 @@ export class CustomersDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table
+        basic: `<p-table
     #dt
     [value]="customers"
     [(selection)]="selectedCustomers"
diff --git a/src/app/showcase/doc/table/customsortdoc.ts b/src/app/showcase/doc/table/customsortdoc.ts
index c6842ec4a26..15ebe3e39c7 100644
--- a/src/app/showcase/doc/table/customsortdoc.ts
+++ b/src/app/showcase/doc/table/customsortdoc.ts
@@ -66,8 +66,7 @@ export class CustomSortDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" (sortFunction)="customSort($event)" [customSort]="true" [tableStyle]="{'min-width': '60rem'}">
+        basic: `<p-table [value]="products" (sortFunction)="customSort($event)" [customSort]="true" [tableStyle]="{'min-width': '60rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
diff --git a/src/app/showcase/doc/table/dynamicdoc.ts b/src/app/showcase/doc/table/dynamicdoc.ts
index 0bfc0298697..62af9fa8b54 100644
--- a/src/app/showcase/doc/table/dynamicdoc.ts
+++ b/src/app/showcase/doc/table/dynamicdoc.ts
@@ -55,8 +55,7 @@ export class DynamicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table [columns]="cols" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+        basic: `<p-table [columns]="cols" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/src/app/showcase/doc/table/expandablerowgroupdoc.ts
index cafd90bd51d..15fc5126e14 100644
--- a/src/app/showcase/doc/table/expandablerowgroupdoc.ts
+++ b/src/app/showcase/doc/table/expandablerowgroupdoc.ts
@@ -105,8 +105,7 @@ export class ExpandableRowGroupDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="customers" sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{'min-width': '70rem'}">
+        basic: `<p-table [value]="customers" sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{'min-width': '70rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th style="width:20%">Name</th>
diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts
index 03db00e1fd8..15fdcef8b42 100644
--- a/src/app/showcase/doc/table/exportdoc.ts
+++ b/src/app/showcase/doc/table/exportdoc.ts
@@ -109,8 +109,7 @@ export class ExportDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
+        basic: `<p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="caption">
         <div class="flex">
             <button type="button" pButton pRipple icon="pi pi-file" (click)="dt.exportCSV()" class="mr-2" pTooltip="CSV" tooltipPosition="bottom"></button>
diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts
index b86523e4f85..9c11e0580cc 100644
--- a/src/app/showcase/doc/table/filtermenudoc.ts
+++ b/src/app/showcase/doc/table/filtermenudoc.ts
@@ -224,8 +224,7 @@ export class FilterMenuDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table
+        basic: `<p-table
     #dt1
     [value]="customers"
     dataKey="id"
diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterrowdoc.ts
index 339de8c9294..060d3e05795 100644
--- a/src/app/showcase/doc/table/filterrowdoc.ts
+++ b/src/app/showcase/doc/table/filterrowdoc.ts
@@ -177,8 +177,7 @@ export class FilterRowDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table
+        basic: `<p-table
     #dt2
     [value]="customers"
     dataKey="id"
diff --git a/src/app/showcase/doc/table/flexiblescrolldoc.ts b/src/app/showcase/doc/table/flexiblescrolldoc.ts
index 5f54b4f623f..d480dd4be55 100644
--- a/src/app/showcase/doc/table/flexiblescrolldoc.ts
+++ b/src/app/showcase/doc/table/flexiblescrolldoc.ts
@@ -60,8 +60,7 @@ export class FlexibleScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="flex justify-content-center">
+        basic: `<div class="flex justify-content-center">
     <button type="button" (click)="showDialog()" pButton icon="pi pi-external-link" label="View"></button>
 </div>
 <p-dialog header="Header" [resizable]="false" [modal]="true" [maximizable]="true" appendTo="body" [(visible)]="dialogVisible" [style]="{width: '75vw'}" [contentStyle]="{height: '300px'}">
diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts
index 826c33ca209..e31c57ec2d9 100644
--- a/src/app/showcase/doc/table/frozencolumnsdoc.ts
+++ b/src/app/showcase/doc/table/frozencolumnsdoc.ts
@@ -62,8 +62,7 @@ export class FrozenColumnsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance"></p-toggleButton>
+        basic: `<p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance"></p-toggleButton>
 
 <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
     <ng-template pTemplate="header">
diff --git a/src/app/showcase/doc/table/frozenrowsdoc.ts b/src/app/showcase/doc/table/frozenrowsdoc.ts
index 5bcb02cc43c..93909c51e75 100644
--- a/src/app/showcase/doc/table/frozenrowsdoc.ts
+++ b/src/app/showcase/doc/table/frozenrowsdoc.ts
@@ -94,8 +94,7 @@ export class FrozenRowsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '60rem'}">
+        basic: `<p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '60rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Name</th>
diff --git a/src/app/showcase/doc/table/gridlinesdoc.ts b/src/app/showcase/doc/table/gridlinesdoc.ts
index 08399e83fa0..42280e85cde 100644
--- a/src/app/showcase/doc/table/gridlinesdoc.ts
+++ b/src/app/showcase/doc/table/gridlinesdoc.ts
@@ -46,8 +46,7 @@ export class GridlinesDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
+        basic: `<p-table [value]="products" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="caption"> Header </ng-template>
     <ng-template pTemplate="header">
         <tr>
diff --git a/src/app/showcase/doc/table/horizontalandverticaldoc.ts b/src/app/showcase/doc/table/horizontalandverticaldoc.ts
index d6143d78954..3295d2116a1 100644
--- a/src/app/showcase/doc/table/horizontalandverticaldoc.ts
+++ b/src/app/showcase/doc/table/horizontalandverticaldoc.ts
@@ -71,8 +71,7 @@ export class HorizontalAndVerticalScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
+        basic: `<p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
     <ng-template pTemplate="header">
         <tr>
             <th style="min-width:100px">Id</th>
diff --git a/src/app/showcase/doc/table/lazyloaddoc.ts b/src/app/showcase/doc/table/lazyloaddoc.ts
index 724de7c43f0..a390dbb476b 100644
--- a/src/app/showcase/doc/table/lazyloaddoc.ts
+++ b/src/app/showcase/doc/table/lazyloaddoc.ts
@@ -148,8 +148,7 @@ export class LazyLoadDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table
+        basic: `<p-table
     [value]="customers"
     [lazy]="true"
     (onLazyLoad)="loadCustomers($event)"
diff --git a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts
index dfcb5f51d39..4572d26c4d1 100644
--- a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts
+++ b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts
@@ -48,8 +48,7 @@ export class MultipleColumnSortDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products1" [tableStyle]="{'min-width': '60rem'}">
+        basic: `<p-table [value]="products1" [tableStyle]="{'min-width': '60rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
diff --git a/src/app/showcase/doc/table/multipleselectiondoc.ts b/src/app/showcase/doc/table/multipleselectiondoc.ts
index 7b4b36d03b1..c613c5dd485 100644
--- a/src/app/showcase/doc/table/multipleselectiondoc.ts
+++ b/src/app/showcase/doc/table/multipleselectiondoc.ts
@@ -56,8 +56,7 @@ export class MultipleSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="flex justify-content-center align-items-center gap-2 mb-3">
+        basic: `<div class="flex justify-content-center align-items-center gap-2 mb-3">
     <p-inputSwitch inputId="metakey" [(ngModel)]="metaKeySelection" label="MetaKey"></p-inputSwitch>
     <span>MetaKey</span>
 </div>
diff --git a/src/app/showcase/doc/table/pageonlyselectiondoc.ts b/src/app/showcase/doc/table/pageonlyselectiondoc.ts
index 618f07fc627..98ad9bb8046 100644
--- a/src/app/showcase/doc/table/pageonlyselectiondoc.ts
+++ b/src/app/showcase/doc/table/pageonlyselectiondoc.ts
@@ -49,8 +49,7 @@ export class PageOnlySelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [paginator]="true" [rows]="5" [selectionPageOnly]="true" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [paginator]="true" [rows]="5" [selectionPageOnly]="true" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th style="width: 4rem">
diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts
index c056d38a013..d0cd4915a11 100644
--- a/src/app/showcase/doc/table/paginatorbasicdoc.ts
+++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts
@@ -61,8 +61,7 @@ export class PaginatorBasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table
+        basic: `<p-table
     [value]="customers"
     [paginator]="true"
     [rows]="5"
diff --git a/src/app/showcase/doc/table/paginatorlocaledoc.ts b/src/app/showcase/doc/table/paginatorlocaledoc.ts
index a57d156cc10..ead1766b188 100644
--- a/src/app/showcase/doc/table/paginatorlocaledoc.ts
+++ b/src/app/showcase/doc/table/paginatorlocaledoc.ts
@@ -59,8 +59,7 @@ export class PaginatorLocaleDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table
+        basic: `<p-table
     [value]="customers"
     [paginator]="true"
     [rows]="5"
diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
index 0d9a89dfe48..62da8b17cdb 100644
--- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
+++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
@@ -90,8 +90,7 @@ export class PaginatorProgrammaticDoc {
     }
 
     code: Code = {
-        basic: `
-<div class="mb-3">
+        basic: `<div class="mb-3">
     <p-button type="button" icon="pi pi-chevron-left" (click)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text"></p-button>
     <p-button type="button" icon="pi pi-refresh" (click)="reset()" styleClass="p-button-text"></p-button>
     <p-button type="button" icon="pi pi-chevron-right" (click)="next()" [disabled]="isLastPage()" styleClass="p-button-text"></p-button>
diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts
index 1b0acb51908..cf9aa6b96d1 100644
--- a/src/app/showcase/doc/table/productsdoc.ts
+++ b/src/app/showcase/doc/table/productsdoc.ts
@@ -277,8 +277,7 @@ export class ProductsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-toolbar styleClass="mb-4 gap-2">
     <ng-template pTemplate="left">
         <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
diff --git a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts
index afa62644d72..9b74b40711a 100644
--- a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts
+++ b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts
@@ -50,8 +50,7 @@ export class RadioButtonSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th style="width: 4rem"></th>
diff --git a/src/app/showcase/doc/table/reorderdoc.ts b/src/app/showcase/doc/table/reorderdoc.ts
index 7b1f0f4f722..79a8e07760d 100644
--- a/src/app/showcase/doc/table/reorderdoc.ts
+++ b/src/app/showcase/doc/table/reorderdoc.ts
@@ -64,8 +64,7 @@ export class ReorderDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th style="width:3rem"></th>
diff --git a/src/app/showcase/doc/table/responsivescrolldoc.ts b/src/app/showcase/doc/table/responsivescrolldoc.ts
index 28bc825d6fc..48687abdd63 100644
--- a/src/app/showcase/doc/table/responsivescrolldoc.ts
+++ b/src/app/showcase/doc/table/responsivescrolldoc.ts
@@ -78,8 +78,7 @@ export class ResponsiveScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th>Name </th>
diff --git a/src/app/showcase/doc/table/responsivestackdoc.ts b/src/app/showcase/doc/table/responsivestackdoc.ts
index c92107b10b1..e4e4196bd1e 100644
--- a/src/app/showcase/doc/table/responsivestackdoc.ts
+++ b/src/app/showcase/doc/table/responsivestackdoc.ts
@@ -78,8 +78,7 @@ export class ResponsiveStackDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" responsiveLayout="stack" [breakpoint]="'960px'" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" responsiveLayout="stack" [breakpoint]="'960px'" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th>Name</th>
diff --git a/src/app/showcase/doc/table/roweditdoc.ts b/src/app/showcase/doc/table/roweditdoc.ts
index 15cc04a1797..b61a2e7faa2 100644
--- a/src/app/showcase/doc/table/roweditdoc.ts
+++ b/src/app/showcase/doc/table/roweditdoc.ts
@@ -131,8 +131,7 @@ export class RowEditDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-table [value]="products" dataKey="id" editMode="row" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
diff --git a/src/app/showcase/doc/table/rowexpanddoc.ts b/src/app/showcase/doc/table/rowexpanddoc.ts
index aaf62129bac..474ef4c3380 100644
--- a/src/app/showcase/doc/table/rowexpanddoc.ts
+++ b/src/app/showcase/doc/table/rowexpanddoc.ts
@@ -117,8 +117,7 @@ export class RowExpandDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" dataKey="name" [tableStyle]="{ 'min-width': '60rem' }">
+        basic: `<p-table [value]="products" dataKey="name" [tableStyle]="{ 'min-width': '60rem' }">
     <ng-template pTemplate="header">
         <tr>
             <th style="width: 5rem"></th>
diff --git a/src/app/showcase/doc/table/rowspangroupingdoc.ts b/src/app/showcase/doc/table/rowspangroupingdoc.ts
index 272cc87f130..d21d5216966 100644
--- a/src/app/showcase/doc/table/rowspangroupingdoc.ts
+++ b/src/app/showcase/doc/table/rowspangroupingdoc.ts
@@ -97,8 +97,7 @@ export class RowspanGroupingDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortField="representative.name" sortMode="single"  [tableStyle]="{'min-width': '75rem'}">
+        basic: `<p-table [value]="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortField="representative.name" sortMode="single"  [tableStyle]="{'min-width': '75rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th style="width:3rem">#</th>
diff --git a/src/app/showcase/doc/table/selectioneventsdoc.ts b/src/app/showcase/doc/table/selectioneventsdoc.ts
index d3176deb19e..b24a25a9938 100644
--- a/src/app/showcase/doc/table/selectioneventsdoc.ts
+++ b/src/app/showcase/doc/table/selectioneventsdoc.ts
@@ -57,8 +57,7 @@ export class SelectionEventsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code"
     (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
diff --git a/src/app/showcase/doc/table/singlecolumnsortdoc.ts b/src/app/showcase/doc/table/singlecolumnsortdoc.ts
index 9161219d4d7..aabda069fa0 100644
--- a/src/app/showcase/doc/table/singlecolumnsortdoc.ts
+++ b/src/app/showcase/doc/table/singlecolumnsortdoc.ts
@@ -50,8 +50,7 @@ export class SingleColumnSortDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}">
+        basic: `<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
diff --git a/src/app/showcase/doc/table/singleselectiondoc.ts b/src/app/showcase/doc/table/singleselectiondoc.ts
index 3dbd9faeff6..170791b622a 100644
--- a/src/app/showcase/doc/table/singleselectiondoc.ts
+++ b/src/app/showcase/doc/table/singleselectiondoc.ts
@@ -53,8 +53,7 @@ export class SingleSelectionDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Code</th>
diff --git a/src/app/showcase/doc/table/sizedoc.ts b/src/app/showcase/doc/table/sizedoc.ts
index 512a80969e9..f2cf54c2556 100644
--- a/src/app/showcase/doc/table/sizedoc.ts
+++ b/src/app/showcase/doc/table/sizedoc.ts
@@ -57,8 +57,7 @@ export class SizeDoc {
     }
 
     code: Code = {
-        basic: `
-<div class="flex justify-content-center mb-3">
+        basic: `<div class="flex justify-content-center mb-3">
     <p-selectButton [options]="sizes" [(ngModel)]="selectedSize" [multiple]="false" optionLabel="name" optionValue="class"></p-selectButton>
 </div>
 <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [styleClass]="selectedSize.class">
diff --git a/src/app/showcase/doc/table/statefuldoc.ts b/src/app/showcase/doc/table/statefuldoc.ts
index fe8bb4cde93..8c196c186a4 100644
--- a/src/app/showcase/doc/table/statefuldoc.ts
+++ b/src/app/showcase/doc/table/statefuldoc.ts
@@ -102,8 +102,7 @@ export class StatefulDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table #dt1 [value]="customers" selectionMode="single" [(selection)]="selectedCustomers" dataKey="id" [tableStyle]="{'min-width': '50rem'}"
+        basic: `<p-table #dt1 [value]="customers" selectionMode="single" [(selection)]="selectedCustomers" dataKey="id" [tableStyle]="{'min-width': '50rem'}"
     [rows]="10" [paginator]="true" stateStorage="session" stateKey="statedemo-session">
     <ng-template pTemplate="header">
         <tr>
diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/src/app/showcase/doc/table/stripeddoc.ts
index 3dadbeefce8..2bcbb8f7d2e 100644
--- a/src/app/showcase/doc/table/stripeddoc.ts
+++ b/src/app/showcase/doc/table/stripeddoc.ts
@@ -44,8 +44,7 @@ export class StripedDoc {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" styleClass="p-datatable-striped" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" styleClass="p-datatable-striped" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Code</th>
diff --git a/src/app/showcase/doc/table/styledoc.ts b/src/app/showcase/doc/table/styledoc.ts
index f243ae4aefb..55cf647938f 100644
--- a/src/app/showcase/doc/table/styledoc.ts
+++ b/src/app/showcase/doc/table/styledoc.ts
@@ -71,8 +71,7 @@ export class StyleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Code</th>
diff --git a/src/app/showcase/doc/table/subheadergroupingdoc.ts b/src/app/showcase/doc/table/subheadergroupingdoc.ts
index 50944a98677..be2a4dea9dd 100644
--- a/src/app/showcase/doc/table/subheadergroupingdoc.ts
+++ b/src/app/showcase/doc/table/subheadergroupingdoc.ts
@@ -106,8 +106,7 @@ export class SubheaderGroupingDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{'min-width': '60rem'}">
+        basic: `<p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{'min-width': '60rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Name</th>
diff --git a/src/app/showcase/doc/table/templatedoc.ts b/src/app/showcase/doc/table/templatedoc.ts
index ce721df9b51..eb84559c35a 100644
--- a/src/app/showcase/doc/table/templatedoc.ts
+++ b/src/app/showcase/doc/table/templatedoc.ts
@@ -84,8 +84,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}">
+        basic: `<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}">
     <ng-template pTemplate="caption">
         <div class="flex align-items-center justify-content-between">
             Products
diff --git a/src/app/showcase/doc/table/verticalscrolldoc.ts b/src/app/showcase/doc/table/verticalscrolldoc.ts
index 670b4059169..263b50de847 100644
--- a/src/app/showcase/doc/table/verticalscrolldoc.ts
+++ b/src/app/showcase/doc/table/verticalscrolldoc.ts
@@ -44,8 +44,7 @@ export class VerticalScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Name</th>
diff --git a/src/app/showcase/doc/table/virtualscrolldoc.ts b/src/app/showcase/doc/table/virtualscrolldoc.ts
index b7ebacc7bc1..495559cc579 100644
--- a/src/app/showcase/doc/table/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/table/virtualscrolldoc.ts
@@ -60,8 +60,7 @@ export class VirtualScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46">
+        basic: `<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns" style="width: 20%;">
diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
index bceba406f0c..ac335404988 100644
--- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts
+++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
@@ -82,8 +82,7 @@ export class VirtualScrollLazyDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" scrollHeight="250px" [rows]="100"
+        basic: `<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" scrollHeight="250px" [rows]="100"
     [virtualScroll]="true" [virtualScrollItemSize]="46" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
     <ng-template pTemplate="header" let-columns>
         <tr>
diff --git a/src/app/showcase/doc/tabmenu/activedoc.ts b/src/app/showcase/doc/tabmenu/activedoc.ts
index f18eb766cce..92419eadbb0 100644
--- a/src/app/showcase/doc/tabmenu/activedoc.ts
+++ b/src/app/showcase/doc/tabmenu/activedoc.ts
@@ -32,8 +32,7 @@ export class ActiveDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>`,
+        basic: `<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/tabmenu/basicdoc.ts b/src/app/showcase/doc/tabmenu/basicdoc.ts
index 000282f33ad..6be07328958 100644
--- a/src/app/showcase/doc/tabmenu/basicdoc.ts
+++ b/src/app/showcase/doc/tabmenu/basicdoc.ts
@@ -28,8 +28,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tabMenu [model]="items"></p-tabMenu>`,
+        basic: `<p-tabMenu [model]="items"></p-tabMenu>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/tabmenu/controlleddoc.ts b/src/app/showcase/doc/tabmenu/controlleddoc.ts
index d63b88fadc5..69b7c63a6cf 100644
--- a/src/app/showcase/doc/tabmenu/controlleddoc.ts
+++ b/src/app/showcase/doc/tabmenu/controlleddoc.ts
@@ -41,8 +41,7 @@ export class ControlledDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<button type="button" pButton pRipple label="Activate Last" (click)="activateLast()" class="mb-3"></button>
+        basic: `<button type="button" pButton pRipple label="Activate Last" (click)="activateLast()" class="mb-3"></button>
 <p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)"></p-tabMenu>`,
 
         html: `
diff --git a/src/app/showcase/doc/tabmenu/scrollabledoc.ts b/src/app/showcase/doc/tabmenu/scrollabledoc.ts
index f94bf2ad43b..d562032b510 100644
--- a/src/app/showcase/doc/tabmenu/scrollabledoc.ts
+++ b/src/app/showcase/doc/tabmenu/scrollabledoc.ts
@@ -25,8 +25,7 @@ export class ScrollableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tabMenu [scrollable]="true" [model]="items" [activeItem]="activeItem"></p-tabMenu>`,
+        basic: `<p-tabMenu [scrollable]="true" [model]="items" [activeItem]="activeItem"></p-tabMenu>`,
 
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/tabmenu/templatedoc.ts b/src/app/showcase/doc/tabmenu/templatedoc.ts
index b191f0345d0..67a692aaa36 100644
--- a/src/app/showcase/doc/tabmenu/templatedoc.ts
+++ b/src/app/showcase/doc/tabmenu/templatedoc.ts
@@ -45,8 +45,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tabMenu [model]="items" [activeItem]="activeItem">
+        basic: `<p-tabMenu [model]="items" [activeItem]="activeItem">
     <ng-template pTemplate="item" let-item>
         <a class="p-menuitem-link flex justify-content-between align-items-center p-3">
             <div>
diff --git a/src/app/showcase/doc/tabview/basicdoc.ts b/src/app/showcase/doc/tabview/basicdoc.ts
index e116512e4a0..1f051f67e8c 100644
--- a/src/app/showcase/doc/tabview/basicdoc.ts
+++ b/src/app/showcase/doc/tabview/basicdoc.ts
@@ -71,8 +71,7 @@ export class BasicDoc {
         }));
     }
     code: Code = {
-        basic: `
-<p-tabView>
+        basic: `<p-tabView>
     <p-tabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/tabview/closabledoc.ts b/src/app/showcase/doc/tabview/closabledoc.ts
index de583bac455..81206b9760a 100644
--- a/src/app/showcase/doc/tabview/closabledoc.ts
+++ b/src/app/showcase/doc/tabview/closabledoc.ts
@@ -34,8 +34,7 @@ import { Code } from '../../domain/code';
 })
 export class ClosableDoc {
     code: Code = {
-        basic: `
-<p-tabView id="closableTabView">
+        basic: `<p-tabView id="closableTabView">
     <p-tabPanel header="Header I" [selected]="true">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/tabview/controlleddoc.ts b/src/app/showcase/doc/tabview/controlleddoc.ts
index 67133dd25a8..fd1bb1cb802 100644
--- a/src/app/showcase/doc/tabview/controlleddoc.ts
+++ b/src/app/showcase/doc/tabview/controlleddoc.ts
@@ -41,8 +41,7 @@ export class ControlledDoc {
     activeIndex: number = 0;
 
     code: Code = {
-        basic: `
-<div style="padding: .5em 0 1em 0">
+        basic: `<div style="padding: .5em 0 1em 0">
     <p-button (click)="activeIndex = 0" styleClass="p-button-text" label="Activate 1st"></p-button>
     <p-button (click)="activeIndex = 1" styleClass="p-button-text" label="Activate 2nd" style="{'margin-left': '.5em'}"></p-button>
     <p-button (click)="activeIndex = 2" styleClass="p-button-text" label="Activate 3rd" style="{'margin-left': '.5em'}"></p-button>
diff --git a/src/app/showcase/doc/tabview/customtemplatedoc.ts b/src/app/showcase/doc/tabview/customtemplatedoc.ts
index 2c3fe1e3607..98d6566deaa 100644
--- a/src/app/showcase/doc/tabview/customtemplatedoc.ts
+++ b/src/app/showcase/doc/tabview/customtemplatedoc.ts
@@ -47,8 +47,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-tabView styleClass="tabview-custom">
+        basic: `<p-tabView styleClass="tabview-custom">
     <p-tabPanel>
         <ng-template pTemplate="header">
             <i class="pi pi-calendar"></i>
diff --git a/src/app/showcase/doc/tabview/disableddoc.ts b/src/app/showcase/doc/tabview/disableddoc.ts
index a8be2508c14..fcd545c113d 100644
--- a/src/app/showcase/doc/tabview/disableddoc.ts
+++ b/src/app/showcase/doc/tabview/disableddoc.ts
@@ -35,8 +35,7 @@ import { Code } from '../../domain/code';
 })
 export class DisabledDoc {
     code: Code = {
-        basic: `
-<p-tabView>
+        basic: `<p-tabView>
     <p-tabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/showcase/doc/tabview/scrollabledoc.ts b/src/app/showcase/doc/tabview/scrollabledoc.ts
index 985378737af..0e1630b1237 100644
--- a/src/app/showcase/doc/tabview/scrollabledoc.ts
+++ b/src/app/showcase/doc/tabview/scrollabledoc.ts
@@ -23,8 +23,7 @@ export class ScrollableDoc {
     scrollableTabs: any[] = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` }));
 
     code: Code = {
-        basic: `
-<p-tabView [(activeIndex)]="activeIndex" [scrollable]="true">
+        basic: `<p-tabView [(activeIndex)]="activeIndex" [scrollable]="true">
     <p-tabPanel *ngFor="let tab of scrollableTabs" [header]="tab.title">
         <p>{{ tab.content }}</p>
     </p-tabPanel>
diff --git a/src/app/showcase/doc/tag/basicdoc.ts b/src/app/showcase/doc/tag/basicdoc.ts
index b8cc76886d7..035ef1d1c25 100644
--- a/src/app/showcase/doc/tag/basicdoc.ts
+++ b/src/app/showcase/doc/tag/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<p-tag value="New"></p-tag>`,
+        basic: `<p-tag value="New"></p-tag>`,
         html: `
 <div class="card flex justify-content-center">
     <p-tag value="New"></p-tag>
diff --git a/src/app/showcase/doc/tag/icondoc.ts b/src/app/showcase/doc/tag/icondoc.ts
index fb82cfd0448..9b235966335 100644
--- a/src/app/showcase/doc/tag/icondoc.ts
+++ b/src/app/showcase/doc/tag/icondoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class IconDoc {
     code: Code = {
-        basic: `
-<p-tag icon="pi pi-user" value="Primary"></p-tag>`,
+        basic: `<p-tag icon="pi pi-user" value="Primary"></p-tag>`,
         html: `
 <div class="card flex justify-content-center gap-2">
     <p-tag icon="pi pi-user" value="Primary"></p-tag>
diff --git a/src/app/showcase/doc/tag/pilldoc.ts b/src/app/showcase/doc/tag/pilldoc.ts
index 57b512562de..cccbc8dcfcf 100644
--- a/src/app/showcase/doc/tag/pilldoc.ts
+++ b/src/app/showcase/doc/tag/pilldoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class PillDoc {
     code: Code = {
-        basic: `
-<p-tag value="Primary" [rounded]="true"></p-tag>`,
+        basic: `<p-tag value="Primary" [rounded]="true"></p-tag>`,
         html: `
 <div class="card flex justify-content-center gap-2">
     <p-tag value="Primary" [rounded]="true"></p-tag>
diff --git a/src/app/showcase/doc/tag/severitydoc.ts b/src/app/showcase/doc/tag/severitydoc.ts
index a03b1cd9f5b..d1d6c16a93a 100644
--- a/src/app/showcase/doc/tag/severitydoc.ts
+++ b/src/app/showcase/doc/tag/severitydoc.ts
@@ -19,8 +19,7 @@ import { Code } from '../../domain/code';
 })
 export class SeverityDoc {
     code: Code = {
-        basic: `
-<p-tag severity="success" value="Success"></p-tag>`,
+        basic: `<p-tag severity="success" value="Success"></p-tag>`,
         html: `
 <div class="card flex justify-content-center gap-2">
     <p-tag value="Primary"></p-tag>
diff --git a/src/app/showcase/doc/tag/templatedoc.ts b/src/app/showcase/doc/tag/templatedoc.ts
index b4af2dbe43f..ae018647250 100644
--- a/src/app/showcase/doc/tag/templatedoc.ts
+++ b/src/app/showcase/doc/tag/templatedoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<p-tag [style]="{ 'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
+        basic: `<p-tag [style]="{ 'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
     <div class="flex align-items-center gap-2">
         <img alt="Country" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" class="flag flag-it" style="width: '18px'" />
         <span class="text-base">Italia</span>
diff --git a/src/app/showcase/doc/terminal/basicdoc.ts b/src/app/showcase/doc/terminal/basicdoc.ts
index cfbe908750c..0cfda858e2b 100644
--- a/src/app/showcase/doc/terminal/basicdoc.ts
+++ b/src/app/showcase/doc/terminal/basicdoc.ts
@@ -34,8 +34,7 @@ export class BasicDoc implements OnDestroy {
     }
 
     code: Code = {
-        basic: `
-<p>Enter "<strong>date</strong>" to display the current date, "<strong>greet &#123;0&#125;</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
+        basic: `<p>Enter "<strong>date</strong>" to display the current date, "<strong>greet &#123;0&#125;</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
 <p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>`,
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/theming/scopedcssdoc.ts b/src/app/showcase/doc/theming/scopedcssdoc.ts
index 9f0848ac9d6..dc3627f67a5 100644
--- a/src/app/showcase/doc/theming/scopedcssdoc.ts
+++ b/src/app/showcase/doc/theming/scopedcssdoc.ts
@@ -33,8 +33,7 @@ import { Code } from '../../domain/code';
 })
 export class ScopedCSSDoc {
     code: Code = {
-        basic: `
-<p-panel header="Scoped Panel">
+        basic: `<p-panel header="Scoped Panel">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/app/showcase/doc/tieredmenu/basicdoc.ts b/src/app/showcase/doc/tieredmenu/basicdoc.ts
index 4ed52a455c5..44826d6b5c1 100644
--- a/src/app/showcase/doc/tieredmenu/basicdoc.ts
+++ b/src/app/showcase/doc/tieredmenu/basicdoc.ts
@@ -147,8 +147,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tieredMenu [model]="items"></p-tieredMenu>`,
+        basic: `<p-tieredMenu [model]="items"></p-tieredMenu>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts
index c9c773f7762..037a6c456b0 100644
--- a/src/app/showcase/doc/tieredmenu/popupdoc.ts
+++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts
@@ -148,8 +148,7 @@ export class PopupDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<button #btn type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>
+        basic: `<button #btn type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>
 <p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>`,
 
         html: `
diff --git a/src/app/showcase/doc/timeline/alignmentdoc.ts b/src/app/showcase/doc/timeline/alignmentdoc.ts
index 4381526eb07..dc7bc6d071d 100644
--- a/src/app/showcase/doc/timeline/alignmentdoc.ts
+++ b/src/app/showcase/doc/timeline/alignmentdoc.ts
@@ -50,8 +50,7 @@ export class AlignmentDoc {
     }
 
     code: Code = {
-        basic: `
-<p-timeline [value]="events" class="w-full md:w-20rem">
+        basic: `<p-timeline [value]="events" class="w-full md:w-20rem">
     <ng-template pTemplate="content" let-event>
         {{ event.status }}
     </ng-template>
diff --git a/src/app/showcase/doc/timeline/basicdoc.ts b/src/app/showcase/doc/timeline/basicdoc.ts
index fa968b99144..296ba6ea2e7 100644
--- a/src/app/showcase/doc/timeline/basicdoc.ts
+++ b/src/app/showcase/doc/timeline/basicdoc.ts
@@ -33,8 +33,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-timeline [value]="events">
+        basic: `<p-timeline [value]="events">
     <ng-template pTemplate="content" let-event>
         {{ event.status }}
     </ng-template>
diff --git a/src/app/showcase/doc/timeline/horizontaldoc.ts b/src/app/showcase/doc/timeline/horizontaldoc.ts
index 79b29d21ca1..6e7f5d2e852 100644
--- a/src/app/showcase/doc/timeline/horizontaldoc.ts
+++ b/src/app/showcase/doc/timeline/horizontaldoc.ts
@@ -36,8 +36,7 @@ export class HorizontalDoc {
     }
 
     code: Code = {
-        basic: `
-<p-timeline [value]="events" layout="horizontal" align="top">
+        basic: `<p-timeline [value]="events" layout="horizontal" align="top">
     <ng-template pTemplate="content" let-event>
         {{ event }}
     </ng-template>
diff --git a/src/app/showcase/doc/timeline/oppositedoc.ts b/src/app/showcase/doc/timeline/oppositedoc.ts
index 8802fc8a551..a58755bf82d 100644
--- a/src/app/showcase/doc/timeline/oppositedoc.ts
+++ b/src/app/showcase/doc/timeline/oppositedoc.ts
@@ -41,8 +41,7 @@ export class OppositeDoc {
     }
 
     code: Code = {
-        basic: `
-<p-timeline [value]="events">
+        basic: `<p-timeline [value]="events">
     <ng-template pTemplate="content" let-event>
         <small class="p-text-secondary">{{ event.date }}</small>
     </ng-template>
diff --git a/src/app/showcase/doc/timeline/templatedoc.ts b/src/app/showcase/doc/timeline/templatedoc.ts
index acf083d3c89..244347e0de1 100644
--- a/src/app/showcase/doc/timeline/templatedoc.ts
+++ b/src/app/showcase/doc/timeline/templatedoc.ts
@@ -50,8 +50,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-timeline [value]="events" align="alternate" styleClass="customized-timeline">
+        basic: `<p-timeline [value]="events" align="alternate" styleClass="customized-timeline">
     <ng-template pTemplate="marker" let-event>
         <span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
             <i [ngClass]="event.icon"></i>
diff --git a/src/app/showcase/doc/toast/animationdoc.ts b/src/app/showcase/doc/toast/animationdoc.ts
index e8b38531325..2c85def428f 100644
--- a/src/app/showcase/doc/toast/animationdoc.ts
+++ b/src/app/showcase/doc/toast/animationdoc.ts
@@ -24,8 +24,7 @@ export class AnimationDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast [showTransformOptions]="'translateY(100%)'" [showTransitionOptions]="'1000ms'" [hideTransitionOptions]="'1000ms'" [showTransformOptions]="'translateX(100%)'"></p-toast>
+        basic: `<p-toast [showTransformOptions]="'translateY(100%)'" [showTransitionOptions]="'1000ms'" [hideTransitionOptions]="'1000ms'" [showTransformOptions]="'translateX(100%)'"></p-toast>
 <button type="button" pButton pRipple (click)="show()" label="Show"></button>`,
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/toast/basicdoc.ts b/src/app/showcase/doc/toast/basicdoc.ts
index a0777b5d38d..1cf766c6439 100644
--- a/src/app/showcase/doc/toast/basicdoc.ts
+++ b/src/app/showcase/doc/toast/basicdoc.ts
@@ -27,8 +27,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <button type="button" pButton pRipple (click)="show()" label="Show" class="p-button-success"></button>`,
         html: `
 <div class="card">
diff --git a/src/app/showcase/doc/toast/cleardoc.ts b/src/app/showcase/doc/toast/cleardoc.ts
index 5f14c3cdc4e..9b47269f77f 100644
--- a/src/app/showcase/doc/toast/cleardoc.ts
+++ b/src/app/showcase/doc/toast/cleardoc.ts
@@ -32,8 +32,7 @@ export class ClearDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <button type="button" pButton pRipple (click)="show()" label="Show"></button>
 <button type="button" pButton pRipple (click)="clear()" label="Clear" class="p-button-secondary"></button>`,
         html: `
diff --git a/src/app/showcase/doc/toast/lifedoc.ts b/src/app/showcase/doc/toast/lifedoc.ts
index 3ed7b9daed6..86b593cec15 100644
--- a/src/app/showcase/doc/toast/lifedoc.ts
+++ b/src/app/showcase/doc/toast/lifedoc.ts
@@ -29,8 +29,7 @@ export class LifeDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast [life]="10000"></p-toast>
+        basic: `<p-toast [life]="10000"></p-toast>
 <button type="button" pButton pRipple (click)="showLife()" label="Show Life Default"></button>
 <button type="button" pButton pRipple (click)="showLifeLong()" label="Show Life Long"></button>`,
         html: `
diff --git a/src/app/showcase/doc/toast/multipledoc.ts b/src/app/showcase/doc/toast/multipledoc.ts
index 119e7939d81..fb03fa30268 100644
--- a/src/app/showcase/doc/toast/multipledoc.ts
+++ b/src/app/showcase/doc/toast/multipledoc.ts
@@ -28,8 +28,7 @@ export class MultipleDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <button type="button" pButton pRipple (click)="show()" label="Multiple"></button>`,
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/toast/positiondoc.ts b/src/app/showcase/doc/toast/positiondoc.ts
index 86c9bcc6f5f..f43bd6dae5a 100644
--- a/src/app/showcase/doc/toast/positiondoc.ts
+++ b/src/app/showcase/doc/toast/positiondoc.ts
@@ -36,8 +36,7 @@ export class PositionDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast position="top-left" key="tl"></p-toast>
+        basic: `<p-toast position="top-left" key="tl"></p-toast>
 <p-toast position="top-center" key="tc"></p-toast>
 <p-toast position="bottom-center" key="bc"></p-toast>
 <button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"></button>
diff --git a/src/app/showcase/doc/toast/responsivedoc.ts b/src/app/showcase/doc/toast/responsivedoc.ts
index 374cd85826b..557aca68c15 100644
--- a/src/app/showcase/doc/toast/responsivedoc.ts
+++ b/src/app/showcase/doc/toast/responsivedoc.ts
@@ -27,8 +27,7 @@ export class ResponsiveDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast [breakpoints]="{'920px': {width: '100%', right: '0', left: '0'}}"></p-toast>
+        basic: `<p-toast [breakpoints]="{'920px': {width: '100%', right: '0', left: '0'}}"></p-toast>
 <button type="button" pButton pRipple (click)="show()" label="Show"></button>`,
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts
index ea432b184e5..509d798cfa3 100644
--- a/src/app/showcase/doc/toast/severitydoc.ts
+++ b/src/app/showcase/doc/toast/severitydoc.ts
@@ -42,8 +42,7 @@ export class SeverityDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <button type="button" pButton pRipple (click)="showSuccess()" label="Success" class="p-button-success"></button>
 <button type="button" pButton pRipple (click)="showInfo()" label="Info" class="p-button-info"></button>
 <button type="button" pButton pRipple (click)="showWarn()" label="Warn" class="p-button-warning"></button>
diff --git a/src/app/showcase/doc/toast/stickydoc.ts b/src/app/showcase/doc/toast/stickydoc.ts
index 449fb601d0b..da13a164e97 100644
--- a/src/app/showcase/doc/toast/stickydoc.ts
+++ b/src/app/showcase/doc/toast/stickydoc.ts
@@ -31,8 +31,7 @@ export class StickyDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast></p-toast>
+        basic: `<p-toast></p-toast>
 <div class="flex flex-wrap gap-2">
     <button type="button" pButton pRipple (click)="show()" class="p-button-success" label="Show Sticky"></button>
     <button type="button" pButton pRipple (click)="clear()" label="Clear"></button>
diff --git a/src/app/showcase/doc/toast/targetdoc.ts b/src/app/showcase/doc/toast/targetdoc.ts
index 8d8ae7eb148..c858b04f4ed 100644
--- a/src/app/showcase/doc/toast/targetdoc.ts
+++ b/src/app/showcase/doc/toast/targetdoc.ts
@@ -32,8 +32,7 @@ export class TargetDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast key="toast1"></p-toast>
+        basic: `<p-toast key="toast1"></p-toast>
 <p-toast key="toast2"></p-toast>
 <button type="button" pButton pRipple (click)="showToast1()" label="Show Success"></button>
 <button type="button" pButton pRipple (click)="showToast2()" label="Show Warning" class="p-button-success"></button>`,
diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts
index 657bd516a1a..a1709657158 100644
--- a/src/app/showcase/doc/toast/templatedoc.ts
+++ b/src/app/showcase/doc/toast/templatedoc.ts
@@ -57,8 +57,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `
-<p-toast position="bottom-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
+        basic: `<p-toast position="bottom-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
 <ng-template let-message pTemplate="message">
     <div class="flex flex-column" style="flex: 1">
         <div class="text-center">
diff --git a/src/app/showcase/doc/togglebutton/basicdoc.ts b/src/app/showcase/doc/togglebutton/basicdoc.ts
index 85ddb7f0e36..c210dd12a4a 100644
--- a/src/app/showcase/doc/togglebutton/basicdoc.ts
+++ b/src/app/showcase/doc/togglebutton/basicdoc.ts
@@ -17,8 +17,7 @@ export class BasicDoc {
     checked: boolean = false;
 
     code: Code = {
-        basic: `
-<p-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No"></p-toggleButton>`,
+        basic: `<p-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No"></p-toggleButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/togglebutton/customizeddoc.ts b/src/app/showcase/doc/togglebutton/customizeddoc.ts
index 74a5b3b0252..4d4d4ae6820 100644
--- a/src/app/showcase/doc/togglebutton/customizeddoc.ts
+++ b/src/app/showcase/doc/togglebutton/customizeddoc.ts
@@ -17,8 +17,7 @@ export class CustomizedDoc {
     checked: boolean = false;
 
     code: Code = {
-        basic: `
-<p-toggleButton [(ngModel)]="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{ width: '10em' }"></p-toggleButton>`,
+        basic: `<p-toggleButton [(ngModel)]="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{ width: '10em' }"></p-toggleButton>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts
index cca4df7c83f..8c8ccb4c520 100644
--- a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts
@@ -26,8 +26,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-toggleButton formControlName="checked" onLabel="Yes" offLabel="No"></p-toggleButton>
 </form>`,
 
diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts
index 811b4f14299..306bac28971 100644
--- a/src/app/showcase/doc/toolbar/basicdoc.ts
+++ b/src/app/showcase/doc/toolbar/basicdoc.ts
@@ -53,8 +53,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toolbar>
+        basic: `<p-toolbar>
     <div class="p-toolbar-group-start">
         <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
         <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts
index 4962d578148..117054eed94 100644
--- a/src/app/showcase/doc/toolbar/templatedoc.ts
+++ b/src/app/showcase/doc/toolbar/templatedoc.ts
@@ -56,8 +56,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toolbar>
+        basic: `<p-toolbar>
     <ng-template pTemplate="start">
         <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
         <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
diff --git a/src/app/showcase/doc/tooltip/autohidedoc.ts b/src/app/showcase/doc/tooltip/autohidedoc.ts
index 67c576903d9..6e1de2ed7c4 100644
--- a/src/app/showcase/doc/tooltip/autohidedoc.ts
+++ b/src/app/showcase/doc/tooltip/autohidedoc.ts
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
 })
 export class AutoHideDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText pTooltip="Enter your username" [autoHide]="false" placeholder="autoHide: false">
+        basic: `<input type="text" pInputText pTooltip="Enter your username" [autoHide]="false" placeholder="autoHide: false">
 <input type="text" pInputText pTooltip="Enter your username" placeholder="autoHide: true">`,
 
         html: `
diff --git a/src/app/showcase/doc/tooltip/basicdoc.ts b/src/app/showcase/doc/tooltip/basicdoc.ts
index 54190e70ca9..c5a6afa3c46 100644
--- a/src/app/showcase/doc/tooltip/basicdoc.ts
+++ b/src/app/showcase/doc/tooltip/basicdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class BasicDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText pTooltip="Enter your username" placeholder="hover to display tooltip">`,
+        basic: `<input type="text" pInputText pTooltip="Enter your username" placeholder="hover to display tooltip">`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tooltip/delaydoc.ts b/src/app/showcase/doc/tooltip/delaydoc.ts
index 6b321c6c6b8..7a9ef2efba3 100644
--- a/src/app/showcase/doc/tooltip/delaydoc.ts
+++ b/src/app/showcase/doc/tooltip/delaydoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class DelayDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText pTooltip="Enter your username" showDelay="1000" hideDelay="1000" placeholder="hover to display tooltip">`,
+        basic: `<input type="text" pInputText pTooltip="Enter your username" showDelay="1000" hideDelay="1000" placeholder="hover to display tooltip">`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tooltip/eventdoc.ts b/src/app/showcase/doc/tooltip/eventdoc.ts
index 5226771111e..d0cec6d1f63 100644
--- a/src/app/showcase/doc/tooltip/eventdoc.ts
+++ b/src/app/showcase/doc/tooltip/eventdoc.ts
@@ -15,8 +15,7 @@ import { Code } from '../../domain/code';
 })
 export class EventDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText pTooltip="Enter your username" tooltipEvent="focus" placeholder="focus to display tooltip">`,
+        basic: `<input type="text" pInputText pTooltip="Enter your username" tooltipEvent="focus" placeholder="focus to display tooltip">`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tooltip/optionsdoc.ts b/src/app/showcase/doc/tooltip/optionsdoc.ts
index 38e4b7b7cea..9dc0d655f63 100644
--- a/src/app/showcase/doc/tooltip/optionsdoc.ts
+++ b/src/app/showcase/doc/tooltip/optionsdoc.ts
@@ -22,8 +22,7 @@ export class OptionsDoc {
     };
 
     code: Code = {
-        basic: `
-<input type="text" pInputText pTooltip="Enter your username" [tooltipOptions]="tooltipOptions" placeholder="hover to display tooltip">`,
+        basic: `<input type="text" pInputText pTooltip="Enter your username" [tooltipOptions]="tooltipOptions" placeholder="hover to display tooltip">`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tooltip/positiondoc.ts b/src/app/showcase/doc/tooltip/positiondoc.ts
index d29cc83d48a..2fedcad69f3 100644
--- a/src/app/showcase/doc/tooltip/positiondoc.ts
+++ b/src/app/showcase/doc/tooltip/positiondoc.ts
@@ -18,8 +18,7 @@ import { Code } from '../../domain/code';
 })
 export class PositionDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="right" placeholder="Right">
+        basic: `<input type="text" pInputText pTooltip="Enter your username" tooltipPosition="right" placeholder="Right">
 <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="left" placeholder="Left">
 <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="top" placeholder="Top">
 <input type="text" pInputText pTooltip="Enter your username" tooltipPosition="bottom" placeholder="Bottom">`,
diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts
index 6323882eae1..570f25e8c4c 100644
--- a/src/app/showcase/doc/tooltip/templatedoc.ts
+++ b/src/app/showcase/doc/tooltip/templatedoc.ts
@@ -21,8 +21,7 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `
-<input type="text" pInputText [pTooltip]="tooltipContent" placeholder="hover to display tooltip">
+        basic: `<input type="text" pInputText [pTooltip]="tooltipContent" placeholder="hover to display tooltip">
 
 <ng-template #tooltipContent>
     <div class="flex align-items-center">
diff --git a/src/app/showcase/doc/tree/basicdoc.ts b/src/app/showcase/doc/tree/basicdoc.ts
index 5c9b5ddae84..e761f4b4dca 100644
--- a/src/app/showcase/doc/tree/basicdoc.ts
+++ b/src/app/showcase/doc/tree/basicdoc.ts
@@ -25,8 +25,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree class="w-full md:w-30rem" [value]="files"></p-tree>`,
+        basic: `<p-tree class="w-full md:w-30rem" [value]="files"></p-tree>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tree/checkboxdoc.ts b/src/app/showcase/doc/tree/checkboxdoc.ts
index fc26a4d08b9..91fbcff9a46 100644
--- a/src/app/showcase/doc/tree/checkboxdoc.ts
+++ b/src/app/showcase/doc/tree/checkboxdoc.ts
@@ -27,8 +27,7 @@ export class CheckboxDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree [value]="files" selectionMode="checkbox" class="w-full md:w-30rem" [(selection)]="selectedFiles"></p-tree>`,
+        basic: `<p-tree [value]="files" selectionMode="checkbox" class="w-full md:w-30rem" [(selection)]="selectedFiles"></p-tree>`,
 
         html: `
 <div class="card flex flex-column align-items-center justify-content-center">
diff --git a/src/app/showcase/doc/tree/contextmenudoc.ts b/src/app/showcase/doc/tree/contextmenudoc.ts
index 63a6a7b2c0e..e80fb64a40e 100644
--- a/src/app/showcase/doc/tree/contextmenudoc.ts
+++ b/src/app/showcase/doc/tree/contextmenudoc.ts
@@ -45,8 +45,7 @@ export class ContextMenuDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree class="w-full md:w-30rem" [value]="files" selectionMode="single" [(selection)]="selectedFile" [contextMenu]="cm"></p-tree>
+        basic: `<p-tree class="w-full md:w-30rem" [value]="files" selectionMode="single" [(selection)]="selectedFile" [contextMenu]="cm"></p-tree>
 <p-contextMenu #cm [model]="items"></p-contextMenu>
 <p-toast></p-toast>`,
 
diff --git a/src/app/showcase/doc/tree/controlleddoc.ts b/src/app/showcase/doc/tree/controlleddoc.ts
index 0ee07b687e3..3f4fe46873c 100644
--- a/src/app/showcase/doc/tree/controlleddoc.ts
+++ b/src/app/showcase/doc/tree/controlleddoc.ts
@@ -50,8 +50,7 @@ export class ControlledDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="mb-3">
+        basic: `<div class="mb-3">
     <button pButton type="button" label="Expand all" (click)="expandAll()" class="mr-2"></button>
     <button pButton type="button" label="Collapse all" (click)="collapseAll()"></button>
 </div>
diff --git a/src/app/showcase/doc/tree/dragdropdoc.ts b/src/app/showcase/doc/tree/dragdropdoc.ts
index 08280ddef11..78735388146 100644
--- a/src/app/showcase/doc/tree/dragdropdoc.ts
+++ b/src/app/showcase/doc/tree/dragdropdoc.ts
@@ -26,8 +26,7 @@ export class DragDropDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree class="w-full md:w-30rem" [value]="files" [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self"></p-tree>`,
+        basic: `<p-tree class="w-full md:w-30rem" [value]="files" [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self"></p-tree>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tree/eventdoc.ts b/src/app/showcase/doc/tree/eventdoc.ts
index 22bb814989d..a8f99b7f5eb 100644
--- a/src/app/showcase/doc/tree/eventdoc.ts
+++ b/src/app/showcase/doc/tree/eventdoc.ts
@@ -54,8 +54,7 @@ export class EventDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree [value]="files" class="w-full md:w-30rem" selectionMode="single" [(selection)]="selectedFile"
+        basic: `<p-tree [value]="files" class="w-full md:w-30rem" selectionMode="single" [(selection)]="selectedFile"
     (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)" (onNodeSelect)="nodeSelect($event)"(onNodeUnselect)="nodeUnselect($event)"></p-tree>`,
 
         html: `
diff --git a/src/app/showcase/doc/tree/filterdoc.ts b/src/app/showcase/doc/tree/filterdoc.ts
index 9c0bf60113e..6382cccad50 100644
--- a/src/app/showcase/doc/tree/filterdoc.ts
+++ b/src/app/showcase/doc/tree/filterdoc.ts
@@ -30,8 +30,7 @@ export class FilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree [value]="files" class="w-full md:w-30rem" [filter]="true" filterPlaceholder="Lenient Filter"></p-tree>
+        basic: `<p-tree [value]="files" class="w-full md:w-30rem" [filter]="true" filterPlaceholder="Lenient Filter"></p-tree>
 <p-tree [value]="files" class="w-full md:w-30rem" [filter]="true" filterMode="strict" filterPlaceholder="Strict Filter"></p-tree>`,
 
         html: `
diff --git a/src/app/showcase/doc/tree/lazydoc.ts b/src/app/showcase/doc/tree/lazydoc.ts
index 4521504afa0..62a47f6cc6e 100644
--- a/src/app/showcase/doc/tree/lazydoc.ts
+++ b/src/app/showcase/doc/tree/lazydoc.ts
@@ -45,8 +45,7 @@ export class LazyDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree class="w-full md:w-30rem" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>`,
+        basic: `<p-tree class="w-full md:w-30rem" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tree/multipledoc.ts b/src/app/showcase/doc/tree/multipledoc.ts
index f1afd416832..6c123b56d48 100644
--- a/src/app/showcase/doc/tree/multipledoc.ts
+++ b/src/app/showcase/doc/tree/multipledoc.ts
@@ -37,8 +37,7 @@ export class MultipleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<div class="flex align-items-center mb-4 gap-2">
+        basic: `<div class="flex align-items-center mb-4 gap-2">
     <p-inputSwitch inputId="input-metakey" [(ngModel)]="metaKeySelection"></p-inputSwitch>
     <label for="input-metakey">MetaKey</label>
 </div>
diff --git a/src/app/showcase/doc/tree/singledoc.ts b/src/app/showcase/doc/tree/singledoc.ts
index dbc498ab76a..bfd7f39fb11 100644
--- a/src/app/showcase/doc/tree/singledoc.ts
+++ b/src/app/showcase/doc/tree/singledoc.ts
@@ -27,8 +27,7 @@ export class SingleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree [value]="files" class="w-full md:w-30rem" selectionMode="single" [(selection)]="selectedFile"></p-tree>`,
+        basic: `<p-tree [value]="files" class="w-full md:w-30rem" selectionMode="single" [(selection)]="selectedFile"></p-tree>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/tree/templatedoc.ts b/src/app/showcase/doc/tree/templatedoc.ts
index 50de1b29514..9082519c7de 100644
--- a/src/app/showcase/doc/tree/templatedoc.ts
+++ b/src/app/showcase/doc/tree/templatedoc.ts
@@ -50,8 +50,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-tree [value]="nodes" class="w-full md:w-30rem">
+        basic: `<p-tree [value]="nodes" class="w-full md:w-30rem">
     <ng-template let-node pTemplate="url">
          <a [href]="node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ node.label }}</a>
     </ng-template>
diff --git a/src/app/showcase/doc/treeselect/basicdoc.ts b/src/app/showcase/doc/treeselect/basicdoc.ts
index 4d5e18bd37a..2db58b69c2a 100644
--- a/src/app/showcase/doc/treeselect/basicdoc.ts
+++ b/src/app/showcase/doc/treeselect/basicdoc.ts
@@ -25,8 +25,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `
-<p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item"></p-treeSelect>`,
+        basic: `<p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item"></p-treeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/treeselect/checkboxdoc.ts b/src/app/showcase/doc/treeselect/checkboxdoc.ts
index 515c0b07f98..8fb72f46dd5 100644
--- a/src/app/showcase/doc/treeselect/checkboxdoc.ts
+++ b/src/app/showcase/doc/treeselect/checkboxdoc.ts
@@ -24,8 +24,7 @@ export class CheckboxDoc {
     }
 
     code: Code = {
-        basic: `
-<p-treeSelect class="w-full md:w-20rem" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" display="chip" [metaKeySelection]="false" selectionMode="checkbox" placeholder="Select Item"></p-treeSelect>`,
+        basic: `<p-treeSelect class="w-full md:w-20rem" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" display="chip" [metaKeySelection]="false" selectionMode="checkbox" placeholder="Select Item"></p-treeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/treeselect/disableddoc.ts b/src/app/showcase/doc/treeselect/disableddoc.ts
index 5719bad0c11..f156d0c3c87 100644
--- a/src/app/showcase/doc/treeselect/disableddoc.ts
+++ b/src/app/showcase/doc/treeselect/disableddoc.ts
@@ -24,8 +24,7 @@ export class DisabledDoc {
     }
 
     code: Code = {
-        basic: `
-<p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" [disabled]="true" placeholder="Select Item"></p-treeSelect>`,
+        basic: `<p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" [disabled]="true" placeholder="Select Item"></p-treeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/treeselect/filterdoc.ts b/src/app/showcase/doc/treeselect/filterdoc.ts
index 6c2ff5731dd..5828cbce9cb 100644
--- a/src/app/showcase/doc/treeselect/filterdoc.ts
+++ b/src/app/showcase/doc/treeselect/filterdoc.ts
@@ -28,8 +28,7 @@ export class FilterDoc {
     }
 
     code: Code = {
-        basic: `
-<p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item" [filter]="true" [filterInputAutoFocus]="true"></p-treeSelect>`,
+        basic: `<p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item" [filter]="true" [filterInputAutoFocus]="true"></p-treeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/treeselect/floatlabeldoc.ts b/src/app/showcase/doc/treeselect/floatlabeldoc.ts
index d15e10576a8..b0c77335465 100644
--- a/src/app/showcase/doc/treeselect/floatlabeldoc.ts
+++ b/src/app/showcase/doc/treeselect/floatlabeldoc.ts
@@ -27,8 +27,7 @@ export class FloatLabelDoc {
     }
 
     code: Code = {
-        basic: `
-<span class="p-float-label md:w-20rem w-full">
+        basic: `<span class="p-float-label md:w-20rem w-full">
     <p-treeSelect containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item"></p-treeSelect>
     <label for="treeselect">TreeSelect</label>
 </span>`,
diff --git a/src/app/showcase/doc/treeselect/invaliddoc.ts b/src/app/showcase/doc/treeselect/invaliddoc.ts
index 1e30d000b61..a51c6987dac 100644
--- a/src/app/showcase/doc/treeselect/invaliddoc.ts
+++ b/src/app/showcase/doc/treeselect/invaliddoc.ts
@@ -24,8 +24,7 @@ export class InvalidDoc {
     }
 
     code: Code = {
-        basic: `
-<p-treeSelect class="md:w-20rem w-full ng-invalid ng-dirty" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item"></p-treeSelect>`,
+        basic: `<p-treeSelect class="md:w-20rem w-full ng-invalid ng-dirty" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" placeholder="Select Item"></p-treeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/treeselect/multipledoc.ts b/src/app/showcase/doc/treeselect/multipledoc.ts
index 08d625fbcc1..f9cab49decd 100644
--- a/src/app/showcase/doc/treeselect/multipledoc.ts
+++ b/src/app/showcase/doc/treeselect/multipledoc.ts
@@ -37,8 +37,7 @@ export class MultipleDoc {
     };
 
     code: Code = {
-        basic: `
-<p-treeSelect class="w-full md:w-20rem" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" [metaKeySelection]="false" selectionMode="multiple" placeholder="Select Item"></p-treeSelect>`,
+        basic: `<p-treeSelect class="w-full md:w-20rem" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" [metaKeySelection]="false" selectionMode="multiple" placeholder="Select Item"></p-treeSelect>`,
 
         html: `
 <div class="card flex justify-content-center">
diff --git a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts
index e173ec5bee2..4ebf14d1b2a 100644
--- a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts
@@ -33,8 +33,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup">
+        basic: `<form [formGroup]="formGroup">
     <p-treeSelect class="md:w-20rem w-full" containerStyleClass="w-full" formControlName="selectedNodes" [options]="nodes" placeholder="Select Item"></p-treeSelect>
 </form>`,
 
diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts
index e5ec27cef3e..3c81eafe7ec 100644
--- a/src/app/showcase/doc/treetable/basicdoc.ts
+++ b/src/app/showcase/doc/treetable/basicdoc.ts
@@ -45,8 +45,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th>Name</th>
diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts
index 77e5ed02d44..c5f30251eb6 100644
--- a/src/app/showcase/doc/treetable/columngroupdoc.ts
+++ b/src/app/showcase/doc/treetable/columngroupdoc.ts
@@ -173,8 +173,7 @@ export class ColumnGroupDoc implements OnInit {
         ];
     }
     code: Code = {
-        basic: `
-<p-treeTable [value]="sales" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="sales" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header">
         <tr>
             <th rowspan="3">Brand</th>
diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
index dafdcd0d75f..15b5e6788c5 100644
--- a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
+++ b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
@@ -53,8 +53,7 @@ export class ResizeExpandDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns" ttResizableColumn>
diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts
index 183646fa6c6..53912fdaee6 100644
--- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts
+++ b/src/app/showcase/doc/treetable/columnresizefitdoc.ts
@@ -53,8 +53,7 @@ export class ResizeFitDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns" ttResizableColumn>
diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
index e3893925aa3..f2941374e85 100644
--- a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
+++ b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
@@ -58,8 +58,7 @@ export class ResizeScrollableDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [scrollable]="true" scrollHeight="200px">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [scrollable]="true" scrollHeight="200px">
     <ng-template pTemplate="colgroup" let-columns>
         <colgroup>
             <col *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts
index f36eceeb0cf..98b5f776256 100644
--- a/src/app/showcase/doc/treetable/columntoggledoc.ts
+++ b/src/app/showcase/doc/treetable/columntoggledoc.ts
@@ -63,8 +63,7 @@ export class ColumnToggleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="selectedColumns" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="selectedColumns" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="caption">
         <div style="text-align:left">
             <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ width: '20em' }" defaultLabel="Choose Columns" display="chip"></p-multiSelect>
diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts
index cd60394bb71..1af9ba4dfe1 100644
--- a/src/app/showcase/doc/treetable/conditionalstyledoc.ts
+++ b/src/app/showcase/doc/treetable/conditionalstyledoc.ts
@@ -53,8 +53,7 @@ export class ConditionalStyleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/contextmenudoc.ts b/src/app/showcase/doc/treetable/contextmenudoc.ts
index f1757198272..8cbd54bcf53 100644
--- a/src/app/showcase/doc/treetable/contextmenudoc.ts
+++ b/src/app/showcase/doc/treetable/contextmenudoc.ts
@@ -77,8 +77,7 @@ export class ContextMenuDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-toast [style]="{ marginTop: '80px' }"></p-toast>
+        basic: `<p-toast [style]="{ marginTop: '80px' }"></p-toast>
 
 <p-treeTable [value]="files" [columns]="cols" dataKey="name" [(contextMenuSelection)]="selectedNode" [contextMenu]="cm" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
diff --git a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts
index 190b6b8b84f..30d0ecdf073 100644
--- a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts
+++ b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts
@@ -53,8 +53,7 @@ export class DynamicColumnsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts
index 10d348a0f66..0d3118213f1 100644
--- a/src/app/showcase/doc/treetable/editdoc.ts
+++ b/src/app/showcase/doc/treetable/editdoc.ts
@@ -58,8 +58,7 @@ export class EditDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/filterdoc.ts b/src/app/showcase/doc/treetable/filterdoc.ts
index 7bd4c6e6cfa..2d7e7b1664b 100644
--- a/src/app/showcase/doc/treetable/filterdoc.ts
+++ b/src/app/showcase/doc/treetable/filterdoc.ts
@@ -84,8 +84,7 @@ export class FilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-selectButton [options]="filterModes" [(ngModel)]="filterMode" optionLabel="label" optionValue="value"></p-selectButton>
+        basic: `<p-selectButton [options]="filterModes" [(ngModel)]="filterMode" optionLabel="label" optionValue="value"></p-selectButton>
 
 <p-treeTable #tt [value]="files" [columns]="cols" [filterMode]="filterMode" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="caption">
diff --git a/src/app/showcase/doc/treetable/lazyloaddoc.ts b/src/app/showcase/doc/treetable/lazyloaddoc.ts
index 1d93112e2b0..e6858722776 100644
--- a/src/app/showcase/doc/treetable/lazyloaddoc.ts
+++ b/src/app/showcase/doc/treetable/lazyloaddoc.ts
@@ -131,8 +131,7 @@ export class LazyLoadDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [lazy]="true" (onLazyLoad)="loadNodes($event)" [totalRecords]="1000" [loading]="loading" (onNodeExpand)="onNodeExpand($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [lazy]="true" (onLazyLoad)="loadNodes($event)" [totalRecords]="1000" [loading]="loading" (onNodeExpand)="onNodeExpand($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts
index 58ea013e3b8..88a78404452 100644
--- a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts
+++ b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts
@@ -66,8 +66,7 @@ export class PaginatorBasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
index e9215acdcce..1ef3fa50274 100644
--- a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
+++ b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
@@ -71,8 +71,7 @@ export class PaginatorLocaleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable paginatorLocale="fa-IR" [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable paginatorLocale="fa-IR" [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
index 1a9f78f2273..4e75fc931e7 100644
--- a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
+++ b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts
@@ -81,8 +81,7 @@ export class PaginatorTemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/reorderdoc.ts b/src/app/showcase/doc/treetable/reorderdoc.ts
index ffb1cf8907e..21ffaa4327d 100644
--- a/src/app/showcase/doc/treetable/reorderdoc.ts
+++ b/src/app/showcase/doc/treetable/reorderdoc.ts
@@ -53,8 +53,7 @@ export class ReorderDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [reorderableColumns]="true" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [reorderableColumns]="true" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns" ttReorderableColumn>
diff --git a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts
index caafd7b87e1..f0cc1023a8a 100644
--- a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts
+++ b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts
@@ -80,8 +80,7 @@ export class FrozenColumnsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="scrollableCols" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="250px" frozenWidth="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="scrollableCols" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="250px" frozenWidth="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="colgroup" let-columns>
         <colgroup>
             <col *ngFor="let col of columns" style="width:250px" />
diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
index 8da6b77847f..b99da88c65a 100644
--- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
+++ b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
@@ -58,8 +58,7 @@ export class ScrollHorizontalDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="colgroup" let-columns>
         <colgroup>
             <col *ngFor="let col of columns" style="width:500px" />
diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/src/app/showcase/doc/treetable/scrollverticaldoc.ts
index 2974cf8970d..b813a765951 100644
--- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts
+++ b/src/app/showcase/doc/treetable/scrollverticaldoc.ts
@@ -54,8 +54,7 @@ export class ScrollVerticalDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
index eec385c944d..b96e696ef78 100644
--- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
+++ b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
@@ -64,8 +64,7 @@ export class SelectionCheckboxDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedNodes" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedNodes" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="caption">
         <div class="flex">
             <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
diff --git a/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/src/app/showcase/doc/treetable/selectioneventscdoc.ts
index 12046b55ca4..066280489b4 100644
--- a/src/app/showcase/doc/treetable/selectioneventscdoc.ts
+++ b/src/app/showcase/doc/treetable/selectioneventscdoc.ts
@@ -81,8 +81,7 @@ export class SelectionEventsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/src/app/showcase/doc/treetable/selectionmultipledoc.ts
index f7661123e13..d21af18f339 100644
--- a/src/app/showcase/doc/treetable/selectionmultipledoc.ts
+++ b/src/app/showcase/doc/treetable/selectionmultipledoc.ts
@@ -66,8 +66,7 @@ export class SelectionMultipleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-inputSwitch [(ngModel)]="metaKeySelection"></p-inputSwitch>
+        basic: `<p-inputSwitch [(ngModel)]="metaKeySelection"></p-inputSwitch>
 <p-treeTable [value]="files" [columns]="cols" selectionMode="multiple" [(selection)]="selectedNodes" dataKey="name" [metaKeySelection]="metaKeySelection" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
diff --git a/src/app/showcase/doc/treetable/selectionsingledoc.ts b/src/app/showcase/doc/treetable/selectionsingledoc.ts
index 1936ec2e676..2fdf6c6931e 100644
--- a/src/app/showcase/doc/treetable/selectionsingledoc.ts
+++ b/src/app/showcase/doc/treetable/selectionsingledoc.ts
@@ -66,8 +66,7 @@ export class SelectionSingleDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns">
diff --git a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts
index 28d33874f1c..701a585d063 100644
--- a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts
+++ b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts
@@ -55,8 +55,7 @@ export class SortMultipleColumnDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" sortMode="multiple" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" sortMode="multiple" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns" [ttSortableColumn]="col.field">
diff --git a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
index b92d00dd312..78b443fa9ed 100644
--- a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
+++ b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
@@ -55,8 +55,7 @@ export class SortSingleColumnDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th *ngFor="let col of columns" [ttSortableColumn]="col.field">
diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts
index a432c5edd57..2a622f327ae 100644
--- a/src/app/showcase/doc/treetable/templatedoc.ts
+++ b/src/app/showcase/doc/treetable/templatedoc.ts
@@ -66,8 +66,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        basic: `<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
     <ng-template pTemplate="caption"> FileViewer </ng-template>
     <ng-template pTemplate="header" let-columns>
         <tr>
diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
index 401e132a4aa..820ad42ba73 100644
--- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
@@ -18,8 +18,7 @@ export class BasicDoc {
     value: boolean | null = null;
 
     code: Code = {
-        basic: `
-<p-triStateCheckbox class="p-tristatecheckbox-label" [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
+        basic: `<p-triStateCheckbox class="p-tristatecheckbox-label" [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
 
         html: `
 <div class="card flex flex-column gap-3 align-items-center">
diff --git a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts
index 644caae50af..75a5d381ea9 100644
--- a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts
@@ -18,8 +18,7 @@ export class DisabledDoc {
     value!: string;
 
     code: Code = {
-        basic: `
-<p-triStateCheckbox [(ngModel)]="value" [disabled]="true"></p-triStateCheckbox>`,
+        basic: `<p-triStateCheckbox [(ngModel)]="value" [disabled]="true"></p-triStateCheckbox>`,
 
         html: `
 <div class="card flex flex-column gap-3 align-items-center">
diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
index dc86f009e48..d1d6dbc6467 100644
--- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
@@ -27,8 +27,7 @@ export class ReactiveFormsDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
+        basic: `<form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
     <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
     <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
 </form>`,
diff --git a/src/app/showcase/doc/virtualscroller/basicdoc.ts b/src/app/showcase/doc/virtualscroller/basicdoc.ts
index c5d175d9d3c..47b5166fc04 100644
--- a/src/app/showcase/doc/virtualscroller/basicdoc.ts
+++ b/src/app/showcase/doc/virtualscroller/basicdoc.ts
@@ -36,8 +36,7 @@ export class BasicDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-virtualScroller [value]="items" class="border-1 surface-border border-round" [style]="{'width': '200px'}" scrollHeight="200px" [itemSize]="50">
+        basic: `<p-virtualScroller [value]="items" class="border-1 surface-border border-round" [style]="{'width': '200px'}" scrollHeight="200px" [itemSize]="50">
     <ng-template pTemplate="item" let-item>
         <div class="flex align-items-center p-2 h-full" [ngClass]="{ 'surface-hover': item.index % 2 === 0 }">
             {{ item.label }}
diff --git a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts
index b9f39a7a99b..0776bb251a3 100644
--- a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts
+++ b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts
@@ -85,8 +85,7 @@ export class LazyLoadDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-virtualScroller [value]="virtualProducts" scrollHeight="450px" [itemSize]="100" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
+        basic: `<p-virtualScroller [value]="virtualProducts" scrollHeight="450px" [itemSize]="100" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
     <ng-template pTemplate="header"> List of Products </ng-template>
     <ng-template let-product pTemplate="item">
         <div class="flex align-items-center p-3 w-full flex-wrap">
diff --git a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts
index 4dd3f386052..34272c6e320 100644
--- a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts
+++ b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts
@@ -41,8 +41,7 @@ export class ProgrammaticScrollDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-button label="Reset" (click)="reset()"></p-button>
+        basic: `<p-button label="Reset" (click)="reset()"></p-button>
 <p-virtualScroller #vs [value]="items" class="border-1 surface-border border-round" [style]="{ width: '200px' }" scrollHeight="200px" [itemSize]="50">
     <ng-template pTemplate="item" let-item>
         <div class="flex align-items-center p-2 h-full" [ngClass]="{ 'surface-hover': item.index % 2 === 0 }">
diff --git a/src/app/showcase/doc/virtualscroller/templatedoc.ts b/src/app/showcase/doc/virtualscroller/templatedoc.ts
index 5b5fd113da8..a139b4830c8 100644
--- a/src/app/showcase/doc/virtualscroller/templatedoc.ts
+++ b/src/app/showcase/doc/virtualscroller/templatedoc.ts
@@ -36,8 +36,7 @@ export class TemplateDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `
-<p-virtualScroller [value]="items" class="border-1 surface-border border-round" [style]="{ width: '200px' }" scrollHeight="200px" [itemSize]="50">
+        basic: `<p-virtualScroller [value]="items" class="border-1 surface-border border-round" [style]="{ width: '200px' }" scrollHeight="200px" [itemSize]="50">
     <ng-template pTemplate="header">Header Content</ng-template>
     <ng-template pTemplate="item" let-item>
         <div class="flex align-items-center p-2 h-full" [ngClass]="{ 'surface-hover': item.index % 2 === 0 }">