Merge branch 'primefaces:master' into master

pete-mcwilliams · Nov 28, 2023 · 2b97412 · 2b97412
2 parents e35491c + 65823e4
commit 2b97412
Show file tree

Hide file tree

Showing 636 changed files with 21,033 additions and 3,824 deletions.
diff --git a/angular.json b/angular.json
@@ -33,40 +33,13 @@
                         "outputPath": "dist/primeng/browser",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "polyfills": [
-                            "zone.js"
-                        ],
+                        "polyfills": ["zone.js"],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
-                        "assets": [
-                            "src/favicon.png",
-                            "src/assets",
-                            "src/showcase",
-                            "src/upload.php",
-                            "src/versions.json",
-                            "src/.htaccess"
-                        ],
-                        "styles": [
-                            "src/styles.scss",
-                            "node_modules/primeicons/primeicons.css"
-                        ],
-                        "scripts": [
-                            "./node_modules/prismjs/prism.js",
-                            "./node_modules/prismjs/components/prism-typescript.js",
-                            "./node_modules/prismjs/components/prism-scss.js",
-                            "./node_modules/prismjs/components/prism-bash.js"
-                        ],
-                        "allowedCommonJsDependencies": [
-                            "chart.js",
-                            "xlsx",
-                            "jspdf-autotable",
-                            "file-saver",
-                            "jspdf",
-                            "quill",
-                            "core-js",
-                            "raf",
-                            "rgbcolor"
-                        ]
+                        "assets": ["src/assets"],
+                        "styles": ["src/styles.scss"],
+                        "scripts": ["./node_modules/prismjs/prism.js", "./node_modules/prismjs/components/prism-typescript.js", "./node_modules/prismjs/components/prism-scss.js", "./node_modules/prismjs/components/prism-bash.js"],
+                        "allowedCommonJsDependencies": ["chart.js", "xlsx", "jspdf-autotable", "file-saver", "jspdf", "quill", "core-js", "raf", "rgbcolor"]
                     },
                     "configurations": {
                         "production": {
@@ -119,15 +92,8 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.spec.json",
                         "karmaConfig": "karma.conf.js",
-                        "assets": [
-                            "src/favicon.png",
-                            "src/assets",
-                            "src/upload.php"
-                        ],
-                        "styles": [
-                            "src/styles.scss",
-                            "src/assets/components/themes/lara-light-blue/theme.css"
-                        ],
+                        "assets": ["src/assets"],
+                        "styles": ["src/styles.scss", "src/assets/components/themes/lara-light-blue/theme.css"],
                         "scripts": []
                     }
                 },

diff --git a/src/app/showcase/data/news.json b/src/app/showcase/data/news.json
@@ -2,10 +2,6 @@
     "id": 59,
     "content": "🎉 Black Friday Sale! Up to 50% Off",
     "linkText": "Buy Now",
-    "linkHref": "https://www.primefaces.org/store",
-    "backgroundStyle": "background-color:#3B82F6",
-    "textStyle": "color:#ffffff;font-weight:500",
-    "linkStyle": "color:#ffffff;font-weight:700",
-    "linkHoverStyle": "text-decoration: underline"
+    "linkHref": "https://www.primefaces.org/store"
 }
 
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>