iconfield template doc added

primefaces · Feb 29, 2024 · 90830b2 · 90830b2
1 parent 3867518
commit 90830b2
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 11 deletions.
diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts
@@ -6,13 +6,17 @@ import { Code } from '../../domain/code';
     template: `
         <app-docsectiontext>
             <p>
-                A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default
-                value is right and also left option is available.
+                A group is created by wrapping the input and icon with the <i>IconField</i> component. Each icon is defined as a child of <i>InputIcon</i> component. In addition, position of the icon can be changed using <i>iconPosition</i> property
+                that the default value is <i>right</i> and also <i>left</i> option is available.
             </p>
         </app-docsectiontext>
-        <div class="card flex justify-content-center">
+        <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>
         </div>
@@ -22,14 +26,22 @@ import { Code } from '../../domain/code';
 export class BasicDoc {
     code: Code = {
         basic: `<p-iconField iconPosition="left">
-<p-inputIcon styleClass="pi pi-search" />
+    <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>`,
-        html: `<div class="card flex justify-content-center">
+        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 />
-    </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';

diff --git a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts
@@ -4,16 +4,17 @@ import { RouterModule } from '@angular/router';
 import { InputTextModule } from 'primeng/inputtext';
 import { AppDocModule } from '../../layout/doc/app.doc.module';
 import { AppCodeModule } from '../../layout/doc/app.code.component';
-import { BasicDoc } from './basicdoc';
 import { ImportDoc } from './importdoc';
+import { BasicDoc } from './basicdoc';
+import { TemplateDoc } from './templatedoc';
 import { IconFieldModule } from 'src/app/components/iconfield/iconfield';
 import { InputIconModule } from 'src/app/components/inputicon/inputicon';
 import { FormsModule } from '@angular/forms';
 import { AccessibilityDoc } from './accessibilitydoc';
 import { StyleDoc } from './styledoc';
 @NgModule({
     imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, InputTextModule, IconFieldModule, InputIconModule, FormsModule],
-    declarations: [BasicDoc, ImportDoc, AccessibilityDoc, StyleDoc],
+    declarations: [ImportDoc, BasicDoc, TemplateDoc, AccessibilityDoc, StyleDoc],
     exports: [AppDocModule]
 })
 export class IconFieldDocModule {}
diff --git a/src/app/showcase/doc/iconfield/templatedoc.ts b/src/app/showcase/doc/iconfield/templatedoc.ts
@@ -0,0 +1,132 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'template-doc',
+    template: `
+        <app-docsectiontext>
+            <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
+        </app-docsectiontext>
+        <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>
+        </div>
+        <app-code [code]="code" selector="image-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-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>
+</div>`,
+
+        typescript: `
+import { Component } from '@angular/core';
+        
+@Component({
+    selector: 'iconfield-template-demo',
+    templateUrl: './iconfield-template-demo.html'
+})
+export class IconFieldTemplateDemo {}`
+    };
+}
diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.ts b/src/app/showcase/pages/iconfield/iconfielddemo.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import { BasicDoc } from '../../doc/iconfield/basicdoc';
 import { ImportDoc } from '../../doc/iconfield/importdoc';
+import { BasicDoc } from '../../doc/iconfield/basicdoc';
+import { TemplateDoc } from '../../doc/iconfield/templatedoc';
 import { StyleDoc } from '../../doc/iconfield/styledoc';
 import { AccessibilityDoc } from '../../doc/iconfield/accessibilitydoc';
 
@@ -20,6 +21,11 @@ export class IconFieldDemo {
             label: 'Basic',
             component: BasicDoc
         },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
         {
             id: 'style',
             label: 'Style',