import { AsyncPipe, NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, inject, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, Validators } from '@angular/forms';
import { KbqAlertModule } from '@koobiq/components/alert';
import { KbqButton, KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
import { KbqComponentColors, KbqFormsModule, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
import { KbqDividerModule } from '@koobiq/components/divider';
import { KbqDropdownModule, KbqDropdownTrigger } from '@koobiq/components/dropdown';
import { KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIcon } from '@koobiq/components/icon';
import { KbqInputModule } from '@koobiq/components/input';
import { KbqPopoverModule, KbqPopoverTrigger } from '@koobiq/components/popover';
import { KbqTitleModule } from '@koobiq/components/title';
import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
import { merge, of } from 'rxjs';
import { distinctUntilChanged, filter, map } from 'rxjs/operators';
import { KbqFilterBar } from './filter-bar';
import { KbqFilterBarButton } from './filter-bar-button';
import { KbqSaveFilterStatuses } from './filter-bar.types';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@koobiq/components/button";
import * as i3 from "@koobiq/components/dropdown";
import * as i4 from "@koobiq/components/divider";
import * as i5 from "@koobiq/components/title";
import * as i6 from "@koobiq/components/form-field";
import * as i7 from "@koobiq/components/input";
import * as i8 from "@koobiq/components/popover";
import * as i9 from "@koobiq/components/core";
import * as i10 from "@koobiq/components/alert";
export class KbqFilters {
    /** header of popover. Depends on the mode */
    get popoverHeader() {
        return this.saveNewFilter ? this.localeData.saveAsNew : this.localeData.saveChanges;
    }
    /** Component state. true if opened dropdown or popup */
    get opened() {
        return this.popover?.isOpen || this.dropdown?.opened;
    }
    /** Selected filter */
    get filter() {
        return this.filterBar.filter;
    }
    /** Component state. True if 'filters' input contains no elements. */
    get isEmpty() {
        return this.filters.length === 0;
    }
    /** localized data
     * @docs-private */
    get localeData() {
        return this.filterBar.configuration.filters;
    }
    constructor() {
        /** @docs-private */
        this.placements = PopUpPlacements;
        /** @docs-private */
        this.styles = KbqButtonStyles;
        /** @docs-private */
        this.colors = KbqComponentColors;
        /** KbqFilterBar instance */
        this.filterBar = inject(KbqFilterBar);
        /** @docs-private */
        this.changeDetectorRef = inject(ChangeDetectorRef);
        /** control for search filter */
        this.searchControl = new UntypedFormControl();
        /** @docs-private */
        this.popoverSize = PopUpSizes.Medium;
        this.showFilterSavingError = false;
        this.isSaving = false;
        /** Event that is generated whenever the user selects a filter. */
        this.onSelectFilter = new EventEmitter();
        /** Event that is generated whenever the user save a filter. */
        this.onSave = new EventEmitter();
        /** Event that is generated whenever the user change a filter. */
        this.onChangeFilter = new EventEmitter();
        /** Event that is generated whenever the user saves a filter as new.
         * @deprecated use onSave with status = newFilter. */
        this.onSaveAsNew = new EventEmitter();
        /** Event that is generated whenever the user remove a filter. */
        this.onRemoveFilter = new EventEmitter();
        /** Event that is generated whenever the user reset a filter changes. */
        this.onResetFilterChanges = new EventEmitter();
        this.closePopover = () => {
            this.popover.hide();
            this.restoreFocus();
            setTimeout(() => this.changeDetectorRef.detectChanges());
            this.showFilterSavingError = false;
        };
        this.filterBar.changes.subscribe(() => this.changeDetectorRef.markForCheck());
    }
    ngOnInit() {
        this.filteredOptions = merge(of(this.filters), this.searchControl.valueChanges.pipe(map((value) => this.getFilteredOptions(value))));
    }
    selectFilter(filter) {
        this.filterBar.internalFilterChanges.next(structuredClone(filter));
        this.onSelectFilter.next(filter);
    }
    saveChanges() {
        if (!this.filterBar.filter)
            return;
        this.filterBar.filter.saved = true;
        this.filterBar.filter.changed = false;
        this.filterBar.internalFilterChanges.next(this.filterBar.filter);
        this.onSave.emit({
            filter: this.filterBar.filter,
            filterBar: this.filterBar,
            status: KbqSaveFilterStatuses.OnlyChanges
        });
    }
    saveAsNew(event) {
        if (this.filterName.invalid)
            return;
        const name = this.filterName.value || '';
        // @todo default filter
        const filter = structuredClone(this.filter) || { pipes: [] };
        filter.name = name;
        filter.saved = true;
        filter.changed = false;
        this.isSaving = true;
        this.popover.preventClose = true;
        this.filterName.disable();
        if (this.saveNewFilter) {
            this.onSaveAsNew.emit({ filter, filterBar: this.filterBar });
            this.onSave.emit({ filter, filterBar: this.filterBar, status: KbqSaveFilterStatuses.NewFilter });
        }
        else {
            this.onSave.emit({ filter, filterBar: this.filterBar, status: KbqSaveFilterStatuses.NewName });
        }
        event?.preventDefault();
    }
    showError(error) {
        if (error?.nameAlreadyExists) {
            this.filterName.setErrors({ filterNameAlreadyExist: true });
        }
        this.showFilterSavingError = true;
        this.filterSavingErrorText = error?.text ?? this.filterBar.configuration.filters.errorHint;
    }
    restoreFocus() {
        this.button.focus();
    }
    preparePopover() {
        this.filterName = new FormControl(this.filter?.name || '', Validators.required);
        this.filterName.valueChanges.pipe(distinctUntilChanged()).subscribe(() => (this.showFilterSavingError = false));
        this.popover.show();
        merge(...this.popover.defaultClosingActions())
            .pipe(filter(() => !this.isSaving))
            .subscribe(this.closePopover);
        this.popover.visibleChange.pipe(filter((state) => !state)).subscribe(this.closePopover);
        setTimeout(() => {
            this.newFilterName.nativeElement.focus();
            this.filterName.setErrors(null);
        });
    }
    openSaveAsNewFilterPopover() {
        this.saveNewFilter = true;
        this.preparePopover();
    }
    openChangeFilterNamePopover() {
        this.saveNewFilter = false;
        this.preparePopover();
    }
    /** @docs-private */
    stopEventPropagation(event) {
        event.stopPropagation();
    }
    /** @docs-private */
    searchKeydownHandler(event) {
        if (event.key === 'Escape') {
            this.closePopover();
        }
        else {
            this.stopEventPropagation(event);
        }
    }
    /** @docs-private */
    onDropdownOpen() {
        this.searchControl.setValue(null);
        setTimeout(() => this.search.nativeElement.focus());
    }
    resetFilterChanges() {
        this.filterBar.resetFilterChangedState();
        this.onResetFilterChanges.emit(this.filter);
    }
    /** Hide the popup and restore focus.
     * Use this method in the onSave, onSaveAsNew, or onChangeFilter events after the data has been successfully saved. */
    filterSavedSuccessfully() {
        this.isSaving = false;
        this.popover.preventClose = false;
        this.popover.hide();
        this.restoreFocus();
        this.changeDetectorRef.markForCheck();
    }
    /** Shows an error. Use this method in the onSave, onSaveAsNew, or onChangeFilter events if saving data failed. */
    filterSavedUnsuccessfully(error) {
        this.isSaving = false;
        this.popover.preventClose = false;
        this.showError(error);
        this.filterName.enable();
        setTimeout(() => this.saveFilterButton.focus());
        this.changeDetectorRef.markForCheck();
    }
    getFilteredOptions(value) {
        const searchFilter = value && value.new ? value.value : value;
        return searchFilter
            ? this.filters.filter((filter) => filter.name.toLowerCase().includes(searchFilter.toLowerCase()))
            : this.filters;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFilters, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqFilters, isStandalone: true, selector: "kbq-filters", inputs: { filters: "filters" }, outputs: { onSelectFilter: "onSelectFilter", onSave: "onSave", onChangeFilter: "onChangeFilter", onSaveAsNew: "onSaveAsNew", onRemoveFilter: "onRemoveFilter", onResetFilterChanges: "onResetFilterChanges" }, host: { classAttribute: "kbq-filters" }, viewQueries: [{ propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true }, { propertyName: "dropdown", first: true, predicate: KbqDropdownTrigger, descendants: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "newFilterName", first: true, predicate: ["newFilterName"], descendants: true }, { propertyName: "saveFilterButton", first: true, predicate: ["saveFilterButton"], descendants: true }], exportAs: ["kbqFilters"], ngImport: i0, template: "<button\n    kbq-button\n    kbq-title\n    kbqFilterBarButton\n    kbqPopover\n    [kbqDropdownTriggerFor]=\"savedFilters\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverClass]=\"'kbq-filters__save-as-new-filter-popover'\"\n    [kbqPopoverContent]=\"saveAsNewPopoverContent\"\n    [kbqPopoverFooter]=\"saveAsNewPopoverFooter\"\n    [kbqPopoverHeader]=\"saveAsNewPopoverHeader\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverSize]=\"popoverSize\"\n    [kbqTrigger]=\"'manual'\"\n    [class.kbq-active]=\"opened\"\n    [disabled]=\"isSaving\"\n    (dropdownClosed)=\"searchControl.setValue('')\"\n    (dropdownOpened)=\"onDropdownOpen()\"\n>\n    <span #kbqTitleText class=\"kbq-filters__filter-name\">\n        @if (filter?.name) {\n            {{ filter!.name }}\n        } @else {\n            <ng-content>\n                <i kbq-icon=\"kbq-list_16\"></i>\n                {{ localeData.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged && !filterBar.isSaved) {\n    <button\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        kbqTooltip=\"{{ localeData.saveNewFilterTooltip }}\"\n        [color]=\"colors.Empty\"\n        [disabled]=\"isSaving\"\n        (click)=\"openSaveAsNewFilterPopover()\"\n    >\n        <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n    </button>\n}\n\n@if (filterBar.isSaved) {\n    <button\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [color]=\"colors.Empty\"\n        [kbqDropdownTriggerFor]=\"filterActions\"\n        [disabled]=\"isSaving\"\n        [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n    >\n        <i kbq-icon=\"kbq-ellipsis-vertical_16\"></i>\n    </button>\n\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-filter-bar__arrow\" [color]=\"'theme'\"></i>\n} @else {\n    <kbq-divider class=\"kbq-filter-bar__separator\" [vertical]=\"true\" />\n}\n\n<kbq-dropdown #savedFilters=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    <div [style.display]=\"isEmpty ? 'none' : 'initial'\">\n        <kbq-form-field kbqFormFieldWithoutBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n\n            <input\n                #search\n                autocomplete=\"off\"\n                kbqInput\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                [formControl]=\"searchControl\"\n                (click)=\"stopEventPropagation($event)\"\n                (keydown)=\"searchKeydownHandler($event)\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n\n        <kbq-divider />\n\n        @for (filter of filteredOptions | async; track filter) {\n            <button\n                kbq-dropdown-item\n                kbq-title\n                [class.kbq-selected]=\"filterBar.filter?.name === filter.name\"\n                (click)=\"selectFilter(filter)\"\n            >\n                {{ filter.name }}\n            </button>\n        } @empty {\n            <button kbq-dropdown-item [disabled]=\"true\">\n                {{ localeData.searchEmptyResult }}\n            </button>\n        }\n\n        <kbq-divider />\n    </div>\n\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNewFilter }}\n    </button>\n</kbq-dropdown>\n\n<kbq-dropdown #filterActions=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    @if (filterBar.isSavedAndChanged && !filterBar.isReadOnly) {\n        <button\n            kbq-dropdown-item\n            [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n            (click)=\"saveChanges()\"\n        >\n            <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n            {{ localeData.saveChanges }}\n            @if (filterBar.isSavedAndChanged) {\n                <i class=\"kbq kbq-icon kbq-icon-button kbq-circle-xs_16 kbq-warning layout-margin-left-xs\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNew }}\n    </button>\n\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ localeData.change }}\n        </button>\n    }\n\n    @if (filterBar.isSavedAndChanged || !filterBar.isReadOnly) {\n        <kbq-divider />\n    }\n\n    @if (filterBar.isSavedAndChanged) {\n        <button kbq-dropdown-item (click)=\"resetFilterChanges()\">\n            <i kbq-icon=\"kbq-xmark-circle_16\"></i>\n            {{ localeData.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"this.onRemoveFilter.next(this.filter!)\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ localeData.remove }}\n        </button>\n    }\n</kbq-dropdown>\n\n<ng-template #saveAsNewPopoverHeader>{{ popoverHeader }}</ng-template>\n\n<ng-template #saveAsNewPopoverContent>\n    @if (showFilterSavingError) {\n        <kbq-alert class=\"layout-margin-bottom-m\" [alertColor]=\"'error'\" [alertStyle]=\"'colored'\" [compact]=\"true\">\n            {{ filterSavingErrorText }}\n        </kbq-alert>\n    }\n    <div class=\"kbq-form-vertical\">\n        <div class=\"kbq-form__row\">\n            <label class=\"kbq-form__label\">{{ localeData.name }}</label>\n\n            <kbq-form-field class=\"kbq-form__control\">\n                <input\n                    #newFilterName\n                    kbqInput\n                    type=\"text\"\n                    [formControl]=\"filterName\"\n                    (keydown.enter)=\"saveAsNew($event)\"\n                />\n\n                @if (filterName.hasError('filterNameAlreadyExist')) {\n                    <kbq-error>{{ localeData.error }}</kbq-error>\n                }\n            </kbq-form-field>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #saveAsNewPopoverFooter>\n    <button\n        #saveFilterButton\n        kbq-button\n        class=\"layout-margin-right-l\"\n        [class.kbq-progress]=\"isSaving\"\n        [disabled]=\"isSaving\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'filled'\"\n        (click)=\"saveAsNew()\"\n    >\n        {{ localeData.saveButton }}\n    </button>\n    <button kbq-button [color]=\"'contrast-fade'\" [kbqStyle]=\"'filled'\" [disabled]=\"isSaving\" (click)=\"closePopover()\">\n        {{ localeData.cancelButton }}\n    </button>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-filters{display:flex}.kbq-filters>.kbq-button{max-width:320px}.kbq-filters>.kbq-button .kbq-button-wrapper{width:100%}.kbq-filters>.kbq-button .kbq-icon{margin-right:var(--kbq-size-xxs)}.kbq-filters .kbq-filters__filter-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-filters .kbq-filters__filter-name .kbq-icon{margin-bottom:var(--kbq-size-3xs)}.kbq-filters .kbq-filter-bar__separator{align-self:center;height:var(--kbq-size-m)!important;margin-left:calc(var(--kbq-size-s) + var(--kbq-size-xs))!important;margin-right:var(--kbq-size-xs)!important}.kbq-filters .kbq-filter-bar__arrow{align-self:center;margin-left:var(--kbq-size-s)}.kbq-filters .kbq-button.kbq-button_changed-filter{border-bottom-right-radius:unset;border-top-right-radius:unset}.kbq-filters .kbq-button-icon{margin-left:-1px;border-bottom-left-radius:unset;border-top-left-radius:unset}.kbq-filters .kbq-button_changed-saved-filter:before{content:\"\";position:absolute;right:-4px;top:-4px;width:var(--kbq-size-s);height:var(--kbq-size-s);border:2px solid var(--kbq-background-bg);border-radius:var(--kbq-size-xs);background:var(--kbq-icon-warning)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:var(--kbq-size-m);background:var(--kbq-line-contrast-less)}.kbq-filters__save-as-new-filter-popover .kbq-popover__container{width:400px}.kbq-filters__save-as-new-filter-popover .kbq-popover__content{padding:var(--kbq-size-s) var(--kbq-size-xxl)}.kbq-filters__dropdown .kbq-dropdown-item{padding-right:var(--kbq-size-s)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i2.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i3.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i3.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i3.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "paddings"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i5.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i6.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i6.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i6.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "component", type: i6.KbqError, selector: "kbq-error", exportAs: ["kbqError"] }, { kind: "directive", type: i6.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i6.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: i6.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i7.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqFilterBarButton, selector: "[kbqFilterBarButton]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: 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: KbqPopoverModule }, { kind: "directive", type: i8.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: KbqFormsModule }, { kind: "directive", type: i9.KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", exportAs: ["kbqForm"] }, { kind: "directive", type: i9.KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", exportAs: ["kbqFormElement"] }, { kind: "ngmodule", type: KbqAlertModule }, { kind: "component", type: i10.KbqAlert, selector: "kbq-alert", inputs: ["compact", "alertStyle", "alertColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFilters, decorators: [{
            type: Component,
            args: [{ standalone: true, exportAs: 'kbqFilters', selector: 'kbq-filters', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'kbq-filters'
                    }, imports: [
                        ReactiveFormsModule,
                        KbqButtonModule,
                        KbqDropdownModule,
                        KbqDividerModule,
                        KbqIcon,
                        KbqTitleModule,
                        KbqFormFieldModule,
                        KbqInputModule,
                        NgClass,
                        KbqFilterBarButton,
                        AsyncPipe,
                        KbqTooltipTrigger,
                        KbqPopoverModule,
                        FormsModule,
                        KbqFormsModule,
                        KbqAlertModule
                    ], template: "<button\n    kbq-button\n    kbq-title\n    kbqFilterBarButton\n    kbqPopover\n    [kbqDropdownTriggerFor]=\"savedFilters\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverClass]=\"'kbq-filters__save-as-new-filter-popover'\"\n    [kbqPopoverContent]=\"saveAsNewPopoverContent\"\n    [kbqPopoverFooter]=\"saveAsNewPopoverFooter\"\n    [kbqPopoverHeader]=\"saveAsNewPopoverHeader\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverSize]=\"popoverSize\"\n    [kbqTrigger]=\"'manual'\"\n    [class.kbq-active]=\"opened\"\n    [disabled]=\"isSaving\"\n    (dropdownClosed)=\"searchControl.setValue('')\"\n    (dropdownOpened)=\"onDropdownOpen()\"\n>\n    <span #kbqTitleText class=\"kbq-filters__filter-name\">\n        @if (filter?.name) {\n            {{ filter!.name }}\n        } @else {\n            <ng-content>\n                <i kbq-icon=\"kbq-list_16\"></i>\n                {{ localeData.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged && !filterBar.isSaved) {\n    <button\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        kbqTooltip=\"{{ localeData.saveNewFilterTooltip }}\"\n        [color]=\"colors.Empty\"\n        [disabled]=\"isSaving\"\n        (click)=\"openSaveAsNewFilterPopover()\"\n    >\n        <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n    </button>\n}\n\n@if (filterBar.isSaved) {\n    <button\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [color]=\"colors.Empty\"\n        [kbqDropdownTriggerFor]=\"filterActions\"\n        [disabled]=\"isSaving\"\n        [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n    >\n        <i kbq-icon=\"kbq-ellipsis-vertical_16\"></i>\n    </button>\n\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-filter-bar__arrow\" [color]=\"'theme'\"></i>\n} @else {\n    <kbq-divider class=\"kbq-filter-bar__separator\" [vertical]=\"true\" />\n}\n\n<kbq-dropdown #savedFilters=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    <div [style.display]=\"isEmpty ? 'none' : 'initial'\">\n        <kbq-form-field kbqFormFieldWithoutBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n\n            <input\n                #search\n                autocomplete=\"off\"\n                kbqInput\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                [formControl]=\"searchControl\"\n                (click)=\"stopEventPropagation($event)\"\n                (keydown)=\"searchKeydownHandler($event)\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n\n        <kbq-divider />\n\n        @for (filter of filteredOptions | async; track filter) {\n            <button\n                kbq-dropdown-item\n                kbq-title\n                [class.kbq-selected]=\"filterBar.filter?.name === filter.name\"\n                (click)=\"selectFilter(filter)\"\n            >\n                {{ filter.name }}\n            </button>\n        } @empty {\n            <button kbq-dropdown-item [disabled]=\"true\">\n                {{ localeData.searchEmptyResult }}\n            </button>\n        }\n\n        <kbq-divider />\n    </div>\n\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNewFilter }}\n    </button>\n</kbq-dropdown>\n\n<kbq-dropdown #filterActions=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    @if (filterBar.isSavedAndChanged && !filterBar.isReadOnly) {\n        <button\n            kbq-dropdown-item\n            [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n            (click)=\"saveChanges()\"\n        >\n            <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n            {{ localeData.saveChanges }}\n            @if (filterBar.isSavedAndChanged) {\n                <i class=\"kbq kbq-icon kbq-icon-button kbq-circle-xs_16 kbq-warning layout-margin-left-xs\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNew }}\n    </button>\n\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ localeData.change }}\n        </button>\n    }\n\n    @if (filterBar.isSavedAndChanged || !filterBar.isReadOnly) {\n        <kbq-divider />\n    }\n\n    @if (filterBar.isSavedAndChanged) {\n        <button kbq-dropdown-item (click)=\"resetFilterChanges()\">\n            <i kbq-icon=\"kbq-xmark-circle_16\"></i>\n            {{ localeData.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"this.onRemoveFilter.next(this.filter!)\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ localeData.remove }}\n        </button>\n    }\n</kbq-dropdown>\n\n<ng-template #saveAsNewPopoverHeader>{{ popoverHeader }}</ng-template>\n\n<ng-template #saveAsNewPopoverContent>\n    @if (showFilterSavingError) {\n        <kbq-alert class=\"layout-margin-bottom-m\" [alertColor]=\"'error'\" [alertStyle]=\"'colored'\" [compact]=\"true\">\n            {{ filterSavingErrorText }}\n        </kbq-alert>\n    }\n    <div class=\"kbq-form-vertical\">\n        <div class=\"kbq-form__row\">\n            <label class=\"kbq-form__label\">{{ localeData.name }}</label>\n\n            <kbq-form-field class=\"kbq-form__control\">\n                <input\n                    #newFilterName\n                    kbqInput\n                    type=\"text\"\n                    [formControl]=\"filterName\"\n                    (keydown.enter)=\"saveAsNew($event)\"\n                />\n\n                @if (filterName.hasError('filterNameAlreadyExist')) {\n                    <kbq-error>{{ localeData.error }}</kbq-error>\n                }\n            </kbq-form-field>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #saveAsNewPopoverFooter>\n    <button\n        #saveFilterButton\n        kbq-button\n        class=\"layout-margin-right-l\"\n        [class.kbq-progress]=\"isSaving\"\n        [disabled]=\"isSaving\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'filled'\"\n        (click)=\"saveAsNew()\"\n    >\n        {{ localeData.saveButton }}\n    </button>\n    <button kbq-button [color]=\"'contrast-fade'\" [kbqStyle]=\"'filled'\" [disabled]=\"isSaving\" (click)=\"closePopover()\">\n        {{ localeData.cancelButton }}\n    </button>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-filters{display:flex}.kbq-filters>.kbq-button{max-width:320px}.kbq-filters>.kbq-button .kbq-button-wrapper{width:100%}.kbq-filters>.kbq-button .kbq-icon{margin-right:var(--kbq-size-xxs)}.kbq-filters .kbq-filters__filter-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-filters .kbq-filters__filter-name .kbq-icon{margin-bottom:var(--kbq-size-3xs)}.kbq-filters .kbq-filter-bar__separator{align-self:center;height:var(--kbq-size-m)!important;margin-left:calc(var(--kbq-size-s) + var(--kbq-size-xs))!important;margin-right:var(--kbq-size-xs)!important}.kbq-filters .kbq-filter-bar__arrow{align-self:center;margin-left:var(--kbq-size-s)}.kbq-filters .kbq-button.kbq-button_changed-filter{border-bottom-right-radius:unset;border-top-right-radius:unset}.kbq-filters .kbq-button-icon{margin-left:-1px;border-bottom-left-radius:unset;border-top-left-radius:unset}.kbq-filters .kbq-button_changed-saved-filter:before{content:\"\";position:absolute;right:-4px;top:-4px;width:var(--kbq-size-s);height:var(--kbq-size-s);border:2px solid var(--kbq-background-bg);border-radius:var(--kbq-size-xs);background:var(--kbq-icon-warning)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:var(--kbq-size-m);background:var(--kbq-line-contrast-less)}.kbq-filters__save-as-new-filter-popover .kbq-popover__container{width:400px}.kbq-filters__save-as-new-filter-popover .kbq-popover__content{padding:var(--kbq-size-s) var(--kbq-size-xxl)}.kbq-filters__dropdown .kbq-dropdown-item{padding-right:var(--kbq-size-s)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { button: [{
                type: ViewChild,
                args: [KbqButton]
            }], popover: [{
                type: ViewChild,
                args: [KbqPopoverTrigger]
            }], dropdown: [{
                type: ViewChild,
                args: [KbqDropdownTrigger]
            }], search: [{
                type: ViewChild,
                args: ['search']
            }], newFilterName: [{
                type: ViewChild,
                args: ['newFilterName']
            }], saveFilterButton: [{
                type: ViewChild,
                args: ['saveFilterButton']
            }], filters: [{
                type: Input
            }], onSelectFilter: [{
                type: Output
            }], onSave: [{
                type: Output
            }], onChangeFilter: [{
                type: Output
            }], onSaveAsNew: [{
                type: Output
            }], onRemoveFilter: [{
                type: Output
            }], onResetFilterChanges: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 