@acorex/components 20.2.21 → 21.0.0-next.10

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

@@ -1,15 +1,12 @@
+import { AXInputMaskDirective } from '@acorex/cdk/input-mask';
 import * as i0 from '@angular/core';
-import { input, forwardRef, HostBinding, HostListener, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { IMaskDirective, IMaskModule } from 'angular-imask';
-import { createMask } from 'imask';
+import { input, model, signal, viewChild, afterNextRender, effect, forwardRef, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { toNumber, isEmpty } from 'lodash-es';
 import { classes } from 'polytype';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { CommonModule } from '@angular/common';
 
 /**
  * The NumberBox is a component which detects user interaction and triggers a corresponding event
@@ -17,296 +14,118 @@ import { CommonModule } from '@angular/common';
  * @category Components
  */
 class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
-    /**
-     *  A number value that specifies the all digits of number.
-     */
-    get allDigits() {
-        return this._allDigits;
-    }
-    /**
-     * Sets the all digits of number.
-     * @param {number} v
-     */
-    set allDigits(v) {
-        this.setOption({
-            name: 'allDigits',
-            value: v,
-        });
-    }
-    /**
-     *  A character value that specifies the separator character.
-     */
-    get thousandsSeparator() {
-        return this._thousandsSeparator;
-    }
-    /**
-     * Sets the thousands separator for formatting.
-     * @param {string} v
-     */
-    set thousandsSeparator(v) {
-        this.setOption({
-            name: 'thousandsSeparator',
-            value: v ?? '',
-        });
-    }
-    /**
-     *  A character value that specifies the separator character.
-     */
-    get padDecimalZeros() {
-        return this._padDecimalZeros;
-    }
-    /**
-     * Sets whether decimal zeros should be padded.
-     * @param {boolean} v
-     */
-    set padDecimalZeros(v) {
-        this.setOption({
-            name: 'padDecimalZeros',
-            value: v,
-        });
-    }
-    /**
-     *  Specifies the number of decimals that the user can enter
-     */
-    get decimals() {
-        return this._decimals;
-    }
-    /**
-     * Sets the decimal places; defaults to 0 if not provided.
-     */
-    set decimals(v) {
-        this.setOption({
-            name: 'decimals',
-            value: v ?? 0,
-        });
-    }
-    /**
-     *  Specifies the smallest value that is valid
-     */
-    get minValue() {
-        return this._minValue;
-    }
-    /**
-     * Sets the number of decimal places to be used.
-     * @param {number} v
-     * @defaultvalue 0
-     */
-    set minValue(v) {
-        this.setOption({
-            name: 'minValue',
-            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
-        });
-    }
-    /**
-     *  Specifies the greatest value that is valid
-     */
-    get maxValue() {
-        return this._maxValue;
-    }
-    /**
-     * Sets the maximum allowable value, defaulting to `Number.MAX_SAFE_INTEGER` if null.
-     * @param v
-     */
-    set maxValue(v) {
-        this.setOption({
-            name: 'maxValue',
-            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
-        });
-    }
     constructor() {
-        super();
-        /**
-         * 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.
-         */
-        this.type = input('tel', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        /**
-         *  boolean value that specifies the number box change step by scrolling.
-         */
-        this.changeOnScroll = false;
-        /** @ignore */
-        this._allDigits = 0;
-        /** @ignore */
-        this._padDecimalZeros = false;
-        /**
-         *  Specifies the value that is used to increment or decrement the **Integer** part of number
-         */
-        this.step = 1;
-        /** @ignore */
-        this._decimals = 0;
-        /**
-         *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
-         */
-        this.decimalStep = 'auto';
-        /**
-         *  Specifies whether the Up and Down spin buttons will be rendered or not
-         */
-        this.showSpinButtons = true;
-        /** @ignore */
-        this._minValue = Number.MIN_SAFE_INTEGER;
-        /** @ignore */
-        this._maxValue = Number.MAX_SAFE_INTEGER;
-        /** @ignore */
-        this._onWheelFlag = false;
-        this.onFocus.subscribe(() => {
-            this._onWheelFlag = true;
-            this.input.nativeElement.select();
-        });
-        this.onBlur.subscribe(() => {
-            this._onWheelFlag = false;
+        super(...arguments);
+        this.minValue = input(null, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
+        this.maxValue = input(null, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
+        this.showSpinButtons = input(true, ...(ngDevMode ? [{ debugName: "showSpinButtons" }] : []));
+        this.thousandsSeparator = model(null, ...(ngDevMode ? [{ debugName: "thousandsSeparator" }] : []));
+        this.decimals = input(0, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
+        this.changeOnScroll = input(false, ...(ngDevMode ? [{ debugName: "changeOnScroll" }] : []));
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+        this.mode = signal('digits', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.input = viewChild('input', ...(ngDevMode ? [{ debugName: "input" }] : []));
+        this.stringValue = '0';
+        this.#init = afterNextRender(() => {
+            this.onFocus.subscribe(() => {
+                this.input().nativeElement.select();
+            });
         });
+        this.#eff = effect(() => {
+            if (this.thousandsSeparator() && this.decimals()) {
+                this.mode.set('digits');
+                return;
+            }
+            else if (this.thousandsSeparator()) {
+                this.mode.set('thousandsSeparator');
+                return;
+            }
+            else if (this.decimals()) {
+                this.mode.set('decimal');
+            }
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
-    /** @ignore */
-    ngAfterViewInit() {
-        this._updateMask();
-    }
-    /**
-     * Handles internal option changes and updates the mask accordingly.
-     */
-    internalOptionChanged() {
-        this._updateMask();
-    }
-    /**
-     * Resets the input element to its default state and calls the parent class reset method.
-     */
-    reset() {
-        this.input.nativeElement.value = null;
-        super.reset(true);
-    }
-    /**
-     * Ensures the value is within the min-max range, returning the default if null.
-     * @param value
-     */
-    internalSetValue(value) {
-        // || (value == 0 && !this._maskObj.value)
-        if (value == null) {
-            return this.defaultValue;
+    internalValueChanged(value) {
+        if (!value) {
+            this.stringValue = '0';
+            return;
         }
-        const v = toNumber(value);
-        if (v < this.minValue)
-            return this.minValue;
-        if (v > this.maxValue)
-            return this.maxValue;
-        return v;
+        this.stringValue = String(value);
     }
-    /** @ignore */
-    _updateMask() {
-        if (!this._maskObj) {
-            this._maskObj = createMask({
-                mask: Number,
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
-            });
-            this._maskObj.format = (v, m) => {
-                return !isNaN(v)
-                    ? v.toLocaleString('en-US', {
-                        useGrouping: false,
-                        maximumFractionDigits: 20,
-                    })
-                    : '';
-            };
+    #init;
+    #eff;
+    plusValue() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this.mode() === 'thousandsSeparator') {
+            const removeSeparator = this.stringValue.split(this.thousandsSeparator()).join('');
+            const addStep = +removeSeparator + this.step();
+            this.commitValue(addStep);
+            const addSeparator = addStep.toLocaleString();
+            const replaceSeparator = addSeparator.split(',').join(this.thousandsSeparator());
+            this.stringValue = replaceSeparator;
         }
         else {
-            this._maskObj.updateOptions({
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
-            });
+            const convert = +this.stringValue + this.step();
+            this.commitValue(convert);
+            this.stringValue = convert.toString();
         }
-        this._maskDirective?.maskRef?.updateValue();
-        this._maskDirective?.maskRef?.updateControl();
     }
-    /** @ignore */
-    _handleModelChange(value) {
-        if (value == 0 && isEmpty(this.input?.nativeElement?.value)) {
-            value = null;
+    minusValue() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this.mode() === 'thousandsSeparator') {
+            const removeSeparator = this.stringValue.split(this.thousandsSeparator()).join('');
+            const addStep = +removeSeparator - this.step();
+            this.commitValue(addStep);
+            const addSeparator = addStep.toLocaleString();
+            const replaceSeparator = addSeparator.split(',').join(this.thousandsSeparator());
+            this.stringValue = replaceSeparator;
+        }
+        else {
+            const convert = +this.stringValue + this.step() * -1;
+            this.commitValue(convert);
+            this.stringValue = convert.toString();
         }
-        this.commitValue(value, true);
     }
-    /** @ignore */
-    _handleOnKeydownEvent(e) {
+    handleOnKeydownEvent(e) {
+        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+            return;
         if (this.disabled || this.readonly)
             return;
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        const input = e.target;
-        const valStr = input.value;
-        const decimalPointIndex = valStr.indexOf('.');
-        const _cursorPos = input.selectionStart;
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {
-                e.key === 'ArrowDown' ? this.decimalStepDown(true) : this.decimalStepUp(true);
-            }
-            else {
-                e.key === 'ArrowDown' ? this.stepDown(true) : this.stepUp(true);
-            }
-            ignore();
-            setTimeout(() => {
-                input.setSelectionRange(_cursorPos, _cursorPos);
-            }, 5);
+        if (e.key === 'ArrowUp') {
+            this.plusValue();
+        }
+        else if (e.key === 'ArrowDown') {
+            this.minusValue();
         }
-        super.emitOnKeydownEvent(e);
     }
-    /** @ignore */
-    _handleUpDownClick(v, e) {
-        const isUserInteraction = e.isTrusted;
+    handleUpClick() {
         if (this.disabled || this.readonly)
             return;
-        v == 1 ? this.stepUp(isUserInteraction) : this.stepDown(isUserInteraction);
+        this.plusValue();
     }
-    /**
-     * Increases the value by the step amount, ensuring it's at least the minimum value.
-     */
-    stepUp(u = false) {
-        if (!this.value) {
-            this.commitValue(Math.max(this.minValue, 0), u);
-        }
-        this.commitValue(this.value + toNumber(this.step), u);
-    }
-    /**
-     * Decreases the value by the step amount, ensuring it's at least the minimum value.
-     */
-    stepDown(u = false) {
-        if (!this.value) {
-            this.commitValue(Math.max(this.minValue, 0), u);
-        }
-        this.commitValue(this.value - toNumber(this.step), u);
+    handleDownClick() {
+        this.minusValue();
     }
-    /**
-     * Increases the value by the decimal step amount, using 'auto' or a custom step value.
-     */
-    decimalStepUp(u = false) {
-        if (!this.value) {
-            this.commitValue(Math.max(this.minValue, 0), u);
-        }
-        this.commitValue(this.value + toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep), u);
-    }
-    /**
-     * Decreases the value by the decimal step amount, using 'auto' or a custom step value.
-     */
-    decimalStepDown(u = false) {
-        if (!this.value) {
-            this.commitValue(Math.max(this.minValue, 0), u);
+    handleOnMaskChanged(e) {
+        if (!e.unmasked || isNaN(+e.unmasked)) {
+            this.commitValue(null);
+            return;
         }
-        this.commitValue(this.value - toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep), u);
+        this.commitValue(+e.unmasked);
     }
     onWheel(event) {
-        if (this.changeOnScroll && this._onWheelFlag) {
+        if (this.changeOnScroll()) {
             event.preventDefault();
             if (!this.disabled && !this.readonly) {
                 if (event.deltaY > 0) {
-                    this.commitValue(this.value - this.step);
+                    this.minusValue();
                 }
                 else {
-                    this.commitValue(this.value + this.step);
+                    this.plusValue();
                 }
             }
         }
@@ -314,8 +133,8 @@ class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: AXNumberBoxComponent, isStandalone: true, selector: "ax-number-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, changeOnScroll: { classPropertyName: "changeOnScroll", publicName: "changeOnScroll", isSignal: false, isRequired: false, transformFunction: null }, allDigits: { classPropertyName: "allDigits", publicName: "allDigits", isSignal: false, isRequired: false, transformFunction: null }, thousandsSeparator: { classPropertyName: "thousandsSeparator", publicName: "thousandsSeparator", isSignal: false, isRequired: false, transformFunction: null }, padDecimalZeros: { classPropertyName: "padDecimalZeros", publicName: "padDecimalZeros", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: false, isRequired: false, transformFunction: null }, decimalStep: { classPropertyName: "decimalStep", publicName: "decimalStep", isSignal: false, isRequired: false, transformFunction: null }, showSpinButtons: { classPropertyName: "showSpinButtons", publicName: "showSpinButtons", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { listeners: { "wheel": "onWheel($event)" }, properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: AXNumberBoxComponent, isStandalone: true, selector: "ax-number-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, look: { classPropertyName: "look", publicName: "look", isSignal: false, 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 }, showSpinButtons: { classPropertyName: "showSpinButtons", publicName: "showSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, thousandsSeparator: { classPropertyName: "thousandsSeparator", publicName: "thousandsSeparator", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, changeOnScroll: { classPropertyName: "changeOnScroll", publicName: "changeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", thousandsSeparator: "thousandsSeparatorChange" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXNumberBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
             { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
@@ -325,7 +144,7 @@ class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
                 useExisting: forwardRef(() => AXNumberBoxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ 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    [attr.type]=\"type()\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\"\n    [imask]=\"_maskObj\"\n    [unmask]=\"'typed'\"\n    [attr.min]=\"minValue\"\n    [attr.max]=\"maxValue\"\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    (keydown)=\"_handleOnKeydownEvent($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  @if (showSpinButtons) {\n    <div class=\"ax-number-box-control\">\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"_handleUpDownClick(1, $event)\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-up ax-arrow-button\"></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"_handleUpDownClick(-1, $event)\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-down ax-arrow-button\"></span>\n      </button>\n    </div>\n  }\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: ["ax-number-box input::-webkit-outer-spin-button,ax-number-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-number-box input[type=number]{-moz-appearance:textfield}ax-number-box .ax-number-box-control{--ax-comp-editor-button-height: 50%;--ax-comp-editor-button-font-size: .75rem;height:100%;display:flex;flex-direction:column}ax-number-box .ax-number-box-control button{font-size:.75rem}ax-number-box .ax-number-box-control button:first-child{align-items:flex-end;display:flex}ax-number-box .ax-number-box-control button:last-child{align-items:flex-start;display:flex}\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: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container  ax-{{ 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    axInputMask\n    (onMaskChanged)=\"handleOnMaskChanged($event)\"\n    [maskMode]=\"mode()\"\n    inputmode=\"numeric\"\n    class=\"ax-input\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [separator]=\"thousandsSeparator()\"\n    [decimal]=\"decimals()\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [(ngModel)]=\"stringValue\"\n    (keydown)=\"handleOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    (wheel)=\"onWheel($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showSpinButtons()) {\n    <div class=\"ax-number-box-control\">\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"handleUpClick()\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-up ax-arrow-button\"></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"handleDownClick()\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-down ax-arrow-button\"></span>\n      </button>\n    </div>\n  }\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: ["ax-number-box input::-webkit-outer-spin-button,ax-number-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-number-box input[type=number]{-moz-appearance:textfield}ax-number-box .ax-number-box-control{--ax-comp-editor-button-height: 50%;--ax-comp-editor-button-font-size: .75rem;height:70%;display:flex;flex-direction:column}ax-number-box .ax-number-box-control button{font-size:.75rem;align-items:center}\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"], outputs: ["onMaskChanged"], exportAs: ["axInputMask"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
@@ -350,50 +169,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                             useExisting: forwardRef(() => AXNumberBoxComponent),
                             multi: true,
                         },
-                    ], imports: [FormsModule, IMaskDirective], template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ 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    [attr.type]=\"type()\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\"\n    [imask]=\"_maskObj\"\n    [unmask]=\"'typed'\"\n    [attr.min]=\"minValue\"\n    [attr.max]=\"maxValue\"\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    (keydown)=\"_handleOnKeydownEvent($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  @if (showSpinButtons) {\n    <div class=\"ax-number-box-control\">\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"_handleUpDownClick(1, $event)\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-up ax-arrow-button\"></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"_handleUpDownClick(-1, $event)\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-down ax-arrow-button\"></span>\n      </button>\n    </div>\n  }\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: ["ax-number-box input::-webkit-outer-spin-button,ax-number-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-number-box input[type=number]{-moz-appearance:textfield}ax-number-box .ax-number-box-control{--ax-comp-editor-button-height: 50%;--ax-comp-editor-button-font-size: .75rem;height:100%;display:flex;flex-direction:column}ax-number-box .ax-number-box-control button{font-size:.75rem}ax-number-box .ax-number-box-control button:first-child{align-items:flex-end;display:flex}ax-number-box .ax-number-box-control button:last-child{align-items:flex-start;display:flex}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input']
-            }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], changeOnScroll: [{
-                type: Input
-            }], allDigits: [{
-                type: Input
-            }], thousandsSeparator: [{
-                type: Input
-            }], padDecimalZeros: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], decimals: [{
-                type: Input
-            }], decimalStep: [{
-                type: Input
-            }], showSpinButtons: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], classNames: [{
-                type: Input,
-                args: ['class']
-            }], _maskDirective: [{
-                type: ViewChild,
-                args: [IMaskDirective]
-            }], onWheel: [{
-                type: HostListener,
-                args: ['wheel', ['$event']]
-            }], __hostName: [{
+                    ], imports: [FormsModule, AXInputMaskDirective, AXButtonModule, AXDecoratorModule], template: "<div\n  class=\"ax-editor-container  ax-{{ 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    axInputMask\n    (onMaskChanged)=\"handleOnMaskChanged($event)\"\n    [maskMode]=\"mode()\"\n    inputmode=\"numeric\"\n    class=\"ax-input\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [separator]=\"thousandsSeparator()\"\n    [decimal]=\"decimals()\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [(ngModel)]=\"stringValue\"\n    (keydown)=\"handleOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    (wheel)=\"onWheel($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showSpinButtons()) {\n    <div class=\"ax-number-box-control\">\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"handleUpClick()\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-up ax-arrow-button\"></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"handleDownClick()\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-down ax-arrow-button\"></span>\n      </button>\n    </div>\n  }\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: ["ax-number-box input::-webkit-outer-spin-button,ax-number-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-number-box input[type=number]{-moz-appearance:textfield}ax-number-box .ax-number-box-control{--ax-comp-editor-button-height: 50%;--ax-comp-editor-button-font-size: .75rem;height:70%;display:flex;flex-direction:column}ax-number-box .ax-number-box-control button{font-size:.75rem;align-items:center}\n"] }]
+        }], propDecorators: { minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinButtons", required: false }] }], thousandsSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thousandsSeparator", required: false }] }, { type: i0.Output, args: ["thousandsSeparatorChange"] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], changeOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeOnScroll", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], __hostName: [{
                 type: HostBinding,
                 args: ['attr.name']
             }] } });
 
 const COMPONENT = [AXNumberBoxComponent];
-const MODULES = [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, IMaskModule];
+const MODULES = [FormsModule, AXInputMaskDirective, AXButtonModule, AXDecoratorModule];
 class AXNumberBoxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxModule, imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, IMaskModule, AXNumberBoxComponent], exports: [AXNumberBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxModule, imports: [FormsModule, AXInputMaskDirective, AXButtonModule, AXDecoratorModule, AXNumberBoxComponent], exports: [AXNumberBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxModule, imports: [FormsModule, AXButtonModule, AXDecoratorModule, COMPONENT] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,