@acorex/components 21.0.1-next.7 → 21.0.1-next.70

package/fesm2022/acorex-components-text-box.mjs

@@ -1,39 +1,14 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Directive, input, forwardRef, HostBinding, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent, AXCommonModule } from '@acorex/cdk/common';
+import { AXInputMaskDirective } from '@acorex/cdk/input-mask';
+import * as i0 from '@angular/core';
+import { input, output, forwardRef, HostBinding, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import IMask from 'imask';
 import { classes } from 'polytype';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { CommonModule } from '@angular/common';
 
-class AXMaskOptionsDirective {
-    constructor() {
-        this.onMaskChange = new EventEmitter();
-    }
-    get mask() {
-        return this._mask;
-    }
-    set mask(v) {
-        this._mask = v;
-        this.onMaskChange.emit(v);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMaskOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AXMaskOptionsDirective, isStandalone: true, selector: "ax-mask-options", inputs: { mask: "mask", updateValue: "updateValue" }, outputs: { onMaskChange: "onMaskChange" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMaskOptionsDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ax-mask-options' }]
-        }], propDecorators: { onMaskChange: [{
-                type: Output
-            }], mask: [{
-                type: Input
-            }], updateValue: [{
-                type: Input
-            }] } });
-
 /* eslint-disable @angular-eslint/no-inputs-metadata-property */
 /**
  * The Textbox is a component which detects user interaction and triggers a corresponding event
@@ -45,86 +20,58 @@ class AXTextBoxComponent extends classes((MXInputBaseValueComponent), MXLookComp
         super(...arguments);
         /** @ignore */
         this._updateOn = 'change';
-        /** @ignore */
-        this._maskOptions = { mask: null };
+        /**
+         * Custom mask pattern for 'mask' mode.
+         * Use the following tokens:
+         * - `#`: Required digit (0-9)
+         * - `^`: Required letter (a-z, A-Z)
+         * - `@`: Required alphanumeric (0-9, a-z, A-Z)
+         *
+         * Use ! before token to escape symbol. For example !# will render # instead of a digit.
+         * Any other character is treated as a literal separator.
+         * @example '(###) ###-####' for phone numbers
+         * @example 'AA-####' for license plates
+         * @example '##/##/####' for dates
+         */
+        this.maskPattern = input(null, ...(ngDevMode ? [{ debugName: "maskPattern" }] : []));
+        /**
+         * Custom token definitions to extend or override default mask tokens.
+         * Each token maps to a pattern regex and optional transformation.
+         * @example { 'P': { pattern: /[1-9]/, transform: (c) => c.toUpperCase() } }
+         */
+        this.customTokens = input({}, ...(ngDevMode ? [{ debugName: "customTokens" }] : []));
+        this.onMaskChanged = output();
         /**
          * This will apply 'my-custom-class' and 'another-class' to the component's root element.
          */
         // @Input('class')
         // classNames: string;
-        this.classNames = input('', ...(ngDevMode ? [{ debugName: "classNames", alias: 'class' }] : [{ alias: 'class' }]));
-    }
-    /**
-     * This public getter provides access to the `_maskOptions` property, which holds the configuration options for the mask feature.
-     */
-    get maskOptions() {
-        return this._maskOptions;
-    }
-    /**
-     * @param value {AXMaskOptions} - The new mask configuration options to be set.
-     */
-    set maskOptions(value) {
-        this._maskOptions = value;
-        this.setMask();
+        this.classNames = input('', { ...(ngDevMode ? { debugName: "classNames" } : {}), alias: 'class' });
+        this._applyingMask = false;
     }
-    /** @ignore */
-    ngAfterContentInit() {
-        this.initMask();
-    }
-    initMask() {
-        if (this._maskOptionsContent?.mask) {
-            if (typeof this._maskOptionsContent.mask == 'string' || this._maskOptionsContent.mask instanceof RegExp) {
-                Object.assign(this.maskOptions, {
-                    mask: this._maskOptionsContent.mask,
-                    unmask: false,
-                });
-            }
-            if (typeof this._maskOptionsContent.mask == 'object') {
-                Object.assign(this.maskOptions, this._maskOptionsContent.mask);
-            }
+    writeValue(value) {
+        super.writeValue(value);
+        if (this.maskPattern() && !this._applyingMask) {
+            this._applyingMask = true;
+            setTimeout(() => {
+                this.input?.nativeElement?.dispatchEvent(new Event('input', { bubbles: true }));
+                this._applyingMask = false;
+            });
         }
-        //
-        this.setMask();
     }
     /** @ignore */
-    setMask() {
-        if (this._maskObj)
-            this._maskObj.destroy();
-        //
-        if (this.maskOptions?.mask) {
-            this._maskObj = IMask(this.input.nativeElement, this.maskOptions);
-            this._updateOn = 'submit';
-            this._maskObj.on('accept', this._onComplete.bind(this));
-            this._maskObj.on('complete', this._onComplete.bind(this));
-            if (this.value) {
-                this._maskObj.value = `${this.value}`;
-                this._maskObj.updateValue();
-            }
-        }
-    }
-    internalValueChanged(value) {
-        if (!value)
+    _handleModelChange(value) {
+        if (this._applyingMask) {
+            this.commitValue(value);
             return;
-        setTimeout(() => {
-            this.initMask();
-        });
-    }
-    /** @ignore */
-    _onComplete(e) {
-        this.commitValue(this._maskObj.value, e?.isTrusted ?? false);
-        if (typeof this._maskOptionsContent?.updateValue === 'function') {
-            this._maskOptionsContent?.updateValue(this._maskObj.value, this._maskObj.unmaskedValue);
         }
-    }
-    /** @ignore */
-    _handleModelChange(value) {
         this.commitValue(value, true);
     }
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXTextBoxComponent, isStandalone: true, selector: "ax-text-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, maskOptions: { classPropertyName: "maskOptions", publicName: "mask-options", isSignal: false, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXTextBoxComponent, isStandalone: true, selector: "ax-text-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "maskPattern", isSignal: true, isRequired: false, transformFunction: null }, customTokens: { classPropertyName: "customTokens", publicName: "customTokens", isSignal: true, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", onMaskChanged: "onMaskChanged" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXTextBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
             { provide: AXClearableComponent, useExisting: AXTextBoxComponent },
@@ -134,9 +81,9 @@ class AXTextBoxComponent extends classes((MXInputBaseValueComponent), MXLookComp
                 useExisting: forwardRef(() => AXTextBoxComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "_maskOptionsContent", first: true, predicate: AXMaskOptionsDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer components{ax-text-box{width:100%}ax-text-box input::-webkit-outer-spin-button{margin:calc(var(--spacing,.25rem)*0);-webkit-appearance:none}ax-text-box input::-webkit-inner-spin-button{margin:calc(var(--spacing,.25rem)*0);-webkit-appearance:none}ax-text-box input[type=number]{-moz-appearance:textfield}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    axInputMask\n    [maskMode]=\"maskPattern() ? 'mask' : null\"\n    [maskPattern]=\"maskPattern()\"\n    [customTokens]=\"customTokens()\"\n    (onMaskChanged)=\"onMaskChanged.emit($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer components{ax-text-box{width:100%}ax-text-box input::-webkit-outer-spin-button{margin:calc(var(--spacing,.25rem) * 0);-webkit-appearance:none}ax-text-box input::-webkit-inner-spin-button{margin:calc(var(--spacing,.25rem) * 0);-webkit-appearance:none}ax-text-box input[type=number]{-moz-appearance:textfield}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXInputMaskDirective, selector: "[axInputMask]", inputs: ["maskMode", "separator", "eager", "minValue", "maxValue", "decimal", "maskPattern", "customTokens"], outputs: ["onMaskChanged"], exportAs: ["axInputMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-text-box', inputs: [
                         'disabled',
@@ -173,56 +120,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => AXTextBoxComponent),
                             multi: true,
                         },
-                    ], imports: [FormsModule], template: "<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer components{ax-text-box{width:100%}ax-text-box input::-webkit-outer-spin-button{margin:calc(var(--spacing,.25rem)*0);-webkit-appearance:none}ax-text-box input::-webkit-inner-spin-button{margin:calc(var(--spacing,.25rem)*0);-webkit-appearance:none}ax-text-box input[type=number]{-moz-appearance:textfield}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [FormsModule, AXInputMaskDirective], template: "<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    axInputMask\n    [maskMode]=\"maskPattern() ? 'mask' : null\"\n    [maskPattern]=\"maskPattern()\"\n    [customTokens]=\"customTokens()\"\n    (onMaskChanged)=\"onMaskChanged.emit($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer components{ax-text-box{width:100%}ax-text-box input::-webkit-outer-spin-button{margin:calc(var(--spacing,.25rem) * 0);-webkit-appearance:none}ax-text-box input::-webkit-inner-spin-button{margin:calc(var(--spacing,.25rem) * 0);-webkit-appearance:none}ax-text-box input[type=number]{-moz-appearance:textfield}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
-            }], maskOptions: [{
-                type: Input,
-                args: ['mask-options']
-            }], maxLength: [{
+            }], maskPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskPattern", required: false }] }], customTokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTokens", required: false }] }], onMaskChanged: [{ type: i0.Output, args: ["onMaskChanged"] }], maxLength: [{
                 type: Input
             }], type: [{
                 type: Input
             }], autoComplete: [{
                 type: Input
-            }], classNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], _maskOptionsContent: [{
-                type: ContentChild,
-                args: [AXMaskOptionsDirective, { static: true }]
-            }], __hostName: [{
+            }], classNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], __hostName: [{
                 type: HostBinding,
                 args: ['attr.name']
             }] } });
 
 class AXTextBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXTextBoxComponent,
-            AXMaskOptionsDirective], exports: [AXTextBoxComponent, AXMaskOptionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXTextBoxComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent], exports: [AXTextBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        AXCommonModule,
-                        FormsModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXTextBoxComponent,
-                        AXMaskOptionsDirective,
-                    ],
-                    exports: [AXTextBoxComponent, AXMaskOptionsDirective],
+                    imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent],
+                    exports: [AXTextBoxComponent],
                     providers: [],
                 }]
         }] });
@@ -231,5 +153,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXMaskOptionsDirective, AXTextBoxComponent, AXTextBoxModule };
+export { AXTextBoxComponent, AXTextBoxModule };
 //# sourceMappingURL=acorex-components-text-box.mjs.map

package/fesm2022/acorex-components-text-box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-text-box.mjs","sources":["../../../../packages/components/text-box/src/lib/mask-options.directive.ts","../../../../packages/components/text-box/src/lib/text-box.component.ts","../../../../packages/components/text-box/src/lib/text-box.component.html","../../../../packages/components/text-box/src/lib/text-box.module.ts","../../../../packages/components/text-box/src/acorex-components-text-box.ts"],"sourcesContent":["import { Directive, EventEmitter, Input, Output } from '@angular/core';\nimport { MaskedOptions } from 'imask';\n\nexport type AXMaskOptions = MaskedOptions | any;\n\nexport interface AXMaskOptionsInterface {\n  mask: MaskedOptions | string | RegExp;\n  updateValue?: (masked: string, unmasked: string) => void;\n}\n\n@Directive({ selector: 'ax-mask-options' })\nexport class AXMaskOptionsDirective implements AXMaskOptionsInterface {\n  private _mask: MaskedOptions | string | RegExp;\n\n  @Output()\n  public onMaskChange = new EventEmitter<MaskedOptions | string | RegExp>();\n\n  @Input()\n  public get mask(): MaskedOptions | string | RegExp {\n    return this._mask;\n  }\n\n  public set mask(v: MaskedOptions | string | RegExp) {\n    this._mask = v;\n    this.onMaskChange.emit(v);\n  }\n\n  @Input()\n  updateValue?: (masked: string, unmasked: string) => void;\n}\n","/* eslint-disable @angular-eslint/no-inputs-metadata-property */\nimport {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/cdk/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n  input,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport IMask, { InputMask } from 'imask';\nimport { classes } from 'polytype';\nimport { AXMaskOptions, AXMaskOptionsDirective } from './mask-options.directive';\n\n/**\n * The Textbox is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-text-box',\n  templateUrl: 'text-box.component.html',\n  styleUrls: ['text-box.component.compiled.css'],\n  inputs: [\n    'disabled',\n    'tabIndex',\n    'readonly',\n    'value',\n    'state',\n    'name',\n    'id',\n    'placeholder',\n    'maxLength',\n    'allowNull',\n    'type',\n    'autoComplete',\n    'look',\n  ],\n  outputs: [\n    'onBlur',\n    'onFocus',\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'readonlyChange',\n    'disabledChange',\n    'onKeyDown',\n    'onKeyUp',\n    'onKeyPress',\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: AXComponent, useExisting: AXTextBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXTextBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXTextBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXTextBoxComponent),\n      multi: true,\n    },\n  ],\n  imports: [FormsModule],\n})\nexport class AXTextBoxComponent\n  extends classes(MXInputBaseValueComponent<string>, MXLookComponent)\n  implements AfterContentInit\n{\n  /** @ignore */\n  protected _updateOn: 'change' | 'blur' | 'submit' = 'change';\n\n  /** @ignore */\n  @ViewChild('input', { static: true })\n  protected input: ElementRef<HTMLInputElement>;\n\n  /** @ignore */\n  private _maskObj: InputMask<any>;\n\n  /** @ignore */\n  private _maskOptions: AXMaskOptions = { mask: null };\n\n  /**\n   * This public getter provides access to the `_maskOptions` property, which holds the configuration options for the mask feature.\n   */\n  @Input('mask-options')\n  public get maskOptions(): AXMaskOptions {\n    return this._maskOptions;\n  }\n\n  /**\n   * @param value {AXMaskOptions} - The new mask configuration options to be set.\n   */\n  public set maskOptions(value: AXMaskOptions) {\n    this._maskOptions = value;\n    this.setMask();\n  }\n\n  /**\n   * This property defines the maximum number of characters that the input field can accept. It can be dynamically bound from a parent component template to enforce input length constraints.\n   */\n  @Input()\n  maxLength: number;\n\n  /**\n   * This property determines the type of the input element (e.g., 'text', 'password', 'email', etc.). It can be dynamically bound from a parent component template to change the input field type based on different conditions or requirements.\n   */\n  @Input()\n  type: string;\n\n  /**\n   * This property determines whether the input field should have autocomplete enabled and what type of autocomplete suggestions should be provided\n   */\n  @Input()\n  autoComplete: string;\n\n  /**\n   * This will apply 'my-custom-class' and 'another-class' to the component's root element.\n   */\n  // @Input('class')\n  // classNames: string;\n  classNames = input('', { alias: 'class' });\n\n  /** @ignore */\n  @ContentChild(AXMaskOptionsDirective, { static: true })\n  protected _maskOptionsContent: AXMaskOptionsDirective;\n\n  /** @ignore */\n  ngAfterContentInit() {\n    this.initMask();\n  }\n\n  private initMask() {\n    if (this._maskOptionsContent?.mask) {\n      if (typeof this._maskOptionsContent.mask == 'string' || this._maskOptionsContent.mask instanceof RegExp) {\n        Object.assign(this.maskOptions, {\n          mask: this._maskOptionsContent.mask,\n          unmask: false,\n        });\n      }\n      if (typeof this._maskOptionsContent.mask == 'object') {\n        Object.assign(this.maskOptions, this._maskOptionsContent.mask);\n      }\n    }\n    //\n    this.setMask();\n  }\n\n  /** @ignore */\n  private setMask() {\n    if (this._maskObj) this._maskObj.destroy();\n    //\n    if (this.maskOptions?.mask) {\n      this._maskObj = IMask(this.input.nativeElement, this.maskOptions);\n      this._updateOn = 'submit';\n      this._maskObj.on('accept', this._onComplete.bind(this));\n      this._maskObj.on('complete', this._onComplete.bind(this));\n      if (this.value) {\n        this._maskObj.value = `${this.value}`;\n        this._maskObj.updateValue();\n      }\n    }\n  }\n\n  override internalValueChanged(value): void {\n    if (!value) return;\n    setTimeout(() => {\n      this.initMask();\n    });\n  }\n\n  /** @ignore */\n  private _onComplete(e: InputEvent) {\n    this.commitValue(this._maskObj.value, e?.isTrusted ?? false);\n    if (typeof this._maskOptionsContent?.updateValue === 'function') {\n      this._maskOptionsContent?.updateValue(this._maskObj.value, this._maskObj.unmaskedValue);\n    }\n  }\n\n  /** @ignore */\n  protected _handleModelChange(value: string | null) {\n    this.commitValue(value, true);\n  }\n\n  @HostBinding('attr.name')\n  private get __hostName(): string {\n    return this.name;\n  }\n}\n","<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n","import { AXCommonModule } from '@acorex/cdk/common';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXMaskOptionsDirective } from './mask-options.directive';\nimport { AXTextBoxComponent } from './text-box.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    AXCommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n    AXTextBoxComponent,\n    AXMaskOptionsDirective,\n  ],\n  exports: [AXTextBoxComponent, AXMaskOptionsDirective],\n  providers: [],\n})\nexport class AXTextBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-text-box.mjs","sources":["../../../../packages/components/text-box/src/lib/text-box.component.ts","../../../../packages/components/text-box/src/lib/text-box.component.html","../../../../packages/components/text-box/src/lib/text-box.module.ts","../../../../packages/components/text-box/src/acorex-components-text-box.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-inputs-metadata-property */\nimport {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/cdk/common';\nimport { AXInputMaskDirective, AXInputMaskEvent, AXMaskTokens } from '@acorex/cdk/input-mask';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n  input,\n  output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * The Textbox is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-text-box',\n  templateUrl: 'text-box.component.html',\n  styleUrls: ['text-box.component.compiled.css'],\n  inputs: [\n    'disabled',\n    'tabIndex',\n    'readonly',\n    'value',\n    'state',\n    'name',\n    'id',\n    'placeholder',\n    'maxLength',\n    'allowNull',\n    'type',\n    'autoComplete',\n    'look',\n  ],\n  outputs: [\n    'onBlur',\n    'onFocus',\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'readonlyChange',\n    'disabledChange',\n    'onKeyDown',\n    'onKeyUp',\n    'onKeyPress',\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: AXComponent, useExisting: AXTextBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXTextBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXTextBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXTextBoxComponent),\n      multi: true,\n    },\n  ],\n  imports: [FormsModule, AXInputMaskDirective],\n})\nexport class AXTextBoxComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {\n  /** @ignore */\n  protected _updateOn: 'change' | 'blur' | 'submit' = 'change';\n\n  /** @ignore */\n  @ViewChild('input', { static: true })\n  protected input: ElementRef<HTMLInputElement>;\n\n  /**\n   * Custom mask pattern for 'mask' mode.\n   * Use the following tokens:\n   * - `#`: Required digit (0-9)\n   * - `^`: Required letter (a-z, A-Z)\n   * - `@`: Required alphanumeric (0-9, a-z, A-Z)\n   *\n   * Use ! before token to escape symbol. For example !# will render # instead of a digit.\n   * Any other character is treated as a literal separator.\n   * @example '(###) ###-####' for phone numbers\n   * @example 'AA-####' for license plates\n   * @example '##/##/####' for dates\n   */\n  maskPattern = input<string>(null);\n\n  /**\n   * Custom token definitions to extend or override default mask tokens.\n   * Each token maps to a pattern regex and optional transformation.\n   * @example { 'P': { pattern: /[1-9]/, transform: (c) => c.toUpperCase() } }\n   */\n  customTokens = input<AXMaskTokens>({});\n\n  onMaskChanged = output<AXInputMaskEvent>();\n\n  /**\n   * This property defines the maximum number of characters that the input field can accept. It can be dynamically bound from a parent component template to enforce input length constraints.\n   */\n  @Input()\n  maxLength: number;\n\n  /**\n   * This property determines the type of the input element (e.g., 'text', 'password', 'email', etc.). It can be dynamically bound from a parent component template to change the input field type based on different conditions or requirements.\n   */\n  @Input()\n  type: string;\n\n  /**\n   * This property determines whether the input field should have autocomplete enabled and what type of autocomplete suggestions should be provided\n   */\n  @Input()\n  autoComplete: string;\n\n  /**\n   * This will apply 'my-custom-class' and 'another-class' to the component's root element.\n   */\n  // @Input('class')\n  // classNames: string;\n  classNames = input('', { alias: 'class' });\n\n  private _applyingMask = false;\n\n  override writeValue(value: string): void {\n    super.writeValue(value);\n    if (this.maskPattern() && !this._applyingMask) {\n      this._applyingMask = true;\n      setTimeout(() => {\n        this.input?.nativeElement?.dispatchEvent(new Event('input', { bubbles: true }));\n        this._applyingMask = false;\n      });\n    }\n  }\n\n  /** @ignore */\n  protected _handleModelChange(value: string | null) {\n    if (this._applyingMask) {\n      this.commitValue(value);\n      return;\n    }\n    this.commitValue(value, true);\n  }\n\n  @HostBinding('attr.name')\n  private get __hostName(): string {\n    return this.name;\n  }\n}\n","<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    axInputMask\n    [maskMode]=\"maskPattern() ? 'mask' : null\"\n    [maskPattern]=\"maskPattern()\"\n    [customTokens]=\"customTokens()\"\n    (onMaskChanged)=\"onMaskChanged.emit($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n","import { AXCommonModule } from '@acorex/cdk/common';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXTextBoxComponent } from './text-box.component';\n\n@NgModule({\n  imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent],\n  exports: [AXTextBoxComponent],\n  providers: [],\n})\nexport class AXTextBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-time-duration.mjs

@@ -10,7 +10,6 @@ import * as i0 from '@angular/core';
 import { input, signal, inject, afterNextRender, effect, forwardRef, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { IMask } from 'angular-imask';
 import { classes } from 'polytype';
 
 class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
@@ -22,17 +21,10 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
         this.maskDigits = input('00:00:00:00:00:00:00:000', ...(ngDevMode ? [{ debugName: "maskDigits" }] : []));
         this.minValue = input(null, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
         this.maxValue = input(null, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
-        this.maskOptions = signal({
-            mask: 'HH:MM:SS',
-            blocks: {
-                HH: { mask: IMask.MaskedRange, from: 0, to: 23 },
-                MM: { mask: IMask.MaskedRange, from: 0, to: 59 },
-                SS: { mask: IMask.MaskedRange, from: 0, to: 59 },
-            },
-        }, ...(ngDevMode ? [{ debugName: "maskOptions" }] : []));
+        this.mask = signal(null, ...(ngDevMode ? [{ debugName: "mask" }] : []));
+        this.maskPlaceHolder = signal(null, ...(ngDevMode ? [{ debugName: "maskPlaceHolder" }] : []));
         this.translationService = inject(AXTranslationService);
         this.timeDurationFormatter = inject(AXTimeDurationFormatter);
-        this.translation = inject(AXTranslationService);
         this.onInputFire = false;
         this.onInternalValueChangedFire = false;
         this.YEAR = signal(null, ...(ngDevMode ? [{ debugName: "YEAR" }] : []));
@@ -57,7 +49,7 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
         this.validateFn = async (val) => {
             if (this.minValue() && this.minValue() > val) {
                 const normalizedMaskMin = await this.timeDurationFormatter.millisecondsToMask(this.minValue(), this.valueStart(), this.valueEnd(), true, this.maskDigits(), true);
-                const message = await this.translation.translateAsync('@acorex:validation.messages.min', {
+                const message = await this.translationService.translateAsync('@acorex:validation.messages.min', {
                     params: { value: normalizedMaskMin },
                 });
                 return {
@@ -69,7 +61,7 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
             }
             if (this.maxValue() && this.maxValue() < val) {
                 const normalizedMaskMax = await this.timeDurationFormatter.millisecondsToMask(this.maxValue(), this.valueStart(), this.valueEnd(), true, this.maskDigits(), true);
-                const message = await this.translation.translateAsync('@acorex:validation.messages.max', {
+                const message = await this.translationService.translateAsync('@acorex:validation.messages.max', {
                     params: { value: normalizedMaskMax },
                 });
                 return {
@@ -99,11 +91,32 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
         this.MILLISECOND.set((await this.translationService.translateAsync('@acorex:dateTime.units.millisecond')).toLocaleUpperCase());
         this.isTranslationInit.set(true);
     }
+    maskChange(e) {
+        if (!e.completed)
+            return;
+        if (this.minValue() && this.minValue() > this.value) {
+            this.commitValue(this.minValue());
+        }
+        if (this.maxValue() && this.maxValue() < this.value) {
+            this.commitValue(this.maxValue());
+        }
+    }
     async onInput(event) {
+        if (this.disabled)
+            return;
+        if (this.readonly)
+            return;
+        if (!event.isUserInteraction)
+            return;
         if (this.onInternalValueChangedFire)
             return;
         this.onInputFire = true;
-        const milliseconds = this.maskToMilliseconds(event);
+        if (!event.value) {
+            this.commitValue(null, true);
+            this.onInputFire = false;
+            return;
+        }
+        const milliseconds = this.maskToMilliseconds(event.value);
         this.commitValue(milliseconds, true);
         this.onInputFire = false;
     }
@@ -181,7 +194,7 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
         const startIndex = allUnits.indexOf(this.valueStart());
         const endIndex = allUnits.indexOf(this.valueEnd());
         if (startIndex === -1 || endIndex === -1 || endIndex < startIndex) {
-            this.maskOptions.set({ mask: '', eager: true });
+            this.mask.set(null);
             return null;
         }
         const selectedUnits = allUnits.slice(startIndex, endIndex + 1);
@@ -238,7 +251,9 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
         else {
             result = maskParts.join(':');
         }
-        this.maskOptions.set({ mask: result, eager: true });
+        const convert = result.replace(/0/g, '#');
+        this.mask.set(convert);
+        this.maskPlaceHolder.set(result);
     }
     focusHandler(e) {
         this.onFocus.emit(e);
@@ -249,8 +264,8 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTimeDurationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXTimeDurationComponent, isStandalone: true, selector: "ax-time-duration", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, valueStart: { classPropertyName: "valueStart", publicName: "valueStart", isSignal: true, isRequired: false, transformFunction: null }, valueEnd: { classPropertyName: "valueEnd", publicName: "valueEnd", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maskDigits: { classPropertyName: "maskDigits", publicName: "maskDigits", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTimeDurationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXTimeDurationComponent, isStandalone: true, selector: "ax-time-duration", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, valueStart: { classPropertyName: "valueStart", publicName: "valueStart", isSignal: true, isRequired: false, transformFunction: null }, valueEnd: { classPropertyName: "valueEnd", publicName: "valueEnd", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maskDigits: { classPropertyName: "maskDigits", publicName: "maskDigits", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXTimeDurationComponent },
             { provide: AXFocusableComponent, useExisting: AXTimeDurationComponent },
             { provide: AXValuableComponent, useExisting: AXTimeDurationComponent },
@@ -259,9 +274,9 @@ class AXTimeDurationComponent extends classes((MXInputBaseValueComponent), MXLoo
                 useExisting: forwardRef(() => AXTimeDurationComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  [look]=\"look\"\n  [placeholder]=\"maskOptions().mask\"\n  [mask-options]=\"maskOptions()\"\n  [ngModel]=\"inputValue\"\n  (ngModelChange)=\"onInput($event)\"\n  class=\"ax-time-duration-text\"\n  [disabled]=\"disabled\"\n  [tabIndex]=\"tabIndex\"\n  [readonly]=\"readonly\"\n  (onFocus)=\"focusHandler($event)\"\n  (onBlur)=\"blurHandler($event)\"\n>\n</ax-text-box>\n<ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateFn }\"></ax-validation-rule>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  [look]=\"look\"\n  [placeholder]=\"maskPlaceHolder()\"\n  [maskPattern]=\"mask()\"\n  [(ngModel)]=\"inputValue\"\n  (onValueChanged)=\"onInput($event)\"\n  class=\"ax-time-duration-text\"\n  [disabled]=\"disabled\"\n  [tabIndex]=\"tabIndex\"\n  [readonly]=\"readonly\"\n  (onFocus)=\"focusHandler($event)\"\n  (onBlur)=\"blurHandler($event)\"\n  (onMaskChanged)=\"maskChange($event)\"\n>\n</ax-text-box>\n<ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateFn }\"></ax-validation-rule>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTimeDurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTimeDurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-time-duration', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTextBoxModule, FormsModule, AXSelectBoxModule, AXFormModule], inputs: ['disabled', 'tabIndex', 'readonly', 'look'], outputs: ['onValueChanged'], providers: [
                         { provide: AXComponent, useExisting: AXTimeDurationComponent },
@@ -272,7 +287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => AXTimeDurationComponent),
                             multi: true,
                         },
-                    ], template: "<ax-text-box\n  [look]=\"look\"\n  [placeholder]=\"maskOptions().mask\"\n  [mask-options]=\"maskOptions()\"\n  [ngModel]=\"inputValue\"\n  (ngModelChange)=\"onInput($event)\"\n  class=\"ax-time-duration-text\"\n  [disabled]=\"disabled\"\n  [tabIndex]=\"tabIndex\"\n  [readonly]=\"readonly\"\n  (onFocus)=\"focusHandler($event)\"\n  (onBlur)=\"blurHandler($event)\"\n>\n</ax-text-box>\n<ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateFn }\"></ax-validation-rule>\n" }]
+                    ], template: "<ax-text-box\n  [look]=\"look\"\n  [placeholder]=\"maskPlaceHolder()\"\n  [maskPattern]=\"mask()\"\n  [(ngModel)]=\"inputValue\"\n  (onValueChanged)=\"onInput($event)\"\n  class=\"ax-time-duration-text\"\n  [disabled]=\"disabled\"\n  [tabIndex]=\"tabIndex\"\n  [readonly]=\"readonly\"\n  (onFocus)=\"focusHandler($event)\"\n  (onBlur)=\"blurHandler($event)\"\n  (onMaskChanged)=\"maskChange($event)\"\n>\n</ax-text-box>\n<ax-validation-rule rule=\"callback\" [options]=\"{ validate: validateFn }\"></ax-validation-rule>\n" }]
         }], propDecorators: { valueStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueStart", required: false }] }], valueEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueEnd", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], maskDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskDigits", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], __hostName: [{
                 type: HostBinding,
                 args: ['attr.name']
@@ -281,11 +296,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 const COMPONENT = [AXTimeDurationComponent];
 const MODULES = [];
 class AXTimeDurationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTimeDurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXTimeDurationModule, imports: [AXTimeDurationComponent], exports: [AXTimeDurationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTimeDurationModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTimeDurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXTimeDurationModule, imports: [AXTimeDurationComponent], exports: [AXTimeDurationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTimeDurationModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTimeDurationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTimeDurationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],