import { MXInputBaseValueComponent, MXLookComponent, AXSearchableComponent, AXNgModelDelayedValueChangedDirective, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/cdk/common';
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
import { AsyncPipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, forwardRef, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, 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 { AXTextBoxModule } from '@acorex/components/text-box';

/**
 * @category
 *  Represents a search box component that allows users to input and search text.
 */
class AXSearchBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        this._parent = inject(AXSearchableComponent, { optional: true });
        /**
         * The delay time for search actions, specified in milliseconds.
         * @defaultValue 500
         */
        this.delayTime = 500;
        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
        /**
         * Determines whether executing the parent search logic is allowed.
         * @defaultValue true
         */
        this.autoSearch = input(true, ...(ngDevMode ? [{ debugName: "autoSearch" }] : []));
    }
    /**
     * Handles changes to the model and triggers a search in the parent component if available.
     *
     * @param {string} value
     */
    _handleModelChange(value) {
        if (this.autoSearch() && this._parent && this._parent.search) {
            this._parent.search(value);
        }
        this.commitValue(value, true);
    }
    /** @ignore */
    get __hostClass() {
        return ['ax-editor-container', `ax-${this.look}`, `${this.disabled ? 'ax-state-disabled' : ''}`, this.classNames];
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBoxComponent, isStandalone: true, selector: "ax-search-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 }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, delayTime: { classPropertyName: "delayTime", publicName: "delayTime", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autoSearch: { classPropertyName: "autoSearch", publicName: "autoSearch", 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" }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
            { provide: AXComponent, useExisting: AXSearchBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXSearchBoxComponent },
            { provide: AXClearableComponent, useExisting: AXSearchBoxComponent },
            { provide: AXValuableComponent, useExisting: AXSearchBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXSearchBoxComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n  <ax-prefix>\n    <ax-icon class=\"ax-icon ax-icon-search\"></ax-icon>\n  </ax-prefix>\n</ng-content>\n<input\n  #input\n  [name]=\"name\"\n  class=\"ax-input\"\n  [attr.name]=\"name\"\n  [attr.type]=\"type()\"\n  [attr.placeholder]=\"placeholder ?? '@acorex:common.actions.search' | translate | async\"\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  [delayTime]=\"delayTime\"\n  (axDelayedValueChanged)=\"_handleModelChange($event)\"\n  (keydown)=\"emitOnKeydownEvent($event)\"\n  (keyup)=\"emitOnKeyupEvent($event)\"\n  (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n/>\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", styles: ["ax-search-box input::-webkit-outer-spin-button,ax-search-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-search-box input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: AXNgModelDelayedValueChangedDirective, selector: "[axDelayedValueChanged]", inputs: ["delayTime"], outputs: ["axDelayedValueChanged", "axDelayTimeChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'onBlur',
                        'onFocus',
                        'readonlyChange',
                        'disabledChange',
                        'onKeyDown',
                        'onKeyUp',
                        'onKeyPress',
                    ], providers: [
                        { provide: AXComponent, useExisting: AXSearchBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXSearchBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXSearchBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXSearchBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXSearchBoxComponent),
                            multi: true,
                        },
                    ], imports: [
                        AXDecoratorGenericComponent,
                        AXDecoratorIconComponent,
                        FormsModule,
                        AXNgModelDelayedValueChangedDirective,
                        AsyncPipe,
                        AXTranslatorPipe,
                    ], template: "<ng-content select=\"ax-prefix\">\n  <ax-prefix>\n    <ax-icon class=\"ax-icon ax-icon-search\"></ax-icon>\n  </ax-prefix>\n</ng-content>\n<input\n  #input\n  [name]=\"name\"\n  class=\"ax-input\"\n  [attr.name]=\"name\"\n  [attr.type]=\"type()\"\n  [attr.placeholder]=\"placeholder ?? '@acorex:common.actions.search' | translate | async\"\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  [delayTime]=\"delayTime\"\n  (axDelayedValueChanged)=\"_handleModelChange($event)\"\n  (keydown)=\"emitOnKeydownEvent($event)\"\n  (keyup)=\"emitOnKeyupEvent($event)\"\n  (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n/>\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", styles: ["ax-search-box input::-webkit-outer-spin-button,ax-search-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-search-box input[type=number]{-moz-appearance:textfield}\n"] }]
        }], propDecorators: { classNames: [{
                type: Input,
                args: ['class']
            }], delayTime: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

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

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

export { AXSearchBoxComponent, AXSearchBoxModule };
//# sourceMappingURL=acorex-components-search-box.mjs.map
