import { InputDirective } from '@agorapulse/ui-components/input';
import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
import { SymbolRegistry, apSearch, apClose, SymbolComponent } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { input, output, viewChild, signal, computed, inject, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';

let inputSearchId = 0;
class InputSearchComponent {
    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
    // eslint-disable-next-line @angular-eslint/no-output-native
    focus = output();
    // eslint-disable-next-line @angular-eslint/no-output-native
    blur = output();
    // eslint-disable-next-line @angular-eslint/no-output-native
    keyup = output();
    inputElement = viewChild.required('input');
    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
    defaultInputId = `ap-input-search-${inputSearchId++}`;
    inputId = computed(() => this.id() ?? this.defaultInputId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    onTouched = () => { };
    onChanged = () => { };
    symbolRegistry = inject(SymbolRegistry);
    constructor() {
        this.symbolRegistry.registerSymbols([apSearch, apClose]);
    }
    registerOnChange(fn) {
        this.onChanged = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    onValueChange(value) {
        this.writeValue(value);
        this.onChanged(value);
    }
    focusInput() {
        this.inputElement().nativeElement.focus();
    }
    writeValue(value) {
        this.value.set(value);
    }
    setDisabledState(isDisabled) {
        this.disabled.set(isDisabled);
    }
    onClear($event) {
        $event.stopImmediatePropagation();
        this.onValueChange(null);
    }
    onFocusHandle($event) {
        this.focus.emit($event);
    }
    onBlurHandle($event) {
        this.blur.emit($event);
    }
    onKeyup($event) {
        this.keyup.emit($event);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: InputSearchComponent, isStandalone: true, selector: "ap-input-search", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focus: "focus", blur: "blur", keyup: "keyup" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => InputSearchComponent),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<ap-input-group>\n    <ap-symbol symbolId=\"search\" />\n    <input\n        #input\n        apInput\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"value()\"\n        (blur)=\"onBlurHandle($event)\"\n        (focus)=\"onFocusHandle($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (ngModelChange)=\"onValueChange($event)\" />\n    @if (clearable() && value()) {\n        <div\n            class=\"close\"\n            tabindex=\"0\"\n            (click)=\"onClear($event)\"\n            (keydown.space)=\"onClear($event)\"\n            (keydown.enter)=\"onClear($event)\">\n            <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"close\"\n                size=\"xs\" />\n        </div>\n    }\n</ap-input-group>\n", styles: ["ap-input-search ap-input-group .ap-input-group .close{height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:50%}ap-input-search ap-input-group .ap-input-group .close ap-symbol{color:var(--ref-color-grey-100);align-self:center}ap-input-search ap-input-group .ap-input-group .close:hover{background:#3445631a;border-radius:50%;cursor:pointer}ap-input-search ap-input-group .ap-input-group input{width:100%}\n"], dependencies: [{ kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { 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: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-input-search', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, FormsModule, SymbolComponent], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => InputSearchComponent),
                            multi: true,
                        },
                    ], template: "<ap-input-group>\n    <ap-symbol symbolId=\"search\" />\n    <input\n        #input\n        apInput\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"value()\"\n        (blur)=\"onBlurHandle($event)\"\n        (focus)=\"onFocusHandle($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (ngModelChange)=\"onValueChange($event)\" />\n    @if (clearable() && value()) {\n        <div\n            class=\"close\"\n            tabindex=\"0\"\n            (click)=\"onClear($event)\"\n            (keydown.space)=\"onClear($event)\"\n            (keydown.enter)=\"onClear($event)\">\n            <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"close\"\n                size=\"xs\" />\n        </div>\n    }\n</ap-input-group>\n", styles: ["ap-input-search ap-input-group .ap-input-group .close{height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:50%}ap-input-search ap-input-group .ap-input-group .close ap-symbol{color:var(--ref-color-grey-100);align-self:center}ap-input-search ap-input-group .ap-input-group .close:hover{background:#3445631a;border-radius:50%;cursor:pointer}ap-input-search ap-input-group .ap-input-group input{width:100%}\n"] }]
        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], keyup: [{ type: i0.Output, args: ["keyup"] }], inputElement: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });

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

export { InputSearchComponent };
//# sourceMappingURL=agorapulse-ui-components-input-search.mjs.map
