primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-inputmask.mjs

@@ -1,62 +1,73 @@
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, ViewChild, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, ViewChild, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { getUserAgent, isClient } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseInput } from 'primeng/baseinput';
 import { TimesIcon } from 'primeng/icons';
 import { InputText } from 'primeng/inputtext';
+import { css } from '@primeuix/styled';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-p-inputmask {
-    position: relative;
-}
+const theme = ({ dt }) => css `
+    /* For PrimeNG */
+    p-inputmask {
+        position: relative;
+    }
 
-.p-inputmask-clear-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    cursor: pointer;
-    inset-inline-end: ${dt('form.field.padding.x')};
-    color: ${dt('form.field.icon.color')};
-}
+    .p-inputmask-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        cursor: pointer;
+        inset-inline-end: ${dt('form.field.padding.x')};
+        color: ${dt('form.field.icon.color')};
+    }
 
-p-inputMask.ng-invalid.ng-dirty > .p-inputtext,
-p-input-mask.ng-invalid.ng-dirty > .p-inputtext,
-p-inputmask.ng-invalid.ng-dirty > .p-inputtext {
-    border-color: ${dt('inputtext.invalid.border.color')};
-}
+    p-inputMask:has(.p-inputtext-fluid),
+    p-input-mask:has(.p-inputtext-fluid),
+    p-inputmask:has(.p-inputtext-fluid) {
+        width: 100%;
+    }
 
-p-inputMask.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
-p-input-mask.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
-p-inputmask.ng-invalid.ng-dirty > .p-inputtext:enabled:focus {
-    border-color: ${dt('inputtext.focus.border.color')};
-}
+    p-inputMask.ng-invalid.ng-dirty > .p-inputtext,
+    p-input-mask.ng-invalid.ng-dirty > .p-inputtext,
+    p-inputmask.ng-invalid.ng-dirty > .p-inputtext {
+        border-color: ${dt('inputtext.invalid.border.color')};
+    }
 
-p-inputMask.ng-invalid.ng-dirty > .p-inputtext::placeholder,
-p-input-mask.ng-invalid.ng-dirty > .p-inputtext::placeholder,
-p-inputmask.ng-invalid.ng-dirty > .p-inputtext::placeholder {
-    color: ${dt('inputtext.invalid.placeholder.color')};
-}
+    p-inputMask.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
+    p-input-mask.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
+    p-inputmask.ng-invalid.ng-dirty > .p-inputtext:enabled:focus {
+        border-color: ${dt('inputtext.focus.border.color')};
+    }
+
+    p-inputMask.ng-invalid.ng-dirty > .p-inputtext::placeholder,
+    p-input-mask.ng-invalid.ng-dirty > .p-inputtext::placeholder,
+    p-inputmask.ng-invalid.ng-dirty > .p-inputtext::placeholder {
+        color: ${dt('inputtext.invalid.placeholder.color')};
+    }
 `;
 const classes = {
-    root: ({ instance }) => ({
-        'p-inputmask': true,
-        'p-filled': instance.variant ? instance.variant === 'filled' : instance.config.inputStyle() === 'filled'
-    })
+    root: ({ instance }) => [
+        'p-inputmask',
+        {
+            'p-variant-filled': instance.$variant() === 'filled'
+        }
+    ],
+    clearIcon: 'p-inputmask-clear-icon'
 };
 class InputMaskStyle extends BaseStyle {
     name = 'inputmask';
     theme = theme;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMaskStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMaskStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMaskStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMaskStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMaskStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMaskStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -74,6 +85,10 @@ var InputMaskClasses;
      * Class name of the root element
      */
     InputMaskClasses["root"] = "p-inputmask";
+    /**
+     * Class name of the clear icon element
+     */
+    InputMaskClasses["clearIcon"] = "p-inputmask-clear-icon";
 })(InputMaskClasses || (InputMaskClasses = {}));
 
 /*
@@ -112,7 +127,7 @@ const INPUTMASK_VALUE_ACCESSOR = {
  * InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
  * @group Components
  */
-class InputMask extends BaseComponent {
+class InputMask extends BaseInput {
     /**
      * HTML5 input type.
      * @group Props
@@ -153,16 +168,6 @@ class InputMask extends BaseComponent {
      * @group Props
      */
     placeholder;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
-    /**
-     * Maximum number of character allows in the input field.
-     * @group Props
-     */
-    maxlength;
     /**
      * Specifies tab order of the element.
      * @group Props
@@ -173,11 +178,6 @@ class InputMask extends BaseComponent {
      * @group Props
      */
     title;
-    /**
-     * Specifies the input variant of the component.
-     * @group Props
-     */
-    variant;
     /**
      * Used to define a string that labels the input element.
      * @group Props
@@ -193,11 +193,6 @@ class InputMask extends BaseComponent {
      * @group Props
      */
     ariaRequired;
-    /**
-     * When present, it specifies that the element value cannot be altered.
-     * @group Props
-     */
-    disabled;
     /**
      * When present, it specifies that an input field is read-only.
      * @group Props
@@ -208,16 +203,6 @@ class InputMask extends BaseComponent {
      * @group Props
      */
     unmask;
-    /**
-     * Name of the input field.
-     * @group Props
-     */
-    name;
-    /**
-     * When present, it specifies that an input field must be filled out before submitting the form.
-     * @group Props
-     */
-    required;
     /**
      * Regex pattern for alpha characters
      * @group Props
@@ -228,15 +213,6 @@ class InputMask extends BaseComponent {
      * @group Props
      */
     autofocus;
-    /**
-     * When present, the input gets a focus automatically on load.
-     * @group Props
-     * @deprecated Use autofocus property instead.
-     */
-    set autoFocus(value) {
-        this.autofocus = value;
-        console.log('autoFocus is deprecated. Use autofocus property instead.');
-    }
     /**
      * Used to define a string that autocomplete attribute the current element.
      * @group Props
@@ -306,7 +282,6 @@ class InputMask extends BaseComponent {
     onModelChange = () => { };
     onModelTouched = () => { };
     input;
-    filled;
     defs;
     tests;
     partialPosition;
@@ -320,9 +295,6 @@ class InputMask extends BaseComponent {
     caretTimeoutId;
     androidChrome = true;
     focused;
-    get inputClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
     _componentStyle = inject(InputMaskStyle);
     ngOnInit() {
         super.ngOnInit();
@@ -386,6 +358,7 @@ class InputMask extends BaseComponent {
     }
     writeValue(value) {
         this.value = value;
+        this.writeModelValue(this.value);
         if (this.inputViewChild && this.inputViewChild.nativeElement) {
             if (this.value == undefined || this.value == null)
                 this.inputViewChild.nativeElement.value = '';
@@ -393,7 +366,6 @@ class InputMask extends BaseComponent {
                 this.inputViewChild.nativeElement.value = this.value;
             this.checkVal();
             this.focusText = this.inputViewChild.nativeElement.value;
-            this.updateFilledState();
         }
     }
     registerOnChange(fn) {
@@ -402,10 +374,6 @@ class InputMask extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     caret(first, last) {
         let range, begin, end;
         if (!this.inputViewChild?.nativeElement.offsetParent || this.inputViewChild.nativeElement !== this.inputViewChild.nativeElement.ownerDocument.activeElement) {
@@ -538,9 +506,8 @@ class InputMask extends BaseComponent {
         if (!this.keepBuffer) {
             this.checkVal();
         }
-        this.updateFilledState();
         this.onBlur.emit(e);
-        if (this.inputViewChild?.nativeElement.value != this.focusText || this.inputViewChild?.nativeElement.value != this.value) {
+        if (this.modelValue() != this.focusText || this.modelValue() != this.value) {
             this.updateModel(e);
             let event = this.document.createEvent('HTMLEvents');
             event.initEvent('change', true, false);
@@ -631,7 +598,6 @@ class InputMask extends BaseComponent {
             e.preventDefault();
         }
         this.updateModel(e);
-        this.updateFilledState();
         if (completed) {
             this.onComplete.emit();
         }
@@ -759,13 +725,10 @@ class InputMask extends BaseComponent {
         const updatedValue = this.unmask ? this.getUnmaskedValue() : e.target.value;
         if (updatedValue !== null || updatedValue !== undefined) {
             this.value = updatedValue;
+            this.writeModelValue(this.value);
             this.onModelChange(this.value);
         }
     }
-    updateFilledState() {
-        this.filled = this.inputViewChild?.nativeElement && this.inputViewChild.nativeElement.value != '';
-        this.cd.markForCheck();
-    }
     focus() {
         this.inputViewChild?.nativeElement.focus();
     }
@@ -775,49 +738,52 @@ class InputMask extends BaseComponent {
         this.onModelChange(this.value);
         this.onClear.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMask, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: InputMask, isStandalone: true, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: ["autoClear", "autoClear", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: "tabindex", title: "title", variant: "variant", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], unmask: ["unmask", "unmask", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], characterPattern: "characterPattern", autofocus: ["autofocus", "autofocus", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], autocomplete: "autocomplete", keepBuffer: ["keepBuffer", "keepBuffer", booleanAttribute], mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", onKeydown: "onKeydown", onClear: "onClear" }, providers: [INPUTMASK_VALUE_ACCESSOR, InputMaskStyle], queries: [{ propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMask, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: InputMask, isStandalone: true, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: ["autoClear", "autoClear", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", tabindex: "tabindex", title: "title", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], unmask: ["unmask", "unmask", booleanAttribute], characterPattern: "characterPattern", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", keepBuffer: ["keepBuffer", "keepBuffer", booleanAttribute], mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", onKeydown: "onKeydown", onClear: "onClear" }, providers: [INPUTMASK_VALUE_ACCESSOR, InputMaskStyle], queries: [{ propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <input
             #input
             pInputText
-            [class]="styleClass"
-            [ngClass]="inputClass"
+            [class]="cn(cx('root'), styleClass)"
             [attr.id]="inputId"
             [attr.type]="type"
-            [attr.name]="name"
+            [attr.name]="name()"
+            [invalid]="invalid()"
             [ngStyle]="style"
             [attr.placeholder]="placeholder"
             [attr.title]="title"
-            [pSize]="size"
+            [pSize]="size()"
+            [attr.size]="inputSize()"
             [attr.autocomplete]="autocomplete"
-            [attr.maxlength]="maxlength"
+            [attr.maxlength]="maxlength()"
+            [attr.minlength]="minlength()"
             [attr.tabindex]="tabindex"
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledBy]="ariaLabelledBy"
             [attr.aria-required]="ariaRequired"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [attr.required]="required"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
             (keydown)="onInputKeydown($event)"
             (keypress)="onKeyPress($event)"
-            [variant]="variant"
+            [variant]="$variant()"
             [pAutoFocus]="autofocus"
             (input)="onInputChange($event)"
             (paste)="handleInputChange($event)"
             [attr.data-pc-name]="'inputmask'"
             [attr.data-pc-section]="'root'"
+            [fluid]="hasFluid"
         />
-        <ng-container *ngIf="value != null && filled && showClear && !disabled">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="'p-inputmask-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-inputmask-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'">
+        <ng-container *ngIf="value != null && $filled() && showClear && !disabled()">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMask, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-inputmask, p-inputMask, p-input-mask',
@@ -827,38 +793,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         <input
             #input
             pInputText
-            [class]="styleClass"
-            [ngClass]="inputClass"
+            [class]="cn(cx('root'), styleClass)"
             [attr.id]="inputId"
             [attr.type]="type"
-            [attr.name]="name"
+            [attr.name]="name()"
+            [invalid]="invalid()"
             [ngStyle]="style"
             [attr.placeholder]="placeholder"
             [attr.title]="title"
-            [pSize]="size"
+            [pSize]="size()"
+            [attr.size]="inputSize()"
             [attr.autocomplete]="autocomplete"
-            [attr.maxlength]="maxlength"
+            [attr.maxlength]="maxlength()"
+            [attr.minlength]="minlength()"
             [attr.tabindex]="tabindex"
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledBy]="ariaLabelledBy"
             [attr.aria-required]="ariaRequired"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [attr.required]="required"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
             (keydown)="onInputKeydown($event)"
             (keypress)="onKeyPress($event)"
-            [variant]="variant"
+            [variant]="$variant()"
             [pAutoFocus]="autofocus"
             (input)="onInputChange($event)"
             (paste)="handleInputChange($event)"
             [attr.data-pc-name]="'inputmask'"
             [attr.data-pc-section]="'root'"
+            [fluid]="hasFluid"
         />
-        <ng-container *ngIf="value != null && filled && showClear && !disabled">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="'p-inputmask-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-inputmask-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'">
+        <ng-container *ngIf="value != null && $filled() && showClear && !disabled()">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
@@ -885,17 +854,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], size: [{
-                type: Input
-            }], maxlength: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
             }], tabindex: [{
                 type: Input
             }], title: [{
                 type: Input
-            }], variant: [{
-                type: Input
             }], ariaLabel: [{
                 type: Input
             }], ariaLabelledBy: [{
@@ -903,28 +865,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], ariaRequired: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], readonly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], unmask: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], name: [{
-                type: Input
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], characterPattern: [{
                 type: Input
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], autoFocus: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], autocomplete: [{
                 type: Input
             }], keepBuffer: [{
@@ -955,11 +906,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: ['input', { static: true }]
             }] } });
 class InputMaskModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule], exports: [InputMask, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule], exports: [InputMask, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InputMaskModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputMaskModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [InputMask, SharedModule],