import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { KbqButton, KbqButtonModule } from '@koobiq/components/button';
import { KbqDividerModule } from '@koobiq/components/divider';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { KbqInput, KbqInputModule } from '@koobiq/components/input';
import { KbqToolTipModule, KbqTooltipTrigger } from '@koobiq/components/tooltip';
import { KbqFilterBar } from './filter-bar';
import * as i0 from "@angular/core";
import * as i1 from "@koobiq/components/button";
import * as i2 from "@koobiq/components/tooltip";
import * as i3 from "@koobiq/components/icon";
import * as i4 from "@koobiq/components/form-field";
import * as i5 from "@koobiq/components/input";
import * as i6 from "@angular/forms";
export class KbqFilterBarSearch {
    /** localized data
     * @docs-private */
    get localeData() {
        return this.filterBar.configuration.search;
    }
    constructor() {
        /** KbqFilterBar instance */
        this.filterBar = inject(KbqFilterBar);
        this.changeDetectorRef = inject(ChangeDetectorRef);
        /** control for search */
        this.searchControl = new UntypedFormControl();
        /** Whether the search active */
        this.isSearchActive = false;
        /** event that is generated whenever a user performs a search. */
        this.onSearch = new EventEmitter();
        /** @docs-private */
        this.onReset = () => {
            this.changeDetectorRef.markForCheck();
        };
        this.searchControl.valueChanges.subscribe(this.onSearch);
        this.filterBar.filterReset?.onResetFilter.pipe(takeUntilDestroyed()).subscribe(this.onReset);
    }
    openSearch() {
        this.isSearchActive = true;
        setTimeout(() => this.input.focus());
    }
    /** @docs-private */
    onBlur() {
        if (this.searchControl.value)
            return;
        this.onEscape();
    }
    /** @docs-private */
    onEscape() {
        this.isSearchActive = false;
        this.button.focusViaKeyboard();
        this.tooltip.hide();
    }
    /** @docs-private */
    onClear() {
        this.isSearchActive = false;
        setTimeout(() => {
            this.button.focus();
            this.tooltip.hide();
        });
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFilterBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KbqFilterBarSearch, isStandalone: true, selector: "kbq-filter-search, [kbq-filter-search]", outputs: { onSearch: "onSearch" }, host: { classAttribute: "kbq-filter-search" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true }], ngImport: i0, template: `
        <button
            kbq-button
            [class.kbq-filter_hidden]="isSearchActive"
            [color]="'contrast'"
            [kbqStyle]="'transparent'"
            kbqTooltip="{{ localeData.tooltip }}"
            (click)="openSearch()"
        >
            <i kbq-icon="kbq-magnifying-glass_16"></i>
        </button>

        <kbq-form-field [class.kbq-filter_hidden]="!isSearchActive">
            <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>

            <input
                autocomplete="off"
                kbqInput
                [formControl]="searchControl"
                placeholder="{{ localeData.placeholder }}"
                (blur)="onBlur()"
                (keydown.escape)="onEscape()"
            />

            <kbq-cleaner (click)="onClear()" />
        </kbq-form-field>
    `, isInline: true, styles: [".kbq-filter-search{display:flex;align-items:start}.kbq-filter-search .kbq-form-field{width:260px}.kbq-filter-search .kbq-filter_hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i2.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i4.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i4.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i4.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i4.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i4.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i5.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFilterBarSearch, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'kbq-filter-search, [kbq-filter-search]', template: `
        <button
            kbq-button
            [class.kbq-filter_hidden]="isSearchActive"
            [color]="'contrast'"
            [kbqStyle]="'transparent'"
            kbqTooltip="{{ localeData.tooltip }}"
            (click)="openSearch()"
        >
            <i kbq-icon="kbq-magnifying-glass_16"></i>
        </button>

        <kbq-form-field [class.kbq-filter_hidden]="!isSearchActive">
            <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>

            <input
                autocomplete="off"
                kbqInput
                [formControl]="searchControl"
                placeholder="{{ localeData.placeholder }}"
                (blur)="onBlur()"
                (keydown.escape)="onEscape()"
            />

            <kbq-cleaner (click)="onClear()" />
        </kbq-form-field>
    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        KbqDividerModule,
                        KbqButtonModule,
                        KbqToolTipModule,
                        KbqIconModule,
                        KbqFormFieldModule,
                        KbqInputModule,
                        ReactiveFormsModule
                    ], host: {
                        class: 'kbq-filter-search'
                    }, styles: [".kbq-filter-search{display:flex;align-items:start}.kbq-filter-search .kbq-form-field{width:260px}.kbq-filter-search .kbq-filter_hidden{display:none}\n"] }]
        }], ctorParameters: () => [], propDecorators: { input: [{
                type: ViewChild,
                args: [KbqInput]
            }], button: [{
                type: ViewChild,
                args: [KbqButton]
            }], tooltip: [{
                type: ViewChild,
                args: [KbqTooltipTrigger]
            }], onSearch: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 