import { ChangeDetectionStrategy, Component, Input, forwardRef } from '@angular/core';
import { InputSize } from '@ironsource/fusion-ui/components/input/common/base';
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@ironsource/fusion-ui/components/input/v2";
import * as i2 from "@angular/forms";
const _c0 = a1 => ({ rounded: true, size: a1 });
export class DropdownDualMultiSelectHeaderComponent {
    constructor() {
        this.inputSize = InputSize;
        this.searchControl = new FormControl();
        this.onDestroy$ = new Subject();
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    writeValue(value) {
        this.searchControl.patchValue(value, { emitEvent: false });
    }
    registerOnChange(fn) {
        this.searchControl.valueChanges.pipe(takeUntil(this.onDestroy$), debounceTime(150), distinctUntilChanged()).subscribe(fn);
    }
    registerOnTouched() { }
    static { this.ɵfac = function DropdownDualMultiSelectHeaderComponent_Factory(t) { return new (t || DropdownDualMultiSelectHeaderComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropdownDualMultiSelectHeaderComponent, selectors: [["fusion-dropdown-dual-multi-select-header"]], inputs: { title: "title", testId: "testId" }, features: [i0.ɵɵProvidersFeature([
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(() => DropdownDualMultiSelectHeaderComponent),
                    multi: true
                }
            ])], decls: 5, vars: 7, consts: [[1, "is-dropdown-dual-multi-select-header"], [1, "fu-label"], [1, "fu-search-bar"], ["showSearchIcon", "right", "placeholder", "Search", 3, "options", "showSearchIconWhenHasInputValue", "clear", "formControl"]], template: function DropdownDualMultiSelectHeaderComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
            i0.ɵɵtext(2);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(3, "span", 2);
            i0.ɵɵelement(4, "fusion-input", 3);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("options", i0.ɵɵpureFunction1(5, _c0, ctx.inputSize.Medium))("showSearchIconWhenHasInputValue", true)("clear", true)("formControl", ctx.searchControl);
        } }, dependencies: [i1.InputComponent, i2.NgControlStatus, i2.FormControlDirective], styles: ["[_nghost-%COMP%]   .is-dropdown-dual-multi-select-header[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-header[_ngcontent-%COMP%]{height:48px;width:528px;border-bottom:1px solid #e5e7e9;display:grid;grid-template-columns:1fr 1fr;align-items:center}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-header[_ngcontent-%COMP%]   .fu-search-bar[_ngcontent-%COMP%]{padding:0 8px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-header[_ngcontent-%COMP%]   .fu-label[_ngcontent-%COMP%]{font-size:13px;padding-left:9px;font-family:NHaasGroteskDSPro-75Bd,sans-serif;font-weight:900}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropdownDualMultiSelectHeaderComponent, [{
        type: Component,
        args: [{ selector: 'fusion-dropdown-dual-multi-select-header', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => DropdownDualMultiSelectHeaderComponent),
                        multi: true
                    }
                ], template: "<div class=\"is-dropdown-dual-multi-select-header\">\n    <span class=\"fu-label\">\n        {{title}}\n    </span>\n\n    <span class=\"fu-search-bar\">\n        <fusion-input\n            showSearchIcon=\"right\"\n            placeholder=\"Search\"\n            [options]=\"{rounded: true, size: inputSize.Medium}\"\n            [showSearchIconWhenHasInputValue]=\"true\"\n            [clear]=\"true\"\n            [formControl]=\"searchControl\">\n        </fusion-input>\n    </span>\n</div>\n", styles: [":host .is-dropdown-dual-multi-select-header *{box-sizing:border-box}:host .is-dropdown-dual-multi-select-header{height:48px;width:528px;border-bottom:1px solid #e5e7e9;display:grid;grid-template-columns:1fr 1fr;align-items:center}:host .is-dropdown-dual-multi-select-header .fu-search-bar{padding:0 8px}:host .is-dropdown-dual-multi-select-header .fu-label{font-size:13px;padding-left:9px;font-family:NHaasGroteskDSPro-75Bd,sans-serif;font-weight:900}\n"] }]
    }], () => [], { title: [{
            type: Input
        }], testId: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DropdownDualMultiSelectHeaderComponent, { className: "DropdownDualMultiSelectHeaderComponent", filePath: "components/dropdown-dual-multi-select-header/dropdown-dual-multi-select-header.component.ts", lineNumber: 20 }); })();
//# sourceMappingURL=data:application/json;base64, 