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 * 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.9", ngImport: i0, type: AXMaskOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", 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.9", 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
 *
 * @category Components
 */
class AXTextBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        /** @ignore */
        this._updateOn = 'change';
        /** @ignore */
        this._maskOptions = { mask: null };
        /**
         * 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();
    }
    /** @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);
            }
        }
        //
        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)
            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.9", ngImport: i0, type: AXTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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: [
            { provide: AXComponent, useExisting: AXTextBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
            { provide: AXClearableComponent, useExisting: AXTextBoxComponent },
            { provide: AXValuableComponent, useExisting: AXTextBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                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 {{ 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    [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: ["ax-text-box{width:100%}ax-text-box input::-webkit-outer-spin-button,ax-text-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-text-box input[type=number]{-moz-appearance:textfield}\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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTextBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-text-box', inputs: [
                        'disabled',
                        'tabIndex',
                        'readonly',
                        'value',
                        'state',
                        'name',
                        'id',
                        'placeholder',
                        'maxLength',
                        'allowNull',
                        'type',
                        'autoComplete',
                        'look',
                    ], outputs: [
                        'onBlur',
                        'onFocus',
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'readonlyChange',
                        'disabledChange',
                        'onKeyDown',
                        'onKeyUp',
                        'onKeyPress',
                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        { provide: AXComponent, useExisting: AXTextBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXTextBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXTextBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXTextBoxComponent),
                            multi: true,
                        },
                    ], imports: [FormsModule], 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    [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: ["ax-text-box{width:100%}ax-text-box input::-webkit-outer-spin-button,ax-text-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-text-box input[type=number]{-moz-appearance:textfield}\n"] }]
        }], propDecorators: { input: [{
                type: ViewChild,
                args: ['input', { static: true }]
            }], maskOptions: [{
                type: Input,
                args: ['mask-options']
            }], 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: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

class AXTextBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", 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.9", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
            AXCommonModule,
            FormsModule,
            AXButtonModule,
            AXDecoratorModule,
            AXTextBoxComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTextBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        AXCommonModule,
                        FormsModule,
                        AXButtonModule,
                        AXDecoratorModule,
                        AXTextBoxComponent,
                        AXMaskOptionsDirective,
                    ],
                    exports: [AXTextBoxComponent, AXMaskOptionsDirective],
                    providers: [],
                }]
        }] });

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

export { AXMaskOptionsDirective, AXTextBoxComponent, AXTextBoxModule };
//# sourceMappingURL=acorex-components-text-box.mjs.map
