import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, Output, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i3 from '@aztrix/components/autofocus';
import { AutofocusModule } from '@aztrix/components/autofocus';
import * as i4 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i5 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import { RouterModule } from '@angular/router';

class SearchQueryComponent {
    constructor() {
        this.autofocus = true;
        this.placeholder = 'label.search';
        this.immediatelySearch = new EventEmitter();
    }
    writeValue(value) {
        this._value = value;
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setValue(value) {
        if (this._value !== value) {
            this._value = value;
            if (this._onChange) {
                this._onChange(this._value);
            }
        }
    }
    searchImmediately() {
        this.immediatelySearch.emit();
    }
    clearValue() {
        this.setValue('');
        if (this._onTouched) {
            this._onTouched();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchQueryComponent, selector: "ax-search-query", inputs: { autofocus: "autofocus", placeholder: "placeholder" }, outputs: { immediatelySearch: "immediatelySearch" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SearchQueryComponent),
                multi: true,
            },
        ], ngImport: i0, template: "<div class=\"wrapper\">\n  <ax-icon class=\"icon\" name=\"magnify\"></ax-icon>\n  <input\n    #input\n    axAutofocus\n    autocomplete=\"off\"\n    type=\"text\"\n    class=\"input\"\n    [placeholder]=\"placeholder | translate\"\n    [autofocus]=\"autofocus\"\n    [value]=\"_value\"\n    (keyup)=\"setValue(input.value)\"\n    (keyup.enter)=\"searchImmediately()\"\n    (blur)=\"_onTouched()\"\n  />\n  <button\n    axButton\n    icon-button\n    class=\"clear-button\"\n    aria-label=\"Clear\"\n    *ngIf=\"_value && _value.length\"\n    (click)=\"clearValue()\"\n  >\n    <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n  </button>\n  <ng-container *ngIf=\"!_value?.length\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n", styles: [":host{display:block}.wrapper{position:relative}.icon{position:absolute;top:0;left:0;margin:10px;width:1rem;height:1rem;color:#bdc3c9}.input{border:1px solid #bdc3c9;border-radius:20px;width:100%;padding:8px 32px;outline:0;color:var(--font-color, #363f48)}.clear-button.ax-button,.camera-button.ax-button{position:absolute;top:4px;right:4px;width:2em;height:2em}.clear-button.ax-button .icon,.clear-button.ax-button span.mat-button-wrapper .icon,.camera-button.ax-button .icon,.camera-button.ax-button span.mat-button-wrapper .icon{position:initial;margin:0;color:#bdc3c9}.clear-button.ax-button .icon{color:#363f48}.camera-button.ax-button{width:2.5em;height:2.5em;top:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i3.AutofocusDirective, selector: "[axAutofocus]", inputs: ["autofocus"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchQueryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-search-query', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SearchQueryComponent),
                            multi: true,
                        },
                    ], template: "<div class=\"wrapper\">\n  <ax-icon class=\"icon\" name=\"magnify\"></ax-icon>\n  <input\n    #input\n    axAutofocus\n    autocomplete=\"off\"\n    type=\"text\"\n    class=\"input\"\n    [placeholder]=\"placeholder | translate\"\n    [autofocus]=\"autofocus\"\n    [value]=\"_value\"\n    (keyup)=\"setValue(input.value)\"\n    (keyup.enter)=\"searchImmediately()\"\n    (blur)=\"_onTouched()\"\n  />\n  <button\n    axButton\n    icon-button\n    class=\"clear-button\"\n    aria-label=\"Clear\"\n    *ngIf=\"_value && _value.length\"\n    (click)=\"clearValue()\"\n  >\n    <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n  </button>\n  <ng-container *ngIf=\"!_value?.length\">\n    <ng-content></ng-content>\n  </ng-container>\n</div>\n", styles: [":host{display:block}.wrapper{position:relative}.icon{position:absolute;top:0;left:0;margin:10px;width:1rem;height:1rem;color:#bdc3c9}.input{border:1px solid #bdc3c9;border-radius:20px;width:100%;padding:8px 32px;outline:0;color:var(--font-color, #363f48)}.clear-button.ax-button,.camera-button.ax-button{position:absolute;top:4px;right:4px;width:2em;height:2em}.clear-button.ax-button .icon,.clear-button.ax-button span.mat-button-wrapper .icon,.camera-button.ax-button .icon,.camera-button.ax-button span.mat-button-wrapper .icon{position:initial;margin:0;color:#bdc3c9}.clear-button.ax-button .icon{color:#363f48}.camera-button.ax-button{width:2.5em;height:2.5em;top:0;right:0}\n"] }]
        }], propDecorators: { autofocus: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], immediatelySearch: [{
                type: Output
            }] } });

class SearchQueryModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SearchQueryModule, declarations: [SearchQueryComponent], imports: [CommonModule,
            ReactiveFormsModule,
            IconsModule,
            HelperPipesModule,
            AutofocusModule,
            RouterModule,
            ButtonModule], exports: [SearchQueryComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchQueryModule, imports: [CommonModule,
            ReactiveFormsModule,
            IconsModule,
            HelperPipesModule,
            AutofocusModule,
            RouterModule,
            ButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchQueryModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [SearchQueryComponent],
                    imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        IconsModule,
                        HelperPipesModule,
                        AutofocusModule,
                        RouterModule,
                        ButtonModule,
                    ],
                    exports: [SearchQueryComponent],
                }]
        }] });

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

export { SearchQueryComponent, SearchQueryModule };
//# sourceMappingURL=aztrix-components-search-query.mjs.map
