import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent, AXCommonModule } from '@acorex/cdk/common';
import { AXInputMaskDirective } from '@acorex/cdk/input-mask';
import * as i0 from '@angular/core';
import { input, output, forwardRef, HostBinding, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { classes } from 'polytype';
import { AXButtonModule } from '@acorex/components/button';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { CommonModule } from '@angular/common';

/* 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';
        /**
         * Custom mask pattern for 'mask' mode.
         * Use the following tokens:
         * - `#`: Required digit (0-9)
         * - `^`: Required letter (a-z, A-Z)
         * - `@`: Required alphanumeric (0-9, a-z, A-Z)
         *
         * Use ! before token to escape symbol. For example !# will render # instead of a digit.
         * Any other character is treated as a literal separator.
         * @example '(###) ###-####' for phone numbers
         * @example 'AA-####' for license plates
         * @example '##/##/####' for dates
         */
        this.maskPattern = input(null, ...(ngDevMode ? [{ debugName: "maskPattern" }] : []));
        /**
         * Custom token definitions to extend or override default mask tokens.
         * Each token maps to a pattern regex and optional transformation.
         * @example { 'P': { pattern: /[1-9]/, transform: (c) => c.toUpperCase() } }
         */
        this.customTokens = input({}, ...(ngDevMode ? [{ debugName: "customTokens" }] : []));
        this.onMaskChanged = output();
        /**
         * This will apply 'my-custom-class' and 'another-class' to the component's root element.
         */
        // @Input('class')
        // classNames: string;
        this.classNames = input('', ...(ngDevMode ? [{ debugName: "classNames", alias: 'class' }] : [{ alias: 'class' }]));
        this._applyingMask = false;
    }
    writeValue(value) {
        super.writeValue(value);
        if (this.maskPattern() && !this._applyingMask) {
            this._applyingMask = true;
            setTimeout(() => {
                this.input?.nativeElement?.dispatchEvent(new Event('input', { bubbles: true }));
                this._applyingMask = false;
            });
        }
    }
    /** @ignore */
    _handleModelChange(value) {
        if (this._applyingMask) {
            this.commitValue(value);
            return;
        }
        this.commitValue(value, true);
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTextBoxComponent, isStandalone: true, selector: "ax-text-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "maskPattern", isSignal: true, isRequired: false, transformFunction: null }, customTokens: { classPropertyName: "customTokens", publicName: "customTokens", isSignal: true, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", onMaskChanged: "onMaskChanged" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
            { provide: AXComponent, useExisting: AXTextBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
            { provide: AXClearableComponent, useExisting: AXTextBoxComponent },
            { provide: AXValuableComponent, useExisting: AXTextBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXTextBoxComponent),
                multi: 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    [name]=\"name\"\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    axInputMask\n    [maskMode]=\"maskPattern() ? 'mask' : null\"\n    [maskPattern]=\"maskPattern()\"\n    [customTokens]=\"customTokens()\"\n    (onMaskChanged)=\"onMaskChanged.emit($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["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"] }, { kind: "directive", type: AXInputMaskDirective, selector: "[axInputMask]", inputs: ["maskMode", "separator", "eager", "minValue", "maxValue", "decimal", "maskPattern", "customTokens"], outputs: ["onMaskChanged"], exportAs: ["axInputMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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, AXInputMaskDirective], 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    [name]=\"name\"\n    class=\"ax-input\"\n    [id]=\"id\"\n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n    axInputMask\n    [maskMode]=\"maskPattern() ? 'mask' : null\"\n    [maskPattern]=\"maskPattern()\"\n    [customTokens]=\"customTokens()\"\n    (onMaskChanged)=\"onMaskChanged.emit($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["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 }]
            }], maxLength: [{
                type: Input
            }], type: [{
                type: Input
            }], autoComplete: [{
                type: Input
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

class AXTextBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent], exports: [AXTextBoxComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, AXCommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXTextBoxComponent],
                    exports: [AXTextBoxComponent],
                    providers: [],
                }]
        }] });

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

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