import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
import { Subject } from 'rxjs';
import { distinctUntilChanged, map, startWith, takeUntil } from 'rxjs/operators';
import { RenameFilterPresetDialogComponent } from './rename-filter-preset-dialog.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "./filter-preset.service";
import * as i3 from "../../../providers/modal/modal.service";
import * as i4 from "@clr/angular";
import * as i5 from "@angular/common";
import * as i6 from "@angular/cdk/drag-drop";
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 "../dropdown/dropdown-item.directive";
import * as i11 from "@ngx-translate/core";
export class DataTableFilterPresetsComponent {
    constructor(route, filterPresetService, modalService, changeDetectorRef) {
        this.route = route;
        this.filterPresetService = filterPresetService;
        this.modalService = modalService;
        this.changeDetectorRef = changeDetectorRef;
        this.destroy$ = new Subject();
    }
    ngOnInit() {
        this.route.queryParamMap
            .pipe(map(qpm => qpm.get('filters')), distinctUntilChanged(), takeUntil(this.destroy$))
            .subscribe(() => {
            this.serializedActiveFilters = this.filters.serialize();
            this.changeDetectorRef.markForCheck();
        });
        this.serializedActiveFilters = this.filters.serialize();
        this.filterPresets$ = this.filterPresetService.presetChanges$.pipe(startWith(this.filterPresetService.getFilterPresets(this.dataTableId)));
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    deleteFilterPreset(name) {
        this.filterPresetService.deleteFilterPreset({
            dataTableId: this.dataTableId,
            name,
        });
        this.serializedActiveFilters = this.filters.serialize();
    }
    renameFilterPreset(name) {
        this.modalService
            .fromComponent(RenameFilterPresetDialogComponent, {
            closable: true,
            locals: {
                name,
            },
        })
            .subscribe(result => {
            if (result) {
                this.filterPresetService.renameFilterPreset({
                    dataTableId: this.dataTableId,
                    oldName: name,
                    newName: result,
                });
            }
        });
    }
    drop(event) {
        this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterPresetsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.FilterPresetService }, { token: i3.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\n    <div\n        class=\"preset-tabs\"\n        *ngIf=\"filters && filterPresets.length\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        <div\n            *ngFor=\"let preset of filterPresets\"\n            class=\"preset-tab\"\n            [class.active]=\"preset.value === serializedActiveFilters\"\n            cdkDrag\n            cdkDragBoundary=\".preset-tabs\"\n            cdkDragLockAxis=\"x\"\n        >\n            <div class=\"drag-handle\" cdkDragHandle>\n                <clr-icon shape=\"drag-handle\"></clr-icon>\n            </div>\n            <a\n                [routerLink]=\"['./']\"\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\n            >\n                <div>{{ preset.name }}</div>\n            </a>\n            <vdr-dropdown>\n                <button class=\"icon-button\" vdrDropdownTrigger>\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\n                        <clr-icon shape=\"edit\"></clr-icon>\n                        {{ 'common.rename-filter-preset' | translate }}\n                    </button>\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                        {{ 'common.delete' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </div>\n    </div>\n</ng-container>\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: "directive", type: i10.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterPresetsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-data-table-filter-presets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\n    <div\n        class=\"preset-tabs\"\n        *ngIf=\"filters && filterPresets.length\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        <div\n            *ngFor=\"let preset of filterPresets\"\n            class=\"preset-tab\"\n            [class.active]=\"preset.value === serializedActiveFilters\"\n            cdkDrag\n            cdkDragBoundary=\".preset-tabs\"\n            cdkDragLockAxis=\"x\"\n        >\n            <div class=\"drag-handle\" cdkDragHandle>\n                <clr-icon shape=\"drag-handle\"></clr-icon>\n            </div>\n            <a\n                [routerLink]=\"['./']\"\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\n            >\n                <div>{{ preset.name }}</div>\n            </a>\n            <vdr-dropdown>\n                <button class=\"icon-button\" vdrDropdownTrigger>\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\n                        <clr-icon shape=\"edit\"></clr-icon>\n                        {{ 'common.rename-filter-preset' | translate }}\n                    </button>\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                        {{ 'common.delete' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </div>\n    </div>\n</ng-container>\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.FilterPresetService }, { type: i3.ModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dataTableId: [{
                type: Input,
                args: [{ required: true }]
            }], filters: [{
                type: Input,
                args: [{ required: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 