Merge pull request #14900 from primefaces/iconfield

Add IconField and InputIcon

angular.json

@@ -118,5 +118,8 @@
                 }
             }
         }
+    },
+    "cli": {
+      "analytics": false
     }
 }

src/app/components/iconfield/iconfield.css

@@ -0,0 +1,5 @@
+@layer primeng {
+    .p-icon-field {
+        position: relative;
+    }    
+}

src/app/components/iconfield/iconfield.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core';
+
+import { SharedModule } from 'primeng/api';
+
+/**
+ * IconField wraps an input and an icon.
+ * @group Components
+ */
+@Component({
+    selector: 'p-iconField',
+    template: ` <span class="p-icon-field" [ngClass]="containerClass"><ng-content></ng-content> </span>`,
+    styleUrl: './iconfield.css',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconField {
+    /**
+     * Position of the icon.
+     * @group Props
+     */
+    @Input() iconPosition: 'right' | 'left' = 'left';
+
+    get containerClass() {
+        return {
+            'p-icon-field-left': this.iconPosition === 'left',
+            'p-icon-field-right': this.iconPosition === 'right'
+        };
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [IconField, SharedModule],
+    declarations: [IconField]
+})
+export class IconFieldModule {}

src/app/components/iconfield/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/iconfield/public_api.ts

@@ -0,0 +1,2 @@
+export * from './iconfield';
+

src/app/components/inputicon/inputicon.css

@@ -0,0 +1,6 @@
+@layer primeng {
+    .p-fluid .p-icon-field-left,
+    .p-fluid .p-icon-field-right {
+        width: 100%;
+    }
+}

src/app/components/inputicon/inputicon.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+
+/**
+ * InputIcon displays an icon.
+ * @group Components
+ */
+@Component({
+    selector: 'p-inputIcon',
+    template: `<span class="p-input-icon" [ngClass]="styleClass"><ng-content></ng-content></span>`,
+    styleUrl: './inputicon.css',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InputIcon {
+    /**
+     * Style class of the element.
+     * @group Props
+     */
+    @Input() styleClass: string | undefined;
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [InputIcon, SharedModule],
+    declarations: [InputIcon]
+})
+export class InputIconModule {}

src/app/components/inputicon/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/inputicon/public_api.ts

@@ -0,0 +1 @@
+export * from './inputicon';

src/app/showcase/doc/apidoc/index.json

@@ -3102,6 +3102,12 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string"
+                        },
+                        {
+                            "name": "listLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
                         }
                     ]
                 }
@@ -3761,7 +3767,7 @@
                             "optional": false,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "false",
+                            "default": "true",
                             "description": "Whether to show the empty message or not."
                         },
                         {
@@ -4446,7 +4452,7 @@
                             "name": "severity",
                             "optional": false,
                             "readonly": false,
-                            "type": "\"success\" | \"warning\" | \"info\" | \"danger\"",
+                            "type": "\"success\" | \"info\" | \"warning\" | \"danger\"",
                             "description": "Severity type of the badge."
                         }
                     ]
@@ -4482,7 +4488,7 @@
                             "name": "severity",
                             "optional": false,
                             "readonly": false,
-                            "type": "\"success\" | \"warning\" | \"info\" | \"danger\"",
+                            "type": "\"success\" | \"info\" | \"warning\" | \"danger\"",
                             "description": "Severity type of the badge."
                         },
                         {
@@ -9554,8 +9560,7 @@
                             "name": "placeholder",
                             "optional": false,
                             "readonly": false,
-                            "type": "string",
-                            "description": "Default text to display when no option is selected."
+                            "type": "Signal<string>"
                         },
                         {
                             "name": "filterPlaceholder",
@@ -10026,6 +10031,16 @@
                             "name": "focus",
                             "parameters": [],
                             "description": "Applies focus."
+                        },
+                        {
+                            "name": "clear",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "Event"
+                                }
+                            ],
+                            "description": "Clears the model."
                         }
                     ]
                 }
@@ -12082,6 +12097,26 @@
             }
         }
     },
+    "iconfield": {
+        "components": {
+            "IconField": {
+                "description": "IconField wraps an input and an icon.",
+                "props": {
+                    "description": "Defines the input properties of the component.",
+                    "values": [
+                        {
+                            "name": "iconPosition",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "left",
+                            "description": "Position of the icon."
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "angledoubledown": {
         "components": {}
     },
@@ -12657,6 +12692,25 @@
             }
         }
     },
+    "inputicon": {
+        "components": {
+            "InputIcon": {
+                "description": "InputIcon displays an icon.",
+                "props": {
+                    "description": "Defines the input properties of the component.",
+                    "values": [
+                        {
+                            "name": "styleClass",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "inputmask": {
         "components": {
             "InputMask": {
@@ -15124,7 +15178,6 @@
                             "optional": false,
                             "readonly": false,
                             "type": "string",
-                            "default": "{0} items selected",
                             "description": "Label to display after exceeding max selected labels e.g. ({0} items selected), defaults \"ellipsis\" keyword to indicate a text-overflow."
                         },
                         {
@@ -15383,7 +15436,7 @@
                             "name": "placeholder",
                             "optional": false,
                             "readonly": false,
-                            "type": "string"
+                            "type": "Signal<string>"
                         },
                         {
                             "name": "options",
@@ -18671,6 +18724,13 @@
                             "type": "string",
                             "default": "2s",
                             "description": "Duration of the rotate animation."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Used to define a aria label attribute the current element."
                         }
                     ]
                 }

src/app/showcase/doc/iconfield/accessibilitydoc.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'accessibility-doc',
+    template: ` <app-docsectiontext>
+        <h3>Screen Reader</h3>
+        <p>IconField and InputIcon does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Components does not include any interactive elements.</p>
+    </app-docsectiontext>`
+})
+export class AccessibilityDoc {}

src/app/showcase/doc/iconfield/basicdoc.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'basic-doc',
+    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.
+            </p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-iconField iconPosition="left">
+                <p-inputIcon styleClass="pi pi-search" />
+                <input type="text" pInputText />
+            </p-iconField>
+        </div>
+        <app-code [code]="code" selector="iconfield-basic-demo"></app-code>
+    `
+})
+export class BasicDoc {
+    code: Code = {
+        basic: `<p-iconField iconPosition="left">
+<p-inputIcon styleClass="pi pi-search" />
+    <input type="text" pInputText />
+</p-iconField>`,
+        html: `<div class="card flex justify-content-center">
+    <p-iconField iconPosition="left">
+        <p-inputIcon styleClass="pi pi-search" />
+        <input type="text" pInputText />
+    </p-iconField>
+</div>`,
+        typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'iconField-basic-demo',
+    templateUrl: './iconField-basic-demo.html'
+})
+export class IconFieldBasicDemo {}`
+    };
+}

src/app/showcase/doc/iconfield/iconfielddoc.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+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 { IconFieldModule } from 'src/app/components/iconfield/iconfield';
+import { InputIconModule } from 'src/app/components/inputicon/inputicon';
+import { FormsModule } from '@angular/forms';
+import { AccessibilityDoc } from './accessibilitydoc';
+
+@NgModule({
+    imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, InputTextModule, IconFieldModule, InputIconModule, FormsModule],
+    declarations: [BasicDoc, ImportDoc, AccessibilityDoc],
+    exports: [AppDocModule]
+})
+export class IconFieldDocModule {}

src/app/showcase/doc/iconfield/importdoc.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'import-doc',
+    template: `<app-code [code]="code" [hideToggleCode]="true"></app-code> `
+})
+export class ImportDoc {
+    code: Code = {
+        typescript: `import { IconField } from 'primeng/iconfield';`
+    };
+}

src/app/showcase/layout/app.routes.ts

@@ -47,6 +47,7 @@ export const routes: Routes = [
             { path: 'dynamicdialog', loadChildren: () => import('../pages/dynamicdialog/dynamicdialogdemo.module').then((m) => m.DynamicDialogDemoModule) },
             { path: 'dragdrop', loadChildren: () => import('../pages/dragdrop/dragdropdemo.module').then((m) => m.DragDropDemoModule) },
             { path: 'dropdown', loadChildren: () => import('../pages/dropdown/dropdowndemo.module').then((m) => m.DropdownDemoModule) },
+            { path: 'iconfield', loadChildren: () => import('../pages/iconfield/iconfielddemo.module').then((m) => m.IconFieldDemoModule) },
             { path: 'editor', loadChildren: () => import('../pages/editor/editordemo.module').then((m) => m.EditorDemoModule) },
             { path: 'fieldset', loadChildren: () => import('../pages/fieldset/fieldsetdemo.module').then((m) => m.FieldsetDemoModule) },
             { path: 'fileupload', loadChildren: () => import('../pages/fileupload/fileuploaddemo.module').then((m) => m.FileUploadDemoModule) },

src/app/showcase/pages/iconfield/iconfielddemo-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IconFieldDemo } from './iconfielddemo';
+
+
+@NgModule({
+    imports: [RouterModule.forChild([{ path: '', component: IconFieldDemo }])],
+    exports: [RouterModule]
+})
+export class IconFieldDemoRoutingModule {}

src/app/showcase/pages/iconfield/iconfielddemo.html

@@ -0,0 +1 @@
+<app-doc docTitle="Angular IconField Component" header="IconField" description="IconField wraps an input and an icon." [docs]="docs" [apiDocs]="['IconField', 'InputIcon']"></app-doc>

src/app/showcase/pages/iconfield/iconfielddemo.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconFieldDemo } from './iconfielddemo';
+import { IconFieldDocModule } from '../../doc/iconfield/iconfielddoc.module';
+import { IconFieldDemoRoutingModule } from './iconfielddemo-routing.module';
+
+
+@NgModule({
+    imports: [CommonModule, IconFieldDocModule, IconFieldDemoRoutingModule],
+    declarations: [IconFieldDemo]
+})
+export class IconFieldDemoModule {}