@acorex/components 7.1.0 → 7.1.2

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

@@ -12,294 +12,294 @@ import { FormsModule } from '@angular/forms';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
-/**
- * The NumberBox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXNumberBoxComponent extends AXBaseTextBoxMixin {
-    cdr;
-    input;
-    _thousandsSeparator;
-    /**
-     *  A character value that specifies the separator character.
-     */
-    get thousandsSeparator() {
-        return this._thousandsSeparator;
-    }
-    set thousandsSeparator(v) {
-        this._setOption({
-            name: 'thousandsSeparator',
-            value: v ?? '',
-        });
-    }
-    _padDecimalZeros = false;
-    /**
-     *  A character value that specifies the separator character.
-     */
-    get padDecimalZeros() {
-        return this._padDecimalZeros;
-    }
-    set padDecimalZeros(v) {
-        this._setOption({
-            name: 'padDecimalZeros',
-            value: v,
-        });
-    }
-    /**
-     *  Specifies the value that is used to increment or decrement the **Integer** part of number
-     */
-    step = 1;
-    _decimals = 0;
-    /**
-     *  Specifies the number of decimals that the user can enter
-     */
-    get decimals() {
-        return this._decimals;
-    }
-    set decimals(v) {
-        this._setOption({
-            name: 'decimals',
-            value: v ?? 0,
-        });
-    }
-    /**
-     *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
-     */
-    decimalStep = 'auto';
-    /**
-     *  Specifies whether the Up and Down spin buttons will be rendered or not
-     */
-    showSpinButtons = true;
-    _minValue = Number.MIN_SAFE_INTEGER;
-    /**
-     *  Specifies the smallest value that is valid
-     */
-    get minValue() {
-        return this._minValue;
-    }
-    set minValue(v) {
-        this._setOption({
-            name: 'minValue',
-            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
-        });
-    }
-    _maxValue = Number.MAX_SAFE_INTEGER;
-    /**
-     *  Specifies the greatest value that is valid
-     */
-    get maxValue() {
-        return this._maxValue;
-    }
-    set maxValue(v) {
-        this._setOption({
-            name: 'maxValue',
-            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
-        });
-    }
-    /**
-     *  @ignore
-     */
-    _maskObj;
-    _maskDirective;
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-    }
-    onViewInit() {
-        super.onViewInit();
-        this._updateMask();
-    }
-    _onOptionChanged(option) {
-        super._onOptionChanged(option);
-        this._updateMask();
-    }
-    focus() {
-        this.input.nativeElement.focus();
-    }
-    _updateMask() {
-        if (!this._maskObj) {
-            this._maskObj = IMask.createMask({
-                mask: Number,
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
-            });
-        }
-        else {
-            this._maskObj.updateOptions({
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
-            });
-        }
-        this._maskDirective?.maskRef?.updateValue();
-        this._maskDirective?.maskRef?.updateControl();
-    }
-    _handleOnKeydownEvent(e) {
-        if (this.disabled || this.readonly)
-            return;
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        this._setUserInteraction();
-        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() : this.decimalStepUp();
-            }
-            else {
-                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
-            }
-            ignore();
-            setTimeout(() => {
-                input.setSelectionRange(_cursorPos, _cursorPos);
-            }, 5);
-        }
-        super._emitOnKeydownEvent(e);
-    }
-    _handleUpDownClick(v) {
-        if (this.disabled || this.readonly)
-            return;
-        this._setUserInteraction();
-        v == 1 ? this.stepUp() : this.stepDown();
-    }
-    _setValue(value) {
-        if ((value == null || (value == 0 && !this._maskObj.value)) && this.allowNull) {
-            return null;
-        }
-        const v = toNumber(value);
-        if (v < this.minValue)
-            return this.minValue;
-        if (v > this.maxValue)
-            return this.maxValue;
-        return v;
-    }
-    stepUp() {
-        if (!this.value) {
-            this.value = Math.max(this.minValue, 0);
-        }
-        this.value += toNumber(this.step);
-    }
-    stepDown() {
-        if (!this.value) {
-            this.value = Math.max(this.minValue, 0);
-        }
-        this.value -= toNumber(this.step);
-    }
-    decimalStepUp() {
-        if (!this.value) {
-            this.value = Math.max(this.minValue, 0);
-        }
-        this.value += toNumber(this.decimalStep == 'auto'
-            ? 1 / Math.pow(10, this.decimals)
-            : this.decimalStep);
-    }
-    decimalStepDown() {
-        if (!this.value) {
-            this.value = Math.max(this.minValue, 0);
-        }
-        this.value -= toNumber(this.decimalStep == 'auto'
-            ? 1 / Math.pow(10, this.decimals)
-            : this.decimalStep);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", state: "state", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<input\r\n  #input\r\n  class=\"ax-input\"\r\n  type=\"text\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocomplete]=\"autoComplete\"\r\n  [imask]=\"_maskObj\"\r\n  [unmask]=\"'typed'\"\r\n  [attr.min]=\"minValue\"\r\n  [attr.max]=\"maxValue\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  [class.ax-state-readonly]=\"readonly\"\r\n  [disabled]=\"disabled\"\r\n  [readonly]=\"readonly\"\r\n  [tabindex]=\"tabIndex\"\r\n  [(ngModel)]=\"value\"\r\n  (keydown)=\"_handleOnKeydownEvent($event)\"\r\n  (keyup)=\"_emitOnKeyupEvent($event)\"\r\n  (keypress)=\"_emitOnKeypressEvent($event)\"\r\n  (focus)=\"_emitOnFocusEvent($event)\"\r\n  (blur)=\"_emitOnBlurEvent($event)\" />\r\n\r\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(1)\" tabindex=\"-1\">\r\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\r\n  </button>\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(-1)\">\r\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\r\n  </button>\r\n</div>\r\n\r\n<!-- <div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill -ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div> -->\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n", styles: [".ax-number-box-control{display:flex;height:100%;align-items:center;justify-content:center;margin-inline-end:.25rem;flex-direction:column}.ax-number-box-control .ax-general-button{display:flex;width:1.25rem;height:1rem;border-radius:.2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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: "directive", type: i3.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-number-box', inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'size',
-                        'value',
-                        'state',
-                        'placeholder',
-                        'maxLength',
-                        'allowNull',
-                        'type',
-                        'autoComplete',
-                        'readonly',
-                        'allowNull',
-                        'value',
-                        'name',
-                        'checked',
-                    ], outputs: [
-                        'valueChange',
-                        'stateChange',
-                        'onValueChanged',
-                        'onBlur',
-                        'onFocus'
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<input\r\n  #input\r\n  class=\"ax-input\"\r\n  type=\"text\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocomplete]=\"autoComplete\"\r\n  [imask]=\"_maskObj\"\r\n  [unmask]=\"'typed'\"\r\n  [attr.min]=\"minValue\"\r\n  [attr.max]=\"maxValue\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  [class.ax-state-readonly]=\"readonly\"\r\n  [disabled]=\"disabled\"\r\n  [readonly]=\"readonly\"\r\n  [tabindex]=\"tabIndex\"\r\n  [(ngModel)]=\"value\"\r\n  (keydown)=\"_handleOnKeydownEvent($event)\"\r\n  (keyup)=\"_emitOnKeyupEvent($event)\"\r\n  (keypress)=\"_emitOnKeypressEvent($event)\"\r\n  (focus)=\"_emitOnFocusEvent($event)\"\r\n  (blur)=\"_emitOnBlurEvent($event)\" />\r\n\r\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(1)\" tabindex=\"-1\">\r\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\r\n  </button>\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(-1)\">\r\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\r\n  </button>\r\n</div>\r\n\r\n<!-- <div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill -ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div> -->\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n", styles: [".ax-number-box-control{display:flex;height:100%;align-items:center;justify-content:center;margin-inline-end:.25rem;flex-direction:column}.ax-number-box-control .ax-general-button{display:flex;width:1.25rem;height:1rem;border-radius:.2rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
-                type: ViewChild,
-                args: ['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
-            }], _maskDirective: [{
-                type: ViewChild,
-                args: [IMaskDirective]
+/**
+ * The NumberBox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXNumberBoxComponent extends AXBaseTextBoxMixin {
+    cdr;
+    input;
+    _thousandsSeparator;
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get thousandsSeparator() {
+        return this._thousandsSeparator;
+    }
+    set thousandsSeparator(v) {
+        this._setOption({
+            name: 'thousandsSeparator',
+            value: v ?? '',
+        });
+    }
+    _padDecimalZeros = false;
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get padDecimalZeros() {
+        return this._padDecimalZeros;
+    }
+    set padDecimalZeros(v) {
+        this._setOption({
+            name: 'padDecimalZeros',
+            value: v,
+        });
+    }
+    /**
+     *  Specifies the value that is used to increment or decrement the **Integer** part of number
+     */
+    step = 1;
+    _decimals = 0;
+    /**
+     *  Specifies the number of decimals that the user can enter
+     */
+    get decimals() {
+        return this._decimals;
+    }
+    set decimals(v) {
+        this._setOption({
+            name: 'decimals',
+            value: v ?? 0,
+        });
+    }
+    /**
+     *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
+     */
+    decimalStep = 'auto';
+    /**
+     *  Specifies whether the Up and Down spin buttons will be rendered or not
+     */
+    showSpinButtons = true;
+    _minValue = Number.MIN_SAFE_INTEGER;
+    /**
+     *  Specifies the smallest value that is valid
+     */
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(v) {
+        this._setOption({
+            name: 'minValue',
+            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
+        });
+    }
+    _maxValue = Number.MAX_SAFE_INTEGER;
+    /**
+     *  Specifies the greatest value that is valid
+     */
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this._setOption({
+            name: 'maxValue',
+            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
+        });
+    }
+    /**
+     *  @ignore
+     */
+    _maskObj;
+    _maskDirective;
+    /**
+     *  @ignore
+     */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+    }
+    onViewInit() {
+        super.onViewInit();
+        this._updateMask();
+    }
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        this._updateMask();
+    }
+    focus() {
+        this.input.nativeElement.focus();
+    }
+    _updateMask() {
+        if (!this._maskObj) {
+            this._maskObj = IMask.createMask({
+                mask: Number,
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
+            });
+        }
+        else {
+            this._maskObj.updateOptions({
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
+            });
+        }
+        this._maskDirective?.maskRef?.updateValue();
+        this._maskDirective?.maskRef?.updateControl();
+    }
+    _handleOnKeydownEvent(e) {
+        if (this.disabled || this.readonly)
+            return;
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this._setUserInteraction();
+        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() : this.decimalStepUp();
+            }
+            else {
+                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
+            }
+            ignore();
+            setTimeout(() => {
+                input.setSelectionRange(_cursorPos, _cursorPos);
+            }, 5);
+        }
+        super._emitOnKeydownEvent(e);
+    }
+    _handleUpDownClick(v) {
+        if (this.disabled || this.readonly)
+            return;
+        this._setUserInteraction();
+        v == 1 ? this.stepUp() : this.stepDown();
+    }
+    _setValue(value) {
+        if ((value == null || (value == 0 && !this._maskObj.value)) && this.allowNull) {
+            return null;
+        }
+        const v = toNumber(value);
+        if (v < this.minValue)
+            return this.minValue;
+        if (v > this.maxValue)
+            return this.maxValue;
+        return v;
+    }
+    stepUp() {
+        if (!this.value) {
+            this.value = Math.max(this.minValue, 0);
+        }
+        this.value += toNumber(this.step);
+    }
+    stepDown() {
+        if (!this.value) {
+            this.value = Math.max(this.minValue, 0);
+        }
+        this.value -= toNumber(this.step);
+    }
+    decimalStepUp() {
+        if (!this.value) {
+            this.value = Math.max(this.minValue, 0);
+        }
+        this.value += toNumber(this.decimalStep == 'auto'
+            ? 1 / Math.pow(10, this.decimals)
+            : this.decimalStep);
+    }
+    decimalStepDown() {
+        if (!this.value) {
+            this.value = Math.max(this.minValue, 0);
+        }
+        this.value -= toNumber(this.decimalStep == 'auto'
+            ? 1 / Math.pow(10, this.decimals)
+            : this.decimalStep);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", state: "state", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<input\r\n  #input\r\n  class=\"ax-input\"\r\n  type=\"text\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocomplete]=\"autoComplete\"\r\n  [imask]=\"_maskObj\"\r\n  [unmask]=\"'typed'\"\r\n  [attr.min]=\"minValue\"\r\n  [attr.max]=\"maxValue\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  [class.ax-state-readonly]=\"readonly\"\r\n  [disabled]=\"disabled\"\r\n  [readonly]=\"readonly\"\r\n  [tabindex]=\"tabIndex\"\r\n  [(ngModel)]=\"value\"\r\n  (keydown)=\"_handleOnKeydownEvent($event)\"\r\n  (keyup)=\"_emitOnKeyupEvent($event)\"\r\n  (keypress)=\"_emitOnKeypressEvent($event)\"\r\n  (focus)=\"_emitOnFocusEvent($event)\"\r\n  (blur)=\"_emitOnBlurEvent($event)\" />\r\n\r\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(1)\" tabindex=\"-1\">\r\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\r\n  </button>\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(-1)\">\r\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\r\n  </button>\r\n</div>\r\n\r\n<!-- <div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill -ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div> -->\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n", styles: [".ax-number-box-control{display:flex;height:100%;align-items:center;justify-content:center;margin-inline-end:.25rem;flex-direction:column}.ax-number-box-control .ax-general-button{display:flex;width:1.25rem;height:1rem;border-radius:.2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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: "directive", type: i3.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-number-box', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'size',
+                        'value',
+                        'state',
+                        'placeholder',
+                        'maxLength',
+                        'allowNull',
+                        'type',
+                        'autoComplete',
+                        'readonly',
+                        'allowNull',
+                        'value',
+                        'name',
+                        'checked',
+                    ], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus'
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<input\r\n  #input\r\n  class=\"ax-input\"\r\n  type=\"text\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocomplete]=\"autoComplete\"\r\n  [imask]=\"_maskObj\"\r\n  [unmask]=\"'typed'\"\r\n  [attr.min]=\"minValue\"\r\n  [attr.max]=\"maxValue\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  [class.ax-state-readonly]=\"readonly\"\r\n  [disabled]=\"disabled\"\r\n  [readonly]=\"readonly\"\r\n  [tabindex]=\"tabIndex\"\r\n  [(ngModel)]=\"value\"\r\n  (keydown)=\"_handleOnKeydownEvent($event)\"\r\n  (keyup)=\"_emitOnKeyupEvent($event)\"\r\n  (keypress)=\"_emitOnKeypressEvent($event)\"\r\n  (focus)=\"_emitOnFocusEvent($event)\"\r\n  (blur)=\"_emitOnBlurEvent($event)\" />\r\n\r\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(1)\" tabindex=\"-1\">\r\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\r\n  </button>\r\n  <button class=\"ax-general-button ax-button-icon\" (click)=\"_handleUpDownClick(-1)\">\r\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\r\n  </button>\r\n</div>\r\n\r\n<!-- <div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\" [tabIndex]=\"-1\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-icon-arrow-fill -ax-rotation-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div> -->\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n", styles: [".ax-number-box-control{display:flex;height:100%;align-items:center;justify-content:center;margin-inline-end:.25rem;flex-direction:column}.ax-number-box-control .ax-general-button{display:flex;width:1.25rem;height:1rem;border-radius:.2rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ['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
+            }], _maskDirective: [{
+                type: ViewChild,
+                args: [IMaskDirective]
             }] } });
 
-const COMPONENT = [AXNumberBoxComponent];
-const MODULES = [
-    CommonModule,
-    FormsModule,
-    AXButtonModule,
-    AXDecoratorModule,
-    IMaskModule
-];
-class AXNumberBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
-            FormsModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            IMaskModule], exports: [AXNumberBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, imports: [MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+const COMPONENT = [AXNumberBoxComponent];
+const MODULES = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    IMaskModule
+];
+class AXNumberBoxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
+            FormsModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            IMaskModule], exports: [AXNumberBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, imports: [MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXNumberBoxComponent, AXNumberBoxModule };