Merge pull request #14211 from primefaces/showcase-update

Showcase update

angular.json

@@ -156,4 +156,4 @@
             }
         }
     }
-}
+}

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">

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">

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">

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>

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

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>

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

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

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">

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>

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">

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">

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">

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>`,

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">

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" />

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">

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>`,
 

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">

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>`,
 

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">

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">

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" /> 

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>`,

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>

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">

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>

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>

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">

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">

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: `

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>

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>

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>

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>

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>

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>

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>

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>