primeng 20.3.0 → 20.5.0-lts

package/fesm2022/primeng-inputmask.mjs

@@ -2,12 +2,12 @@ export * from 'primeng/types/inputmask';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, forwardRef, inject, computed, EventEmitter, booleanAttribute, ViewChild, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, output, effect, Directive, forwardRef, computed, EventEmitter, 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 { PARENT_INSTANCE } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import { BaseInput } from 'primeng/baseinput';
 import * as i1 from 'primeng/bind';
 import { Bind, BindModule } from 'primeng/bind';
@@ -67,10 +67,10 @@ class InputMaskStyle extends BaseStyle {
     name = 'inputmask';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMaskStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMaskStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMaskStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -122,6 +122,564 @@ var InputMaskClasses;
     OTHER DEALINGS IN THE SOFTWARE.
 */
 const INPUTMASK_INSTANCE = new InjectionToken('INPUTMASK_INSTANCE');
+const INPUTMASK_DIRECTIVE_INSTANCE = new InjectionToken('INPUTMASK_DIRECTIVE_INSTANCE');
+/**
+ * InputMask directive is applied directly to input elements to enable masked input.
+ * @group Components
+ */
+class InputMaskDirective extends BaseComponent {
+    $pcInputMaskDirective = inject(INPUTMASK_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    _componentStyle = inject(InputMaskStyle);
+    /**
+     * Used to pass attributes to DOM elements inside the InputMask directive.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pInputMaskPT = input(...(ngDevMode ? [undefined, { debugName: "pInputMaskPT" }] : []));
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pInputMaskUnstyled = input(...(ngDevMode ? [undefined, { debugName: "pInputMaskUnstyled" }] : []));
+    /**
+     * Mask pattern.
+     * @group Props
+     */
+    pInputMask = input(...(ngDevMode ? [undefined, { debugName: "pInputMask" }] : []));
+    /**
+     * Placeholder character in mask, default is underscore.
+     * @group Props
+     */
+    slotChar = input('_', ...(ngDevMode ? [{ debugName: "slotChar" }] : []));
+    /**
+     * Clears the incomplete value on blur.
+     * @group Props
+     */
+    autoClear = input(true, ...(ngDevMode ? [{ debugName: "autoClear", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Regex pattern for alpha characters.
+     * @group Props
+     */
+    characterPattern = input('[A-Za-z]', ...(ngDevMode ? [{ debugName: "characterPattern" }] : []));
+    /**
+     * When present, it specifies that whether to clean buffer value from model.
+     * @group Props
+     */
+    keepBuffer = input(false, ...(ngDevMode ? [{ debugName: "keepBuffer", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Callback to invoke when the mask is completed.
+     * @group Emits
+     */
+    onCompleteEvent = output({ alias: 'onComplete' });
+    /**
+     * Callback to invoke when value changes, emits unmasked value.
+     * @group Emits
+     */
+    onUnmaskedChange = output();
+    defs;
+    tests;
+    partialPosition;
+    firstNonMaskPos;
+    lastRequiredNonMaskPos;
+    len;
+    oldVal;
+    buffer;
+    defaultBuffer;
+    focusText;
+    caretTimeoutId;
+    androidChrome = true;
+    focused;
+    _inputElement = null;
+    _listeners = [];
+    isInputVisible(input) {
+        const style = getComputedStyle(input);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    }
+    get inputElement() {
+        if (!this._inputElement) {
+            const host = this.el.nativeElement;
+            this._inputElement = host.querySelector('[data-p-maskable]') || Array.from(host.querySelectorAll('input')).find((input) => this.isInputVisible(input)) || host;
+        }
+        return this._inputElement;
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const pt = this.pInputMaskPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            const maskValue = this.pInputMask();
+            if (maskValue) {
+                this.initMask();
+            }
+        });
+        if (isPlatformBrowser(this.platformId)) {
+            const ua = navigator.userAgent;
+            this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
+        }
+    }
+    onAfterViewInit() {
+        if (isPlatformBrowser(this.platformId) && this.inputElement) {
+            const events = [
+                ['focus', (e) => this.onInputFocus(e)],
+                ['blur', (e) => this.onInputBlur(e)],
+                ['keydown', (e) => this.onInputKeydown(e)],
+                ['keypress', (e) => this.onKeyPress(e)],
+                ['input', (e) => this.onInputChange(e)],
+                ['paste', (e) => this.onPaste(e)]
+            ];
+            events.forEach(([event, handler]) => {
+                this.inputElement.addEventListener(event, handler);
+                this._listeners.push(() => this.inputElement.removeEventListener(event, handler));
+            });
+        }
+    }
+    onDestroy() {
+        this._listeners.forEach((unlisten) => unlisten());
+    }
+    initMask() {
+        const maskValue = this.pInputMask();
+        if (!maskValue) {
+            return;
+        }
+        this.tests = [];
+        this.partialPosition = maskValue.length;
+        this.len = maskValue.length;
+        this.firstNonMaskPos = null;
+        this.defs = {
+            '9': '[0-9]',
+            a: this.characterPattern(),
+            '*': `${this.characterPattern()}|[0-9]`
+        };
+        const maskTokens = maskValue.split('');
+        for (let i = 0; i < maskTokens.length; i++) {
+            const c = maskTokens[i];
+            if (c == '?') {
+                this.len--;
+                this.partialPosition = i;
+            }
+            else if (this.defs[c]) {
+                this.tests.push(new RegExp(this.defs[c]));
+                if (this.firstNonMaskPos === null) {
+                    this.firstNonMaskPos = this.tests.length - 1;
+                }
+                if (i < this.partialPosition) {
+                    this.lastRequiredNonMaskPos = this.tests.length - 1;
+                }
+            }
+            else {
+                this.tests.push(null);
+            }
+        }
+        this.buffer = [];
+        for (let i = 0; i < maskTokens.length; i++) {
+            const c = maskTokens[i];
+            if (c != '?') {
+                if (this.defs[c])
+                    this.buffer.push(this.getPlaceholder(i));
+                else
+                    this.buffer.push(c);
+            }
+        }
+        this.defaultBuffer = this.buffer.join('');
+    }
+    onInputFocus(event) {
+        if (this.inputElement.readOnly || !this.pInputMask()) {
+            return;
+        }
+        this.focused = true;
+        this.focusText = this.inputElement.value;
+        clearTimeout(this.caretTimeoutId);
+        const pos = this.checkVal();
+        this.caretTimeoutId = setTimeout(() => {
+            if (this.inputElement !== this.inputElement.ownerDocument.activeElement) {
+                return;
+            }
+            this.writeBuffer();
+            if (pos == this.pInputMask()?.replace('?', '').length) {
+                this.caret(0, pos);
+            }
+            else {
+                this.caret(pos);
+            }
+        }, 10);
+    }
+    onInputBlur(e) {
+        if (!this.pInputMask()) {
+            return;
+        }
+        this.focused = false;
+        // Validate/finalize value on blur (clear incomplete if autoClear)
+        if (!this.keepBuffer()) {
+            const valueBefore = this.inputElement.value;
+            this.checkVal();
+            // If value changed, dispatch input event so ngModel gets updated
+            if (this.inputElement.value !== valueBefore) {
+                this.dispatchInputEvent();
+            }
+        }
+    }
+    onInputKeydown(e) {
+        if (this.inputElement.readOnly || !this.pInputMask()) {
+            return;
+        }
+        const k = e.which || e.keyCode;
+        let pos;
+        let begin;
+        let end;
+        let iPhone = false;
+        if (isPlatformBrowser(this.platformId)) {
+            iPhone = /iphone/i.test(getUserAgent());
+        }
+        this.oldVal = this.inputElement.value;
+        // backspace, delete, and escape get special treatment
+        if (k === 8 || k === 46 || (iPhone && k === 127)) {
+            pos = this.caret();
+            begin = pos.begin;
+            end = pos.end;
+            if (end - begin === 0) {
+                begin = k !== 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
+                end = k === 46 ? this.seekNext(end) : end;
+            }
+            this.clearBuffer(begin, end);
+            if (this.keepBuffer()) {
+                this.shiftL(begin, end - 2);
+            }
+            else {
+                this.shiftL(begin, end - 1);
+            }
+            // Dispatch input event to notify parent components (like DatePicker)
+            this.dispatchInputEvent();
+            e.preventDefault();
+        }
+        else if (k === 13) {
+            // enter
+            this.onInputBlur(e);
+        }
+        else if (k === 27) {
+            // escape
+            this.inputElement.value = this.focusText;
+            this.caret(0, this.checkVal());
+            e.preventDefault();
+        }
+    }
+    onKeyPress(e) {
+        if (this.inputElement.readOnly || !this.pInputMask()) {
+            return;
+        }
+        const k = e.which || e.keyCode;
+        const pos = this.caret();
+        let p;
+        let c;
+        let next;
+        let completed;
+        if (e.ctrlKey || e.altKey || e.metaKey || k < 32 || (k > 34 && k < 41)) {
+            return;
+        }
+        else if (k && k !== 13) {
+            if (pos.end - pos.begin !== 0) {
+                this.clearBuffer(pos.begin, pos.end);
+                this.shiftL(pos.begin, pos.end - 1);
+            }
+            p = this.seekNext(pos.begin - 1);
+            if (p < this.len) {
+                c = String.fromCharCode(k);
+                if (this.tests[p].test(c)) {
+                    this.shiftR(p);
+                    this.buffer[p] = c;
+                    this.writeBuffer();
+                    // Dispatch input event to notify parent components (like DatePicker)
+                    this.dispatchInputEvent();
+                    next = this.seekNext(p);
+                    if (isClient() && /android/i.test(getUserAgent())) {
+                        const proxy = () => {
+                            this.caret(next);
+                        };
+                        setTimeout(proxy, 0);
+                    }
+                    else {
+                        this.caret(next);
+                    }
+                    if (pos.begin <= this.lastRequiredNonMaskPos) {
+                        completed = this.isCompleted();
+                    }
+                }
+            }
+            e.preventDefault();
+        }
+        if (completed) {
+            this.onCompleteEvent.emit();
+        }
+    }
+    onInputChange(event) {
+        if (!this.pInputMask()) {
+            return;
+        }
+        // Skip synthetic events dispatched by dispatchInputEvent() to avoid re-processing
+        if (!event.isTrusted) {
+            return;
+        }
+        if (this.androidChrome)
+            this.handleAndroidInput(event);
+        else
+            this.handleInputChange(event);
+    }
+    onPaste(event) {
+        if (!this.pInputMask()) {
+            return;
+        }
+        this.handleInputChange(event);
+    }
+    // Helper methods
+    caret(first, last) {
+        let range;
+        let begin;
+        let end;
+        if (!this.inputElement.offsetParent || this.inputElement !== this.inputElement.ownerDocument.activeElement) {
+            return;
+        }
+        if (typeof first == 'number') {
+            begin = first;
+            end = typeof last === 'number' ? last : begin;
+            if (typeof this.inputElement.setSelectionRange === 'function') {
+                this.inputElement.setSelectionRange(begin, end);
+            }
+            else if (this.inputElement['createTextRange']) {
+                range = this.inputElement['createTextRange']();
+                range.collapse(true);
+                range.moveEnd('character', end);
+                range.moveStart('character', begin);
+                range.select();
+            }
+        }
+        else {
+            if (typeof this.inputElement.setSelectionRange === 'function') {
+                begin = this.inputElement.selectionStart;
+                end = this.inputElement.selectionEnd;
+            }
+            else if (this.document['selection'] && this.document['selection'].createRange) {
+                range = this.document['selection'].createRange();
+                begin = 0 - range.duplicate().moveStart('character', -100000);
+                end = begin + range.text.length;
+            }
+            return { begin: begin, end: end };
+        }
+    }
+    isCompleted() {
+        for (let i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
+            if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    getPlaceholder(i) {
+        const slotCharValue = this.slotChar();
+        if (i < slotCharValue.length) {
+            return slotCharValue.charAt(i);
+        }
+        return slotCharValue.charAt(0);
+    }
+    seekNext(pos) {
+        while (++pos < this.len && !this.tests[pos])
+            ;
+        return pos;
+    }
+    seekPrev(pos) {
+        while (--pos >= 0 && !this.tests[pos])
+            ;
+        return pos;
+    }
+    shiftL(begin, end) {
+        let i, j;
+        if (begin < 0) {
+            return;
+        }
+        for (i = begin, j = this.seekNext(end); i < this.len; i++) {
+            if (this.tests[i]) {
+                if (j < this.len && this.tests[i].test(this.buffer[j])) {
+                    this.buffer[i] = this.buffer[j];
+                    this.buffer[j] = this.getPlaceholder(j);
+                }
+                else {
+                    break;
+                }
+                j = this.seekNext(j);
+            }
+        }
+        this.writeBuffer();
+        this.caret(Math.max(this.firstNonMaskPos, begin));
+    }
+    shiftR(pos) {
+        let i, c, j, t;
+        for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
+            if (this.tests[i]) {
+                j = this.seekNext(i);
+                t = this.buffer[i];
+                this.buffer[i] = c;
+                if (j < this.len && this.tests[j].test(t)) {
+                    c = t;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    }
+    handleAndroidInput(e) {
+        const curVal = this.inputElement.value;
+        const pos = this.caret();
+        if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
+            // a deletion or backspace happened
+            this.checkVal(true);
+            while (pos.begin > 0 && !this.tests[pos.begin - 1])
+                pos.begin--;
+            if (pos.begin === 0) {
+                while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
+                    pos.begin++;
+            }
+            setTimeout(() => {
+                this.caret(pos.begin, pos.begin);
+                this.onUnmaskedChange.emit(this.getUnmaskedValue());
+                if (this.isCompleted()) {
+                    this.onCompleteEvent.emit();
+                }
+            }, 0);
+        }
+        else {
+            this.checkVal(true);
+            while (pos.begin < this.len && !this.tests[pos.begin])
+                pos.begin++;
+            setTimeout(() => {
+                this.caret(pos.begin, pos.begin);
+                this.onUnmaskedChange.emit(this.getUnmaskedValue());
+                if (this.isCompleted()) {
+                    this.onCompleteEvent.emit();
+                }
+            }, 0);
+        }
+    }
+    handleInputChange(event) {
+        if (this.inputElement.readOnly) {
+            return;
+        }
+        setTimeout(() => {
+            const pos = this.checkVal(true);
+            this.caret(pos);
+            this.onUnmaskedChange.emit(this.getUnmaskedValue());
+            if (this.isCompleted()) {
+                this.onCompleteEvent.emit();
+            }
+        }, 0);
+    }
+    clearBuffer(start, end) {
+        if (!this.keepBuffer()) {
+            let i;
+            for (i = start; i < end && i < this.len; i++) {
+                if (this.tests[i]) {
+                    this.buffer[i] = this.getPlaceholder(i);
+                }
+            }
+        }
+    }
+    writeBuffer() {
+        if (this.buffer && this.inputElement) {
+            this.inputElement.value = this.buffer.join('');
+        }
+    }
+    /**
+     * Dispatches an input event on the host element.
+     * This is needed to notify parent components of value changes
+     * since programmatic value changes don't trigger native input events.
+     */
+    dispatchInputEvent() {
+        const event = new Event('input', { bubbles: true, cancelable: true });
+        this.inputElement.dispatchEvent(event);
+        this.onUnmaskedChange.emit(this.getUnmaskedValue());
+    }
+    checkVal(allow) {
+        // try to place characters where they belong
+        const test = this.inputElement.value;
+        let lastMatch = -1;
+        let i;
+        let c;
+        let pos;
+        for (i = 0, pos = 0; i < this.len; i++) {
+            if (this.tests[i]) {
+                this.buffer[i] = this.getPlaceholder(i);
+                while (pos++ < test.length) {
+                    c = test.charAt(pos - 1);
+                    if (this.tests[i].test(c)) {
+                        if (!this.keepBuffer()) {
+                            this.buffer[i] = c;
+                        }
+                        lastMatch = i;
+                        break;
+                    }
+                }
+                if (pos > test.length) {
+                    this.clearBuffer(i + 1, this.len);
+                    break;
+                }
+            }
+            else {
+                if (this.buffer[i] === test.charAt(pos)) {
+                    pos++;
+                }
+                if (i < this.partialPosition) {
+                    lastMatch = i;
+                }
+            }
+        }
+        if (allow) {
+            this.writeBuffer();
+        }
+        else if (lastMatch + 1 < this.partialPosition) {
+            if (this.autoClear() || this.buffer.join('') === this.defaultBuffer) {
+                // Invalid value. Remove it and replace it with the
+                // mask, which is the default behavior.
+                if (this.inputElement.value)
+                    this.inputElement.value = '';
+                this.clearBuffer(0, this.len);
+            }
+            else {
+                // Invalid value, but we opt to show the value to the
+                // user and allow them to correct their mistake.
+                this.writeBuffer();
+            }
+        }
+        else {
+            this.writeBuffer();
+            this.inputElement.value = this.inputElement.value.substring(0, lastMatch + 1);
+        }
+        return (this.partialPosition ? i : this.firstNonMaskPos);
+    }
+    getUnmaskedValue() {
+        const unmaskedBuffer = [];
+        for (let i = 0; i < this.buffer.length; i++) {
+            const c = this.buffer[i];
+            if (this.tests[i] && c != this.getPlaceholder(i)) {
+                unmaskedBuffer.push(c);
+            }
+        }
+        return unmaskedBuffer.join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: InputMaskDirective, isStandalone: true, selector: "[pInputMask]", inputs: { pInputMaskPT: { classPropertyName: "pInputMaskPT", publicName: "pInputMaskPT", isSignal: true, isRequired: false, transformFunction: null }, pInputMaskUnstyled: { classPropertyName: "pInputMaskUnstyled", publicName: "pInputMaskUnstyled", isSignal: true, isRequired: false, transformFunction: null }, pInputMask: { classPropertyName: "pInputMask", publicName: "pInputMask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, keepBuffer: { classPropertyName: "keepBuffer", publicName: "keepBuffer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCompleteEvent: "onComplete", onUnmaskedChange: "onUnmaskedChange" }, host: { properties: { "class.p-inputmask": "true" } }, providers: [InputMaskStyle, { provide: INPUTMASK_DIRECTIVE_INSTANCE, useExisting: InputMaskDirective }, { provide: PARENT_INSTANCE, useExisting: InputMaskDirective }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pInputMask]',
+                    standalone: true,
+                    providers: [InputMaskStyle, { provide: INPUTMASK_DIRECTIVE_INSTANCE, useExisting: InputMaskDirective }, { provide: PARENT_INSTANCE, useExisting: InputMaskDirective }],
+                    host: {
+                        '[class.p-inputmask]': 'true'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { pInputMaskPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputMaskPT", required: false }] }], pInputMaskUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputMaskUnstyled", required: false }] }], pInputMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputMask", required: false }] }], slotChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotChar", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], keepBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepBuffer", required: false }] }], onCompleteEvent: [{ type: i0.Output, args: ["onComplete"] }], onUnmaskedChange: [{ type: i0.Output, args: ["onUnmaskedChange"] }] } });
 const INPUTMASK_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => InputMask),
@@ -132,6 +690,7 @@ const INPUTMASK_VALUE_ACCESSOR = {
  * @group Components
  */
 class InputMask extends BaseInput {
+    componentName = 'InputMask';
     _componentStyle = inject(InputMaskStyle);
     $pcInputMask = inject(INPUTMASK_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
@@ -753,9 +1312,10 @@ class InputMask extends BaseInput {
             this.checkVal();
             this.focusText = this.inputViewChild.nativeElement.value;
         }
+        this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMask, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", 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" }, host: { properties: { "class": "cx('root')" } }, providers: [INPUTMASK_VALUE_ACCESSOR, InputMaskStyle, { provide: INPUTMASK_INSTANCE, useExisting: InputMask }, { provide: PARENT_INSTANCE, useExisting: InputMask }], queries: [{ propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMask, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", 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" }, host: { properties: { "class": "cx('root')" } }, providers: [INPUTMASK_VALUE_ACCESSOR, InputMaskStyle, { provide: INPUTMASK_INSTANCE, useExisting: InputMask }, { provide: PARENT_INSTANCE, useExisting: InputMask }], queries: [{ propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <input
             #input
             pInputText
@@ -798,7 +1358,7 @@ class InputMask extends BaseInput {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMask, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-inputmask, p-inputMask, p-input-mask',
@@ -924,15 +1484,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['input', { static: true }]
             }] } });
 class InputMaskModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule], exports: [InputMask, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule, InputMaskDirective], exports: [InputMask, SharedModule, InputMaskDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskModule, imports: [InputMask, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputMaskModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputMaskModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [InputMask, SharedModule],
-                    exports: [InputMask, SharedModule]
+                    imports: [InputMask, SharedModule, InputMaskDirective],
+                    exports: [InputMask, SharedModule, InputMaskDirective]
                 }]
         }] });
 
@@ -940,5 +1500,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { INPUTMASK_VALUE_ACCESSOR, InputMask, InputMaskClasses, InputMaskModule, InputMaskStyle };
+export { INPUTMASK_VALUE_ACCESSOR, InputMask, InputMaskClasses, InputMaskDirective, InputMaskModule, InputMaskStyle };
 //# sourceMappingURL=primeng-inputmask.mjs.map