import { AXInputMaskDirective } from '@acorex/cdk/input-mask';
import * as i0 from '@angular/core';
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 { classes } from 'polytype';

/**
 * The NumberBox is a component which detects user interaction and triggers a corresponding event
 *
 * @category Components
 */
class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        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 = signal('', ...(ngDevMode ? [{ debugName: "stringValue" }] : []));
        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" }] : []));
    }
    internalValueChanged(value) {
        if (value === undefined) {
            this.stringValue.set('');
        }
        else {
            this.stringValue.set(String(value));
        }
        setTimeout(() => {
            const inputElement = this.input()?.nativeElement;
            if (inputElement) {
                inputElement.dispatchEvent(new Event('input', { bubbles: true }));
            }
        }, 0);
    }
    #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, true);
            const addSeparator = addStep.toLocaleString();
            const replaceSeparator = addSeparator.split(',').join(this.thousandsSeparator());
            this.stringValue.set(replaceSeparator);
        }
        else {
            const convert = +this.stringValue() + this.step();
            this.commitValue(convert, true);
            this.stringValue.set(convert.toString());
        }
    }
    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, true);
            const addSeparator = addStep.toLocaleString();
            const replaceSeparator = addSeparator.split(',').join(this.thousandsSeparator());
            this.stringValue.set(replaceSeparator);
        }
        else {
            const convert = +this.stringValue() + this.step() * -1;
            this.commitValue(convert, true);
            this.stringValue.set(convert.toString());
        }
    }
    handleOnKeydownEvent(e) {
        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
            return;
        if (this.disabled || this.readonly)
            return;
        if (e.key === 'ArrowUp') {
            this.plusValue();
        }
        else if (e.key === 'ArrowDown') {
            this.minusValue();
        }
    }
    handleUpClick() {
        if (this.disabled || this.readonly)
            return;
        this.plusValue();
    }
    handleDownClick() {
        this.minusValue();
    }
    handleOnMaskChanged(e) {
        if (!e.unmasked || isNaN(+e.unmasked)) {
            this.commitValue(null, true);
            return;
        }
        this.commitValue(+e.unmasked, true);
    }
    onWheel(event) {
        if (this.changeOnScroll()) {
            event.preventDefault();
            if (!this.disabled && !this.readonly) {
                if (event.deltaY > 0) {
                    this.minusValue();
                }
                else {
                    this.plusValue();
                }
            }
        }
    }
    reset() {
        this.stringValue.set('0');
        this.commitValue(0);
        super.reset(true);
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 },
            { provide: AXValuableComponent, useExisting: AXNumberBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXNumberBoxComponent),
                multi: true,
            },
        ], 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:90%;display:flex;flex-direction:column;gap:.1rem}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.15", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-number-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'onBlur',
                        'onFocus',
                        'readonlyChange',
                        'disabledChange',
                        'onKeyDown',
                        'onKeyUp',
                        'onKeyPress',
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        { provide: AXComponent, useExisting: AXNumberBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXNumberBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXNumberBoxComponent),
                            multi: true,
                        },
                    ], 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:90%;display:flex;flex-direction:column;gap:.1rem}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 = [FormsModule, AXInputMaskDirective, AXButtonModule, AXDecoratorModule];
class AXNumberBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXNumberBoxModule, imports: [FormsModule, AXInputMaskDirective, AXButtonModule, AXDecoratorModule, AXNumberBoxComponent], exports: [AXNumberBoxComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNumberBoxModule, imports: [FormsModule, AXButtonModule, AXDecoratorModule, COMPONENT] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNumberBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXNumberBoxComponent, AXNumberBoxModule };
//# sourceMappingURL=acorex-components-number-box.mjs.map
