import { ChangeDetectionStrategy, Component, Input, ViewChild, } from '@angular/core';
import { FormControl } from '@angular/forms';
import { merge, Subject } from 'rxjs';
import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "./filter-preset.service";
import * as i2 from "@angular/router";
import * as i3 from "@clr/angular";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/cdk/a11y";
import * as i6 from "../form-field/form-field-control.directive";
import * as i7 from "../dropdown/dropdown.component";
import * as i8 from "../dropdown/dropdown-menu.component";
import * as i9 from "../dropdown/dropdown-trigger.directive";
import * as i10 from "@ngx-translate/core";
export class AddFilterPresetButtonComponent {
    constructor(filterPresetService, changeDetector, route) {
        this.filterPresetService = filterPresetService;
        this.changeDetector = changeDetector;
        this.route = route;
        this.filterPresetName = new FormControl('');
        this.destroy$ = new Subject();
    }
    ngOnInit() {
        merge(this.route.queryParamMap.pipe(map(qpm => qpm.get('filters')), distinctUntilChanged(), takeUntil(this.destroy$)), this.filterPresetService.presetChanges$, this.filters.valueChanges).subscribe(() => {
            this.changeDetector.markForCheck();
            this.updateSelectedFilterPreset();
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    saveFilterPreset() {
        const name = this.filterPresetName.value;
        if (this.filters && name) {
            const value = this.filters.serialize();
            this.filterPresetService.saveFilterPreset({
                dataTableId: this.dataTableId,
                name,
                value,
            });
            this.filterPresetName.setValue('');
            this.addPresetDropdown.toggleOpen();
        }
        this.updateSelectedFilterPreset();
    }
    updateSelectedFilterPreset() {
        this.selectedFilterPreset = this.filterPresetService
            .getFilterPresets(this.dataTableId)
            .find(p => p.value === this.filters.serialize())?.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddFilterPresetButtonComponent, deps: [{ token: i1.FilterPresetService }, { token: i0.ChangeDetectorRef }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: { dataTableId: "dataTableId", filters: "filters" }, viewQueries: [{ propertyName: "addPresetDropdown", first: true, predicate: ["addPresetDropdown"], descendants: true }], ngImport: i0, template: "<vdr-dropdown #addPresetDropdown>\n    <button\n        class=\"add-preset-button mt-1\"\n        vdrDropdownTrigger\n        [class.visible]=\"filters.activeFilters.length > 0 && !selectedFilterPreset\"\n        [disabled]=\"filters.activeFilters.length === 0 || !!selectedFilterPreset\"\n    >\n        <clr-icon shape=\"floppy\"/>\n        <div>{{ 'common.save-filter-preset' | translate }}</div>\n    </button>\n    <vdr-dropdown-menu\n        vdrPosition=\"bottom-left\"\n        [cdkTrapFocus]=\"true\"\n        [cdkTrapFocusAutoCapture]=\"true\"\n    >\n        <form class=\"mx-1\">\n            <div>\n                <input\n                    type=\"text\"\n                    [placeholder]=\"'common.filter-preset-name' | translate\"\n                    [formControl]=\"filterPresetName\"\n                />\n            </div>\n            <div class=\"preset-create-row\">\n                <button class=\"button mt-2\" (click)=\"saveFilterPreset()\">\n                    {{ 'common.create' | translate }}\n                </button>\n            </div>\n        </form>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [".add-preset-button{display:flex;flex-direction:row;cursor:pointer;gap:6px;align-items:center;border:none;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);opacity:0;transition:opacity .2s}.add-preset-button.visible{opacity:1}.preset-create-row{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddFilterPresetButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-add-filter-preset-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown #addPresetDropdown>\n    <button\n        class=\"add-preset-button mt-1\"\n        vdrDropdownTrigger\n        [class.visible]=\"filters.activeFilters.length > 0 && !selectedFilterPreset\"\n        [disabled]=\"filters.activeFilters.length === 0 || !!selectedFilterPreset\"\n    >\n        <clr-icon shape=\"floppy\"/>\n        <div>{{ 'common.save-filter-preset' | translate }}</div>\n    </button>\n    <vdr-dropdown-menu\n        vdrPosition=\"bottom-left\"\n        [cdkTrapFocus]=\"true\"\n        [cdkTrapFocusAutoCapture]=\"true\"\n    >\n        <form class=\"mx-1\">\n            <div>\n                <input\n                    type=\"text\"\n                    [placeholder]=\"'common.filter-preset-name' | translate\"\n                    [formControl]=\"filterPresetName\"\n                />\n            </div>\n            <div class=\"preset-create-row\">\n                <button class=\"button mt-2\" (click)=\"saveFilterPreset()\">\n                    {{ 'common.create' | translate }}\n                </button>\n            </div>\n        </form>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [".add-preset-button{display:flex;flex-direction:row;cursor:pointer;gap:6px;align-items:center;border:none;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);opacity:0;transition:opacity .2s}.add-preset-button.visible{opacity:1}.preset-create-row{display:flex;justify-content:flex-end}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FilterPresetService }, { type: i0.ChangeDetectorRef }, { type: i2.ActivatedRoute }]; }, propDecorators: { dataTableId: [{
                type: Input,
                args: [{ required: true }]
            }], filters: [{
                type: Input,
                args: [{ required: true }]
            }], addPresetDropdown: [{
                type: ViewChild,
                args: ['addPresetDropdown']
            }] } });
//# sourceMappingURL=data:application/json;base64, 