import { ChangeDetectionStrategy, Component, HostListener, Input, ViewChild, } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { assertNever } from '@vendure/common/lib/shared-utils';
import { CustomFilterComponentDirective } from './custom-filter-component.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../../providers/i18n/i18n.service";
import * as i2 from "@clr/angular";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/cdk/a11y";
import * as i6 from "../currency-input/currency-input.component";
import * as i7 from "../form-field/form-field.component";
import * as i8 from "../form-field/form-field-control.directive";
import * as i9 from "../dropdown/dropdown.component";
import * as i10 from "../dropdown/dropdown-menu.component";
import * as i11 from "../dropdown/dropdown-trigger.directive";
import * as i12 from "../dropdown/dropdown-item.directive";
import * as i13 from "../datetime-picker/datetime-picker.component";
import * as i14 from "../data-table-filter-label/data-table-filter-label.component";
import * as i15 from "./custom-filter-component.directive";
import * as i16 from "../localized-text/localized-text.component";
import * as i17 from "@ngx-translate/core";
export class DataTableFiltersComponent {
    set customComponentHost(content) {
        this._customComponentHost = content;
    }
    onFKeyPress(event) {
        if (event.target instanceof HTMLElement) {
            if (event.target.tagName === 'INPUT' ||
                event.target.tagName === 'TEXTAREA' ||
                event.target.classList.contains('vdr-prosemirror')) {
                return;
            }
        }
        if (!this.dropdown.isOpen && this.state === 'new') {
            this.dropdown.toggleOpen();
        }
    }
    constructor(i18nService, changeDetectorRef) {
        this.i18nService = i18nService;
        this.changeDetectorRef = changeDetectorRef;
        this.state = 'new';
    }
    ngAfterViewInit() {
        this.dropdown.onOpenChange(isOpen => {
            if (!isOpen && this.state === 'new') {
                this.selectedFilter = undefined;
            }
        });
        if (this.filterWithValue) {
            const { filter, value } = this.filterWithValue;
            this.selectFilter(filter, value);
            this.state = 'active';
        }
        setTimeout(() => this.changeDetectorRef.markForCheck());
    }
    selectFilter(filter, value) {
        this.selectedFilter = filter;
        if (filter.isId()) {
            this.formControl = new FormGroup({
                operator: new FormControl(value?.operator ?? 'eq'),
                term: new FormControl(value?.term ?? ''),
            }, control => {
                if (!control.value.term) {
                    return { noSelection: true };
                }
                return null;
            });
        }
        if (filter.isText()) {
            this.formControl = new FormGroup({
                operator: new FormControl(value?.operator ?? 'contains'),
                term: new FormControl(value?.term ?? ''),
            }, control => {
                if (!control.value.term) {
                    return { noSelection: true };
                }
                return null;
            });
        }
        if (filter.isNumber()) {
            this.formControl = new FormGroup({
                operator: new FormControl(value?.operator ?? 'gt'),
                amount: new FormControl(value?.amount ?? ''),
            }, control => {
                if (control.value.amount == null) {
                    return { noSelection: true };
                }
                return null;
            });
        }
        else if (filter.isSelect()) {
            this.formControl = new FormArray(filter.type.options.map(o => new FormControl(value?.includes(o.value) ?? false)), control => (control.value.some(Boolean) ? null : { noSelection: true }));
        }
        else if (filter.isBoolean()) {
            this.formControl = new FormControl(value ?? false);
        }
        else if (filter.isDateRange()) {
            this.formControl = new FormGroup({
                mode: new FormControl('relative'),
                relativeValue: new FormControl(value?.relativeValue ?? 30),
                relativeUnit: new FormControl(value?.relativeUnit ?? 'day'),
                start: new FormControl(value?.start ?? null),
                end: new FormControl(value?.end ?? null),
            }, control => {
                const val = control.value;
                const mode = val.mode;
                if (mode === 'range' && val.start && val.end && val.start > val.end) {
                    return { invalidRange: true };
                }
                if (mode === 'range' && !val.start && !val.end) {
                    return { noSelection: true };
                }
                return null;
            });
        }
        else if (filter.isCustom() && this._customComponentHost) {
            // this.#customComponentHost.viewContainerRef.clear();
            this.customComponent = this._customComponentHost.viewContainerRef.createComponent(filter.type.component);
            this.formControl = new FormControl(value ?? []);
            this.customComponent.instance.config = {};
            this.customComponent.instance.formControl = new FormControl(value ?? []);
        }
    }
    activate(event) {
        event.preventDefault();
        if (!this.selectedFilter) {
            return;
        }
        let value;
        const type = this.selectedFilter?.type;
        switch (type.kind) {
            case 'boolean':
                value = !!this.formControl.value;
                break;
            case 'dateRange': {
                const mode = this.formControl.value.mode ?? 'relative';
                const relativeValue = this.formControl.value.relativeValue ?? 30;
                const relativeUnit = this.formControl.value.relativeUnit ?? 'day';
                const start = this.formControl.value.start ?? undefined;
                const end = this.formControl.value.end ?? undefined;
                value = {
                    mode,
                    relativeValue,
                    relativeUnit,
                    start,
                    end,
                };
                break;
            }
            case 'number':
                value = {
                    amount: Number(this.formControl.value.amount),
                    operator: this.formControl.value.operator,
                };
                break;
            case 'select':
                const options = this.formControl.value
                    .map((v, i) => (v ? type.options[i].value : undefined))
                    .filter(v => !!v);
                value = options;
                break;
            case 'text':
                value = {
                    operator: this.formControl.value.operator,
                    term: this.formControl.value.term,
                };
                break;
            case 'id':
                value = {
                    operator: this.formControl.value.operator,
                    term: this.formControl.value.term,
                };
                break;
            case 'custom':
                value = this.customComponent?.instance.formControl.value;
                this.formControl.setValue(value);
                if (this.state === 'new') {
                    this._customComponentHost.viewContainerRef.clear();
                }
                break;
            default:
                assertNever(type);
        }
        if (this.state === 'new') {
            this.selectedFilter.activate(value);
        }
        else {
            this.filterWithValue?.updateValue(value);
        }
        this.dropdown.toggleOpen();
    }
    deactivate() {
        if (this.filterWithValue) {
            const index = this.filters.activeFilters.indexOf(this.filterWithValue);
            this.filters.removeActiveFilterAtIndex(index);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFiltersComponent, deps: [{ token: i1.I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, host: { listeners: { "window:keydown.f": "onFKeyPress($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\n    <div class=\"filter-button\" [ngClass]=\"state\">\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\n        </button>\n        <button vdrDropdownTrigger class=\"\">\n            <span *ngIf=\"state === 'new'\"\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\n            >\n            <span *ngIf=\"state === 'active'\">\n                <vdr-data-table-filter-label\n                    [filterWithValue]=\"filterWithValue\"\n                ></vdr-data-table-filter-label>\n            </span>\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n        </button>\n    </div>\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n        <div *ngIf=\"!selectedFilter\">\n            <div class=\"filter-heading\">Filter by:</div>\n            <div *ngFor=\"let filter of filters.getFilters()\">\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\n                    <vdr-localized-text [text]=\"filter?.label\" />\n                </button>\n            </div>\n        </div>\n\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\n        </div>\n        <div class=\"mx-2 mt-1\">\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\n        </div>\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\n                            <span>{{ option.label | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'boolean'\">\n                        <label\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'text'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"contains\">\n                                        {{ 'common.operator-contains' | translate }}\n                                    </option>\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notContains\">\n                                        {{ 'common.operator-not-contains' | translate }}\n                                    </option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'id'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'number'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\n                                </select>\n                            </div>\n                            <input\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\n                                type=\"text\"\n                                formControlName=\"amount\"\n                            />\n                            <vdr-currency-input\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\n                                formControlName=\"amount\"\n                            />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'dateRange'\">\n                        <div [formGroup]=\"formControl\">\n                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\n                                    <option value=\"relative\">\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\n                                    </option>\n                                    <option value=\"range\">\n                                        {{ 'common.data-table-filter-date-range' | translate }}\n                                    </option>\n                                </select>\n                            </vdr-form-field>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\n                                <div class=\"flex mt-2\">\n                                    <vdr-form-field class=\"mr-1\">\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\n                                    </vdr-form-field>\n                                    <vdr-form-field>\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\n                                        </select>\n                                    </vdr-form-field>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\n                                <label>\n                                    <div>{{ 'common.start-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\n                                <label>\n                                    <div>{{ 'common.end-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"apply-wrapper mt-2\">\n                <button class=\"button\" (click)=\"activate($event)\" [disabled]=\"!formControl?.valid\">\n                    <span>{{ 'common.apply' | translate }}</span>\n                    <clr-icon shape=\"check\"></clr-icon>\n                </button>\n            </div>\n        </form>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-inline-end:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i6.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i8.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i9.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i10.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i11.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i12.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i13.DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: i14.DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: i15.CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: i16.LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i17.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFiltersComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-data-table-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\n    <div class=\"filter-button\" [ngClass]=\"state\">\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\n        </button>\n        <button vdrDropdownTrigger class=\"\">\n            <span *ngIf=\"state === 'new'\"\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\n            >\n            <span *ngIf=\"state === 'active'\">\n                <vdr-data-table-filter-label\n                    [filterWithValue]=\"filterWithValue\"\n                ></vdr-data-table-filter-label>\n            </span>\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n        </button>\n    </div>\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n        <div *ngIf=\"!selectedFilter\">\n            <div class=\"filter-heading\">Filter by:</div>\n            <div *ngFor=\"let filter of filters.getFilters()\">\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\n                    <vdr-localized-text [text]=\"filter?.label\" />\n                </button>\n            </div>\n        </div>\n\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\n        </div>\n        <div class=\"mx-2 mt-1\">\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\n        </div>\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\n                            <span>{{ option.label | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'boolean'\">\n                        <label\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'text'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"contains\">\n                                        {{ 'common.operator-contains' | translate }}\n                                    </option>\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notContains\">\n                                        {{ 'common.operator-not-contains' | translate }}\n                                    </option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'id'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'number'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\n                                </select>\n                            </div>\n                            <input\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\n                                type=\"text\"\n                                formControlName=\"amount\"\n                            />\n                            <vdr-currency-input\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\n                                formControlName=\"amount\"\n                            />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'dateRange'\">\n                        <div [formGroup]=\"formControl\">\n                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\n                                    <option value=\"relative\">\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\n                                    </option>\n                                    <option value=\"range\">\n                                        {{ 'common.data-table-filter-date-range' | translate }}\n                                    </option>\n                                </select>\n                            </vdr-form-field>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\n                                <div class=\"flex mt-2\">\n                                    <vdr-form-field class=\"mr-1\">\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\n                                    </vdr-form-field>\n                                    <vdr-form-field>\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\n                                        </select>\n                                    </vdr-form-field>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\n                                <label>\n                                    <div>{{ 'common.start-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\n                                <label>\n                                    <div>{{ 'common.end-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"apply-wrapper mt-2\">\n                <button class=\"button\" (click)=\"activate($event)\" [disabled]=\"!formControl?.valid\">\n                    <span>{{ 'common.apply' | translate }}</span>\n                    <clr-icon shape=\"check\"></clr-icon>\n                </button>\n            </div>\n        </form>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-inline-end:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.I18nService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filters: [{
                type: Input
            }], filterWithValue: [{
                type: Input
            }], dropdown: [{
                type: ViewChild,
                args: ['dropdown', { static: true }]
            }], customComponentHost: [{
                type: ViewChild,
                args: ['customComponentHost', { static: false, read: CustomFilterComponentDirective }]
            }], onFKeyPress: [{
                type: HostListener,
                args: ['window:keydown.f', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 