InputMask for #11471

primefaces · Apr 29, 2022 · 2605514 · 2605514
1 parent c6691c9
commit 2605514
Show file tree

Hide file tree

Showing 45 changed files with 379 additions and 6 deletions.
diff --git a/src/app/components/inputmask/inputmask.css b/src/app/components/inputmask/inputmask.css
@@ -0,0 +1,10 @@
+.p-inputmask-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-inputmask-clearable {
+    position: relative;
+}
diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts
@@ -39,18 +39,23 @@ export const INPUTMASK_VALUE_ACCESSOR: any = {
 
 @Component({
     selector: 'p-inputMask',
-    template: `<input #input pInputText class="p-inputmask" [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder" [attr.title]="title"
-        [attr.size]="size" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel" [attr.aria-required]="ariaRequired" [disabled]="disabled" [readonly]="readonly" [attr.required]="required"
-        (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onInputKeydown($event)" (keypress)="onKeyPress($event)" [attr.autofocus]="autoFocus"
-        (input)="onInputChange($event)" (paste)="handleInputChange($event)">`,
+    template: `
+        <input #input pInputText class="p-inputmask" [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder" [attr.title]="title"
+            [attr.size]="size" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel" [attr.aria-required]="ariaRequired" [disabled]="disabled" [readonly]="readonly" [attr.required]="required"
+            (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onInputKeydown($event)" (keypress)="onKeyPress($event)" [attr.autofocus]="autoFocus"
+            (input)="onInputChange($event)" (paste)="handleInputChange($event)">
+        <i *ngIf="value != null && filled && showClear && !disabled" class="p-inputmask-clear-icon pi pi-times" (click)="clear()"></i>
+    `,
     host: {
         'class': 'p-element',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focused'
+        '[class.p-inputwrapper-focus]': 'focused',
+        '[class.p-inputmask-clearable]': 'showClear && !disabled'
     },
     providers: [INPUTMASK_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./inputmask.css']
 })
 export class InputMask implements OnInit,ControlValueAccessor {
 
@@ -60,6 +65,8 @@ export class InputMask implements OnInit,ControlValueAccessor {
 
     @Input() autoClear: boolean = true;
 
+    @Input() showClear: boolean = true;
+
     @Input() style: any;
 
     @Input() inputId: string;
@@ -108,6 +115,8 @@ export class InputMask implements OnInit,ControlValueAccessor {
 
     @Output() onKeydown: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     value: any;
 
     _mask: string;
@@ -647,6 +656,13 @@ export class InputMask implements OnInit,ControlValueAccessor {
     focus() {
         this.inputViewChild.nativeElement.focus();
     }
+
+    clear() {
+        this.inputViewChild.nativeElement.value = '';
+        this.value = null;
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
 }
 
 @NgModule({

diff --git a/src/app/showcase/components/inputmask/inputmaskdemo.html b/src/app/showcase/components/inputmask/inputmaskdemo.html
@@ -207,6 +207,12 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>When present, the input gets a focus automatically on load.</td>
                         </tr>
+                        <tr>
+                            <td>showClear</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, a clear icon is displayed to clear the value.</td>
+                        </tr>
                         <tr>
                             <td>autocomplete</td>
                             <td>string</td>
@@ -266,6 +272,11 @@ <h5>Events</h5>
                             <td>-</td>
                             <td>Callback to invoke on when the input field value is altered.</td>
                         </tr>
+                        <tr>
+                            <td>onClear</td>
+                            <td>-</td>
+                            <td>Callback to invoke when inputmask clears the value.</td>
+                        </tr>
                         <tr>
                             <td>onKeydown</td>
                             <td>event: KeyboardEvent</td>

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #ef9a9a;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.5rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #ef9a9a;
 }

diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #f19ea6;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f19ea6;
 }

diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #f19ea6;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #f19ea6;
 }

diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #dc3545;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #dc3545;
 }

diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #dc3545;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #495057;
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #dc3545;
 }

diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #a4252c;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #605e5c;
+  right: 0.5rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #a4252c;
 }

diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }

diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }

diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }

diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #FCA5A5;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #FCA5A5;
 }

diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }

diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }

diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }

diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
@@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e24c4c;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 2.5rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #6c757d;
+  right: 0.75rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e24c4c;
 }

diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e57373;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }

diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e57373;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }

diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
@@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
   border-color: #e57373;
 }
 
+p-inputmask.p-inputmask-clearable .p-inputtext {
+  padding-right: 1.858rem;
+}
+p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
+  color: #888888;
+  right: 0.429rem;
+}
+
 p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
   border-color: #e57373;
 }