examples updated

primefaces · Mar 21, 2024 · 0d18ed1 · 0d18ed1
1 parent 9294b39
commit 0d18ed1
Show file tree

Hide file tree

Showing 12 changed files with 274 additions and 298 deletions.
diff --git a/src/app/showcase/doc/floatlabel/basicdoc.ts b/src/app/showcase/doc/floatlabel/basicdoc.ts
@@ -21,15 +21,15 @@ export class BasicDoc {
 
     code: Code = {
         basic: `<p-floatLabel>
-<input id="username" type="text" pInputText [(ngModel)]="value" />
-<label for="username">Username</label>
+    <input id="username" type="text" pInputText [(ngModel)]="value" />
+    <label for="username">Username</label>
 </p-floatLabel>`,
 
         html: `<div class="card flex justify-content-center">
-<p-floatLabel>
-<input id="username" type="text" pInputText [(ngModel)]="value" />
-<label for="username">Username</label>
-</p-floatLabel>
+    <p-floatLabel>
+        <input id="username" type="text" pInputText [(ngModel)]="value" />
+        <label for="username">Username</label>
+    </p-floatLabel>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts
@@ -33,22 +33,24 @@ export class BasicDoc {
     <p-inputIcon styleClass="pi pi-spinner pi-spin" />
     <input type="text" pInputText />
 </p-iconField>`,
+
         html: `<div class="card flex flex-wrap justify-content-center gap-3">
     <p-iconField iconPosition="left">
-    <p-inputIcon styleClass="pi pi-search" />
-    <input type="text" pInputText placeholder="Search" />
-</p-iconField>
-<p-iconField iconPosition="right">
-    <p-inputIcon styleClass="pi pi-spinner pi-spin" />
-    <input type="text" pInputText />
-</p-iconField>
+        <p-inputIcon styleClass="pi pi-search" />
+        <input type="text" pInputText placeholder="Search" />
+    </p-iconField>
+    <p-iconField iconPosition="right">
+        <p-inputIcon styleClass="pi pi-spinner pi-spin" />
+        <input type="text" pInputText />
+    </p-iconField>
 </div>`,
+
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'iconField-basic-demo',
-    templateUrl: './iconField-basic-demo.html'
+    selector: 'iconfield-basic-demo',
+    templateUrl: './iconfield-basic-demo.html'
 })
 export class IconFieldBasicDemo {}`
     };

diff --git a/src/app/showcase/doc/iconfield/templatedoc.ts b/src/app/showcase/doc/iconfield/templatedoc.ts
@@ -43,80 +43,80 @@ import { Code } from '../../domain/code';
                 <input type="text" pInputText placeholder="Search" />
             </p-iconField>
         </div>
-        <app-code [code]="code" selector="image-template-demo"></app-code>
+        <app-code [code]="code" selector="iconfield-template-demo"></app-code>
     `
 })
 export class TemplateDoc {
     code: Code = {
         basic: `<p-iconField iconPosition="left">
-<p-inputIcon>
-<svg width="20" height="20" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
-    <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
-        <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
-    </mask>
-    <g mask="url(#mask0_1_36)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
-    </g>
-    <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
-    <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
-        fill="var(--primary-color-text)"
-    />
-    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
-        fill="var(--primary-color-text)"
-    />
-    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
-    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
-    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
-    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
-</svg>
-</p-inputIcon>
-<input type="text" pInputText placeholder="Search" />
+    <p-inputIcon>
+        <svg width="20" height="20" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
+            <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
+                <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
+            </mask>
+            <g mask="url(#mask0_1_36)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
+            </g>
+            <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
+            <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
+                fill="var(--primary-color-text)"
+            />
+            <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
+            <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
+                fill="var(--primary-color-text)"
+            />
+            <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
+            <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
+            <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
+            <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
+        </svg>
+    </p-inputIcon>
+    <input type="text" pInputText placeholder="Search" />
 </p-iconField>`,
 
         html: `<div class="card flex justify-content-center">
-<p-iconField iconPosition="left">
-<p-inputIcon>
-<svg width="20" height="20" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
-    <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
-        <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
-    </mask>
-    <g mask="url(#mask0_1_36)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
-    </g>
-    <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
-    <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
-        fill="var(--primary-color-text)"
-    />
-    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
-        fill="var(--primary-color-text)"
-    />
-    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
-    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
-    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
-    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
-</svg>
-</p-inputIcon>
-<input type="text" pInputText placeholder="Search" />
+    <p-iconField iconPosition="left">
+    <p-inputIcon>
+        <svg width="20" height="20" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
+            <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
+                <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
+            </mask>
+            <g mask="url(#mask0_1_36)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
+            </g>
+            <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
+            <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
+                fill="var(--primary-color-text)"
+            />
+            <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
+            <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
+                fill="var(--primary-color-text)"
+            />
+            <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
+            <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
+            <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
+            <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
+        </svg>
+    </p-inputIcon>
+    <input type="text" pInputText placeholder="Search" />
 </p-iconField>
 </div>`,
 

diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts
@@ -14,13 +14,11 @@ import { Code } from '../../domain/code';
                 </p-inputGroupAddon>
                 <input pInputText placeholder="Username" />
             </p-inputGroup>
-
             <p-inputGroup>
                 <p-inputGroupAddon>$</p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Price" />
                 <p-inputGroupAddon>.00</p-inputGroupAddon>
             </p-inputGroup>
-
             <p-inputGroup>
                 <p-inputGroupAddon>www</p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Website" />
@@ -37,36 +35,32 @@ export class BasicDoc {
     </p-inputGroupAddon>
     <input pInputText placeholder="Username" />
 </p-inputGroup>
-
 <p-inputGroup>
     <p-inputGroupAddon>$</p-inputGroupAddon>
     <input type="text" pInputText placeholder="Price" />
     <p-inputGroupAddon>.00</p-inputGroupAddon>
 </p-inputGroup>
-
 <p-inputGroup>
     <p-inputGroupAddon>www</p-inputGroupAddon>
     <input type="text" pInputText placeholder="Website" />
 </p-inputGroup>`,
 
         html: `<div class="card flex flex-column md:flex-row gap-3">
-<p-inputGroup>
-    <p-inputGroupAddon>
-        <i class="pi pi-user"></i>
-    </p-inputGroupAddon>
-    <input pInputText placeholder="Username" />
-</p-inputGroup>
-
-<p-inputGroup>
-    <p-inputGroupAddon>$</p-inputGroupAddon>
-    <input type="text" pInputText placeholder="Price" />
-    <p-inputGroupAddon>.00</p-inputGroupAddon>
-</p-inputGroup>
-
-<p-inputGroup>
-    <p-inputGroupAddon>www</p-inputGroupAddon>
-    <input type="text" pInputText placeholder="Website" />
-</p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>
+            <i class="pi pi-user"></i>
+        </p-inputGroupAddon>
+        <input pInputText placeholder="Username" />
+    </p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>$</p-inputGroupAddon>
+        <input type="text" pInputText placeholder="Price" />
+        <p-inputGroupAddon>.00</p-inputGroupAddon>
+    </p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>www</p-inputGroupAddon>
+        <input type="text" pInputText placeholder="Website" />
+    </p-inputGroup>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts
@@ -12,12 +12,10 @@ import { Code } from '../../domain/code';
                 <button type="button" pButton label="Search"></button>
                 <input type="text" pInputText placeholder="Keyword" />
             </p-inputGroup>
-
             <p-inputGroup>
                 <input type="text" pInputText placeholder="Keyword" />
                 <button type="button" pButton icon="pi pi-search" class="p-button-warning"></button>
             </p-inputGroup>
-
             <p-inputGroup>
                 <button type="button" pButton icon="pi pi-check" class="p-button-success"></button>
                 <input type="text" pInputText placeholder="Vote" />
@@ -30,31 +28,28 @@ import { Code } from '../../domain/code';
 export class ButtonDoc {
     code: Code = {
         basic: `<p-inputGroup>
-        <button type="button" pButton label="Search"></button>
-        <input type="text" pInputText placeholder="Keyword" />
-        </p-inputGroup>
-
-        <p-inputGroup>
-        <input type="text" pInputText placeholder="Keyword" />
-        <button type="button" pButton icon="pi pi-search" class="p-button-warning"></button>
-        </p-inputGroup>
-
-        <p-inputGroup>
-        <button type="button" pButton icon="pi pi-check" class="p-button-success"></button>
-        <input type="text" pInputText placeholder="Vote" />
-        <button type="button" pButton icon="pi pi-times" class="p-button-danger"></button>
+    <button type="button" pButton label="Search"></button>
+    <input type="text" pInputText placeholder="Keyword" />
+</p-inputGroup>
+<p-inputGroup>
+    <input type="text" pInputText placeholder="Keyword" />
+    <button type="button" pButton icon="pi pi-search" class="p-button-warning"></button>
+</p-inputGroup>
+<p-inputGroup>
+    <button type="button" pButton icon="pi pi-check" class="p-button-success"></button>
+    <input type="text" pInputText placeholder="Vote" />
+    <button type="button" pButton icon="pi pi-times" class="p-button-danger"></button>
 </p-inputGroup>`,
+
         html: `<div class="card flex flex-column md:flex-row gap-3">
     <p-inputGroup>
         <button type="button" pButton label="Search"></button>
         <input type="text" pInputText placeholder="Keyword" />
     </p-inputGroup>
-
     <p-inputGroup>
         <input type="text" pInputText placeholder="Keyword" />
         <button type="button" pButton icon="pi pi-search" class="p-button-warning"></button>
     </p-inputGroup>
-
     <p-inputGroup>
         <button type="button" pButton icon="pi pi-check" class="p-button-success"></button>
         <input type="text" pInputText placeholder="Vote" />

diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts
@@ -12,12 +12,10 @@ import { Code } from '../../domain/code';
                 <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Username" />
             </p-inputGroup>
-
             <p-inputGroup>
                 <input type="text" pInputText placeholder="Price" />
                 <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
             </p-inputGroup>
-
             <p-inputGroup>
                 <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Website" />
@@ -39,12 +37,10 @@ export class CheckboxDoc {
     <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
     <input type="text" pInputText placeholder="Username" />
 </p-inputGroup>
-
 <p-inputGroup>
     <input type="text" pInputText placeholder="Price" />
     <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
 </p-inputGroup>
-
 <p-inputGroup>
     <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
     <input type="text" pInputText placeholder="Website" />
@@ -56,12 +52,10 @@ export class CheckboxDoc {
         <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
         <input type="text" pInputText placeholder="Username" />
     </p-inputGroup>
-
     <p-inputGroup>
         <input type="text" pInputText placeholder="Price" />
         <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
     </p-inputGroup>
-
     <p-inputGroup>
         <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
         <input type="text" pInputText placeholder="Website" />