import { __decorate, __metadata } from "tslib";
import { CommonFormControl } from '@alauda/ui';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Directive, forwardRef, HostBinding, Input, Optional, TemplateRef, } from '@angular/core';
import { FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BehaviorSubject, combineLatest, Observable, debounceTime, switchMap, tap, } from 'rxjs';
import { ObservableInput } from '../core/utils/decorators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
function SearchableSelectorComponent_ng_container_0_aui_option_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "aui-option", 4);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const option_r4 = ctx.$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("labelContext", option_r4)("value", option_r4.value)("label", ctx_r3.labelTemplate || option_r4.label);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", option_r4.label, " ");
} }
function SearchableSelectorComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementStart(1, "aui-multi-select", 2);
    i0.ɵɵlistener("ngModelChange", function SearchableSelectorComponent_ng_container_0_Template_aui_multi_select_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.emitValue($event)); })("filterChange", function SearchableSelectorComponent_ng_container_0_Template_aui_multi_select_filterChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.filterChange($event)); });
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵtemplate(3, SearchableSelectorComponent_ng_container_0_aui_option_3_Template, 2, 4, "aui-option", 3);
    i0.ɵɵpipe(4, "async");
    i0.ɵɵelementStart(5, "aui-option-placeholder");
    i0.ɵɵtext(6);
    i0.ɵɵpipe(7, "translate");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngModel", ctx_r0.model)("loading", ctx_r0.loading)("filterFn", ctx_r0.filterFn)("placeholder", ctx_r0.placeholder ? i0.ɵɵpipeBind1(2, 10, ctx_r0.placeholder) : "")("allowCreate", ctx_r0.allowCreate)("trackFn", ctx_r0.trackFn || ctx_r0.defaultTrackFn)("clearable", ctx_r0.clearable)("filterable", true);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(4, 12, ctx_r0.data$));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 14, "no_data"), " ");
} }
function SearchableSelectorComponent_ng_template_1_aui_option_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "aui-option", 7);
    i0.ɵɵpipe(1, "pure");
    i0.ɵɵpipe(2, "pure");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const option_r9 = ctx.$implicit;
    const ctx_r8 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("labelContext", option_r9)("value", option_r9.value)("label", ctx_r8.labelTemplate || option_r9.label)("disabled", ctx_r8.disableFn ? i0.ɵɵpipeBind3(1, 7, option_r9, ctx_r8.disableFn, ctx_r8.disableParams) : false)("auiTooltip", ctx_r8.disableTooltip)("auiTooltipDisabled", ctx_r8.disableFn ? !i0.ɵɵpipeBind3(2, 11, option_r9, ctx_r8.disableFn, ctx_r8.disableParams) : true);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", option_r9.label, " ");
} }
function SearchableSelectorComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "aui-select", 5);
    i0.ɵɵlistener("ngModelChange", function SearchableSelectorComponent_ng_template_1_Template_aui_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.emitValue($event)); })("filterChange", function SearchableSelectorComponent_ng_template_1_Template_aui_select_filterChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.filterChange($event)); });
    i0.ɵɵpipe(1, "translate");
    i0.ɵɵtemplate(2, SearchableSelectorComponent_ng_template_1_aui_option_2_Template, 4, 15, "aui-option", 6);
    i0.ɵɵpipe(3, "async");
    i0.ɵɵelementStart(4, "aui-option-placeholder");
    i0.ɵɵtext(5);
    i0.ɵɵpipe(6, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngModel", ctx_r2.model)("loading", ctx_r2.loading)("filterFn", ctx_r2.filterFn)("placeholder", ctx_r2.placeholder ? i0.ɵɵpipeBind1(1, 9, ctx_r2.placeholder) : "")("allowCreate", ctx_r2.allowCreate)("trackFn", ctx_r2.trackFn || ctx_r2.defaultTrackFn)("clearable", ctx_r2.clearable);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(3, 11, ctx_r2.data$));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 13, "no_data"), " ");
} }
export class SearchableSelectorLabelDirective {
}
SearchableSelectorLabelDirective.ɵfac = function SearchableSelectorLabelDirective_Factory(t) { return new (t || SearchableSelectorLabelDirective)(); };
SearchableSelectorLabelDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SearchableSelectorLabelDirective, selectors: [["", "aclSearchableSelectorLabel", ""]] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchableSelectorLabelDirective, [{
        type: Directive,
        args: [{
                selector: '[aclSearchableSelectorLabel]',
            }]
    }], null, null); })();
export class SearchableSelectorOptionDirective {
}
SearchableSelectorOptionDirective.ɵfac = function SearchableSelectorOptionDirective_Factory(t) { return new (t || SearchableSelectorOptionDirective)(); };
SearchableSelectorOptionDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SearchableSelectorOptionDirective, selectors: [["", "aclSearchableSelectorOption", ""]] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchableSelectorOptionDirective, [{
        type: Directive,
        args: [{
                selector: '[aclSearchableSelectorOption]',
            }]
    }], null, null); })();
export class SearchableSelectorComponent extends CommonFormControl {
    constructor(parentForm, cdr) {
        super(cdr);
        this.parentForm = parentForm;
        this.keyword$$ = new BehaviorSubject('');
        this.loading = false;
        this.data$ = combineLatest([
            this.fetcher$,
            this.params$,
            this.keyword$$.pipe(debounceTime(500)),
        ]).pipe(tap(() => (this.loading = true)), switchMap(([fetcher, params, keyword]) => fetcher(params, keyword)), tap(() => (this.loading = false)));
        this.defaultTrackFn = (value) => value;
        this.filterFn = (keyword, option) => {
            const searchValue = option.labelContext.filterValue ||
                (typeof option.labelContext.label === 'string'
                    ? option.labelContext.label
                    : '');
            const key = keyword?.toLowerCase();
            return searchValue.toLowerCase().includes(key);
        };
    }
    get errorState() {
        return this.parentForm?.submitted;
    }
    filterChange(keyword) {
        this.keyword$$.next(keyword);
    }
}
SearchableSelectorComponent.ɵfac = function SearchableSelectorComponent_Factory(t) { return new (t || SearchableSelectorComponent)(i0.ɵɵdirectiveInject(i1.FormGroupDirective, 8), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
SearchableSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchableSelectorComponent, selectors: [["acl-searchable-selector"]], contentQueries: function SearchableSelectorComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
        i0.ɵɵcontentQuery(dirIndex, SearchableSelectorLabelDirective, 5, TemplateRef);
        i0.ɵɵcontentQuery(dirIndex, SearchableSelectorOptionDirective, 5, TemplateRef);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.labelTemplate = _t.first);
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionTemplate = _t.first);
    } }, hostVars: 2, hostBindings: function SearchableSelectorComponent_HostBindings(rf, ctx) { if (rf & 2) {
        i0.ɵɵclassProp("ng-submitted", ctx.errorState);
    } }, inputs: { fetcher: "fetcher", allowCreate: "allowCreate", placeholder: "placeholder", trackFn: "trackFn", params: "params", multi: "multi", clearable: "clearable", disableFn: "disableFn", disableParams: "disableParams", disableTooltip: "disableTooltip" }, features: [i0.ɵɵProvidersFeature([
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SearchableSelectorComponent),
                multi: true,
            },
        ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [[4, "ngIf", "ngIfElse"], ["single", ""], ["auiFormItemControl", "", 3, "ngModel", "loading", "filterFn", "placeholder", "allowCreate", "trackFn", "clearable", "filterable", "ngModelChange", "filterChange"], [3, "labelContext", "value", "label", 4, "ngFor", "ngForOf"], [3, "labelContext", "value", "label"], ["auiFormItemControl", "", 3, "ngModel", "loading", "filterFn", "placeholder", "allowCreate", "trackFn", "clearable", "ngModelChange", "filterChange"], [3, "labelContext", "value", "label", "disabled", "auiTooltip", "auiTooltipDisabled", 4, "ngFor", "ngForOf"], [3, "labelContext", "value", "label", "disabled", "auiTooltip", "auiTooltipDisabled"]], template: function SearchableSelectorComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, SearchableSelectorComponent_ng_container_0_Template, 8, 16, "ng-container", 0);
        i0.ɵɵtemplate(1, SearchableSelectorComponent_ng_template_1_Template, 7, 15, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        const _r1 = i0.ɵɵreference(2);
        i0.ɵɵproperty("ngIf", ctx.multi)("ngIfElse", _r1);
    } }, styles: ["[_nghost-%COMP%]{display:block}.ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input, .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input{border-color:rgb(var(--aui-color-red))!important}:root   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, :root   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused, :root   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, :root   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light]   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, html[aui-theme-mode=light]   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused, html[aui-theme-mode=light]   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, html[aui-theme-mode=light]   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system]   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, html[aui-theme-mode=system]   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused, html[aui-theme-mode=system]   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, html[aui-theme-mode=system]   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark]   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, html[aui-theme-mode=dark]   .ng-invalid.ng-submitted[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused, html[aui-theme-mode=dark]   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input:focus, html[aui-theme-mode=dark]   .ng-invalid.ng-dirty[_nghost-%COMP%]   aui-select[_ngcontent-%COMP%]     .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}"], changeDetection: 0 });
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], SearchableSelectorComponent.prototype, "fetcher$", void 0);
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], SearchableSelectorComponent.prototype, "params$", void 0);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchableSelectorComponent, [{
        type: Component,
        args: [{ selector: 'acl-searchable-selector', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => SearchableSelectorComponent),
                        multi: true,
                    },
                ], template: "<ng-container *ngIf=\"multi; else single\">\n  <aui-multi-select\n    auiFormItemControl\n    [ngModel]=\"model\"\n    (ngModelChange)=\"emitValue($event)\"\n    [loading]=\"loading\"\n    [filterFn]=\"filterFn\"\n    (filterChange)=\"filterChange($event)\"\n    [placeholder]=\"placeholder ? (placeholder | translate) : ''\"\n    [allowCreate]=\"allowCreate\"\n    [trackFn]=\"trackFn || defaultTrackFn\"\n    [clearable]=\"clearable\"\n    [filterable]=\"true\"\n  >\n    <aui-option\n      *ngFor=\"let option of data$ | async\"\n      [labelContext]=\"option\"\n      [value]=\"option.value\"\n      [label]=\"labelTemplate || option.label\"\n    >\n      {{ option.label }}\n    </aui-option>\n    <aui-option-placeholder>\n      {{ 'no_data' | translate }}\n    </aui-option-placeholder>\n  </aui-multi-select>\n</ng-container>\n<ng-template #single>\n  <aui-select\n    auiFormItemControl\n    [ngModel]=\"model\"\n    (ngModelChange)=\"emitValue($event)\"\n    [loading]=\"loading\"\n    [filterFn]=\"filterFn\"\n    (filterChange)=\"filterChange($event)\"\n    [placeholder]=\"placeholder ? (placeholder | translate) : ''\"\n    [allowCreate]=\"allowCreate\"\n    [trackFn]=\"trackFn || defaultTrackFn\"\n    [clearable]=\"clearable\"\n  >\n    <aui-option\n      *ngFor=\"let option of data$ | async\"\n      [labelContext]=\"option\"\n      [value]=\"option.value\"\n      [label]=\"labelTemplate || option.label\"\n      [disabled]=\"disableFn ? (option | pure: disableFn:disableParams) : false\"\n      [auiTooltip]=\"disableTooltip\"\n      [auiTooltipDisabled]=\"\n        disableFn ? !(option | pure: disableFn:disableParams) : true\n      \"\n    >\n      {{ option.label }}\n    </aui-option>\n    <aui-option-placeholder>\n      {{ 'no_data' | translate }}\n    </aui-option-placeholder>\n  </aui-select>\n</ng-template>\n", styles: [":host{display:block}:host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input,:host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input{border-color:rgb(var(--aui-color-red))!important}:root :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input:focus,:root :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input.isFocused,:root :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input:focus,:root :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input:focus,html[aui-theme-mode=light] :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input.isFocused,html[aui-theme-mode=light] :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input:focus,html[aui-theme-mode=light] :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input:focus,html[aui-theme-mode=system] :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input.isFocused,html[aui-theme-mode=system] :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input:focus,html[aui-theme-mode=system] :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input:focus,html[aui-theme-mode=dark] :host.ng-invalid.ng-submitted aui-select ::ng-deep .aui-input.isFocused,html[aui-theme-mode=dark] :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input:focus,html[aui-theme-mode=dark] :host.ng-invalid.ng-dirty aui-select ::ng-deep .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
    }], function () { return [{ type: i1.FormGroupDirective, decorators: [{
                type: Optional
            }] }, { type: i0.ChangeDetectorRef }]; }, { errorState: [{
            type: HostBinding,
            args: ['class.ng-submitted']
        }], fetcher: [{
            type: Input
        }], fetcher$: [], allowCreate: [{
            type: Input
        }], placeholder: [{
            type: Input
        }], trackFn: [{
            type: Input
        }], params: [{
            type: Input
        }], params$: [], multi: [{
            type: Input
        }], clearable: [{
            type: Input
        }], disableFn: [{
            type: Input
        }], disableParams: [{
            type: Input
        }], disableTooltip: [{
            type: Input
        }], labelTemplate: [{
            type: ContentChild,
            args: [SearchableSelectorLabelDirective, {
                    read: TemplateRef,
                }]
        }], optionTemplate: [{
            type: ContentChild,
            args: [SearchableSelectorOptionDirective, {
                    read: TemplateRef,
                }]
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 