@firestitch/filter 13.3.1 → 13.4.1

package/fesm2020/firestitch-filter.mjs

@@ -29,6 +29,8 @@ import * as i7 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
 import * as i3$2 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
+import * as i4$3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i4$2 from '@angular/material/checkbox';
@@ -519,85 +521,6 @@ function getRangeName(configCase, name, range) {
     }
 }
 
-class RangeItem extends BaseItem {
-    static create(config, additionalConfig, filter) {
-        return new RangeItem(config, additionalConfig, filter);
-    }
-    get value() {
-        let value = clone(this.model);
-        if (!isObject(this.model) ||
-            (isEmpty(this.model.max, { zero: true }) && isEmpty(this.model.min, { zero: true }))) {
-            value = undefined;
-        }
-        return value;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        const paramMinName = getRangeName(this.case, name, 'min');
-        const paramMaxName = getRangeName(this.case, name, 'max');
-        if (isObject(value)) {
-            params[paramMinName] = value.min || undefined;
-            params[paramMaxName] = value.max || undefined;
-        }
-        else {
-            params[paramMinName] = undefined;
-            params[paramMaxName] = undefined;
-        }
-        return params;
-    }
-    get isChipVisible() {
-        return this.model && (this.model.min !== undefined || this.model.max !== undefined);
-    }
-    getChipsContent(type) {
-        if (type === 'from') {
-            const min = this.model.min;
-            return `${min}`;
-        }
-        else if (type === 'to') {
-            const max = this.model.max;
-            return `${max}`;
-        }
-    }
-    clearRange(type = null, defaultValue = undefined) {
-        if (type === 'from') {
-            delete this.model.min;
-            if (defaultValue?.min) {
-                this.model.min = defaultValue.min;
-            }
-            this.model = { ...this.model };
-        }
-        else if (type === 'to') {
-            delete this.model.max;
-            if (defaultValue?.max) {
-                this.model.max = defaultValue.max;
-            }
-            this.model = { ...this.model };
-        }
-        else {
-            this.model = defaultValue ? { ...defaultValue } : {};
-        }
-    }
-    _validateModel() {
-    }
-    _parseConfig(item) {
-        this.options = item.options;
-        this.prefix = item.prefix;
-        this.suffix = item.suffix;
-        this.case = this._additionalConfig?.case ?? 'camel';
-        super._parseConfig(item);
-    }
-    _init() {
-        if (!this.label) {
-            this.label = ['Min', 'Max'];
-        }
-        if (!this.model) {
-            this.model = this.defaultValue || {};
-        }
-    }
-}
-
 class BaseDateRangeItem extends BaseItem {
     get isTypeDateRange() {
         return this.type === ItemType.DateRange;
@@ -738,82 +661,83 @@ class DateTimeRangeItem extends BaseDateRangeItem {
     }
 }
 
-function parseItemValueFromStored(item, params, paramCase) {
-    const param = params[item.name];
-    switch (item.type) {
-        case ItemType.Range: {
-            const min = params[getRangeName(paramCase, item.name, 'min')];
-            const max = params[getRangeName(paramCase, item.name, 'max')];
-            return { min: min, max: max };
+class RangeItem extends BaseItem {
+    static create(config, additionalConfig, filter) {
+        return new RangeItem(config, additionalConfig, filter);
+    }
+    get value() {
+        let value = clone(this.model);
+        if (!isObject(this.model) ||
+            (isEmpty(this.model.max, { zero: true }) && isEmpty(this.model.min, { zero: true }))) {
+            value = undefined;
         }
-        case ItemType.DateRange:
-        case ItemType.DateTimeRange: {
-            const from = params[getRangeName(item.case, item.name, 'from')];
-            const to = params[getRangeName(item.case, item.name, 'to')];
-            return { from: from, to: to };
+        return value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        const paramMinName = getRangeName(this.case, name, 'min');
+        const paramMaxName = getRangeName(this.case, name, 'max');
+        if (isObject(value)) {
+            params[paramMinName] = value.min || undefined;
+            params[paramMaxName] = value.max || undefined;
         }
-        case ItemType.Week: {
-            const from = params[getRangeName('camel', item.name, 'from')];
-            const to = params[getRangeName('camel', item.name, 'to')];
-            const period = params[`${item.name}Period`];
-            return { from, to, period };
+        else {
+            params[paramMinName] = undefined;
+            params[paramMaxName] = undefined;
         }
-        case ItemType.Select: {
-            if (item.multiple && !!param) {
-                const values = param.split(',');
-                if (item.isolate) {
-                    const isolatedValue = Array.isArray(item.isolate.value)
-                        ? item.isolate.value
-                        : [item.isolate.value];
-                    item.isolate.enabled = arraysHaveSameElements(isolatedValue, values);
-                    return item.isolate.enabled
-                        ? isolatedValue
-                        : values;
-                }
-                return values;
-            }
-            else {
-                return param;
-            }
+        return params;
+    }
+    get isChipVisible() {
+        return this.model && (this.model.min !== undefined || this.model.max !== undefined);
+    }
+    getChipsContent(type) {
+        if (type === 'from') {
+            const min = this.model.min;
+            return `${min}`;
         }
-        case ItemType.Checkbox: {
-            if (param === 'true') {
-                return true === item.checked;
+        else if (type === 'to') {
+            const max = this.model.max;
+            return `${max}`;
+        }
+    }
+    clearRange(type = null, defaultValue = undefined) {
+        if (type === 'from') {
+            delete this.model.min;
+            if (defaultValue?.min) {
+                this.model.min = defaultValue.min;
             }
-            else {
-                return param === item.checked;
+            this.model = { ...this.model };
+        }
+        else if (type === 'to') {
+            delete this.model.max;
+            if (defaultValue?.max) {
+                this.model.max = defaultValue.max;
             }
+            this.model = { ...this.model };
         }
-        case ItemType.AutoComplete: {
-            const filterParts = filterFromQueryParam(param);
-            return {
-                name: filterParts[1],
-                value: filterParts[0]
-            };
+        else {
+            this.model = defaultValue ? { ...defaultValue } : {};
         }
-        case ItemType.AutoCompleteChips:
-        case ItemType.Chips: {
-            const filterParts = param.split(',');
-            return filterParts.reduce((arry, value) => {
-                const chipParts = filterFromQueryParam(value);
-                arry.push({
-                    name: chipParts[1],
-                    value: chipParts[0],
-                });
-                return arry;
-            }, []);
+    }
+    _validateModel() {
+    }
+    _parseConfig(item) {
+        this.options = item.options;
+        this.prefix = item.prefix;
+        this.suffix = item.suffix;
+        this.case = this._additionalConfig?.case ?? 'camel';
+        super._parseConfig(item);
+    }
+    _init() {
+        if (!this.label) {
+            this.label = ['Min', 'Max'];
         }
-        default: {
-            return param;
+        if (!this.model) {
+            this.model = this.defaultValue || {};
         }
     }
-}
-function arraysHaveSameElements(arr1, arr2) {
-    arr1 = [...arr1].sort();
-    arr2 = [...arr2].sort();
-    return arr1.some((item) => {
-        return arr2.includes(item);
-    });
 }
 
 function parseDate(value) {
@@ -909,6 +833,84 @@ class WeekItem extends BaseItem {
     }
 }
 
+function parseItemValueFromStored(item, params, paramCase) {
+    const param = params[item.name];
+    switch (item.type) {
+        case ItemType.Range: {
+            const min = params[getRangeName(paramCase, item.name, 'min')];
+            const max = params[getRangeName(paramCase, item.name, 'max')];
+            return { min: min, max: max };
+        }
+        case ItemType.DateRange:
+        case ItemType.DateTimeRange: {
+            const from = params[getRangeName(item.case, item.name, 'from')];
+            const to = params[getRangeName(item.case, item.name, 'to')];
+            return { from: from, to: to };
+        }
+        case ItemType.Week: {
+            const from = params[getRangeName('camel', item.name, 'from')];
+            const to = params[getRangeName('camel', item.name, 'to')];
+            const period = params[`${item.name}Period`];
+            return { from, to, period };
+        }
+        case ItemType.Select: {
+            if (item.multiple && !!param) {
+                const values = param.split(',');
+                if (item.isolate) {
+                    const isolatedValue = Array.isArray(item.isolate.value)
+                        ? item.isolate.value
+                        : [item.isolate.value];
+                    item.isolate.enabled = arraysHaveSameElements(isolatedValue, values);
+                    return item.isolate.enabled
+                        ? isolatedValue
+                        : values;
+                }
+                return values;
+            }
+            else {
+                return param;
+            }
+        }
+        case ItemType.Checkbox: {
+            if (param === 'true') {
+                return true === item.checked;
+            }
+            else {
+                return param === item.checked;
+            }
+        }
+        case ItemType.AutoComplete: {
+            const filterParts = filterFromQueryParam(param);
+            return {
+                name: filterParts[1],
+                value: filterParts[0]
+            };
+        }
+        case ItemType.AutoCompleteChips:
+        case ItemType.Chips: {
+            const filterParts = param.split(',');
+            return filterParts.reduce((arry, value) => {
+                const chipParts = filterFromQueryParam(value);
+                arry.push({
+                    name: chipParts[1],
+                    value: chipParts[0],
+                });
+                return arry;
+            }, []);
+        }
+        default: {
+            return param;
+        }
+    }
+}
+function arraysHaveSameElements(arr1, arr2) {
+    arr1 = [...arr1].sort();
+    arr2 = [...arr2].sort();
+    return arr1.some((item) => {
+        return arr2.includes(item);
+    });
+}
+
 /**
  * We need this function because when we store persisted/query/remote filter values
  * it stores with different format, ex.: Range will be stored as RangeFrom && RangeTo
@@ -1549,6 +1551,9 @@ class FsFilterItemsStore {
     get items() {
         return this._items;
     }
+    get itemNames() {
+        return this._items.map((item) => item.name);
+    }
     get visibleItems() {
         return this._visibleItems$.getValue();
     }
@@ -2060,17 +2065,17 @@ class SavedFiltersController {
     }
     order(savedFilters) {
         return this._config.order(savedFilters)
-            .pipe(tap((response) => {
+            .pipe(tap(() => {
             this.savedFilters = [
-                ...response,
+                ...savedFilters,
             ];
         }));
     }
     delete(savedFilter) {
         return this._config.delete(savedFilter)
-            .pipe(tap((response) => {
+            .pipe(tap(() => {
             this.savedFilters = this.savedFilters
-                .filter((f) => f.id !== response.id);
+                .filter((f) => f.id !== savedFilter.id);
         }));
     }
     setActiveFilter(savedFilter) {
@@ -2156,15 +2161,32 @@ class ExternalParamsController {
         this._destroy$ = new Subject();
     }
     get params() {
-        const result = {};
+        let result = {};
         if (this._persistanceStore.enabled) {
-            Object.assign(result, this._persistanceStore.value?.data);
+            result = {
+                ...result,
+                ...this._persistanceStore.value?.data,
+            };
         }
         if (this._savedFilters.enabled && this._savedFilters.activeFilter) {
-            Object.assign(result, this._savedFilters.activeFilterData);
+            const query = Object.keys(result)
+                .filter((key) => !this._itemsStore.itemNames.includes(key))
+                .reduce((acc, key) => {
+                return {
+                    ...acc,
+                    [key]: result[key],
+                };
+            }, {});
+            result = {
+                ...query,
+                ...this._savedFilters.activeFilterData,
+            };
         }
-        if (this._queryParams.enabled) {
-            Object.assign(result, this._queryParams.fetchedParams);
+        else if (this._queryParams.enabled) {
+            result = {
+                ...result,
+                ...this._queryParams.fetchedParams,
+            };
         }
         return result;
     }
@@ -4280,11 +4302,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             args: [{ selector: 'filter-item-select-backdrop', changeDetection: ChangeDetectionStrategy.OnPush, template: "", styles: [":host{position:absolute;z-index:1002;inset:0}\n"] }]
         }], ctorParameters: function () { return []; } });
 
+class FsFilterSavedFilterManageComponent {
+    constructor(data, _cdRef) {
+        this.data = data;
+        this._cdRef = _cdRef;
+        this._savedFiltersController = this.data.savedFiltersController;
+        this.savedFilters = [...this._savedFiltersController.savedFilters];
+    }
+    remove(savedFilter) {
+        this._savedFiltersController.delete(savedFilter)
+            .subscribe(() => {
+            this.savedFilters = [...this._savedFiltersController.savedFilters];
+            this._cdRef.markForCheck();
+        });
+    }
+    drop(event) {
+        moveItemInArray(this.savedFilters, event.previousIndex, event.currentIndex);
+        this._savedFiltersController.order(this.savedFilters)
+            .subscribe();
+    }
+}
+FsFilterSavedFilterManageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterSavedFilterManageComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FsFilterSavedFilterManageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterSavedFilterManageComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage saved filters\n</h1>\n<div mat-dialog-content>\n  <div\n      cdkDropList \n      [cdkDropListData]=\"savedFilters\"\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\">  \n    <ng-container \n        *ngFor=\"let savedFilter of savedFilters\">\n      <div class=\"chip-container\">\n        <fs-chip \n            cdkDrag\n            (removed)=\"remove(savedFilter)\">\n          {{savedFilter.name}}\n        </fs-chip>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n      mat-button\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>\n", styles: [".chip-container{padding:5px 0}.chip-container fs-chip{cursor:move}.cdk-drag-preview{box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i2$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$3.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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i7.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterSavedFilterManageComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>\n  Manage saved filters\n</h1>\n<div mat-dialog-content>\n  <div\n      cdkDropList \n      [cdkDropListData]=\"savedFilters\"\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\">  \n    <ng-container \n        *ngFor=\"let savedFilter of savedFilters\">\n      <div class=\"chip-container\">\n        <fs-chip \n            cdkDrag\n            (removed)=\"remove(savedFilter)\">\n          {{savedFilter.name}}\n        </fs-chip>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n      mat-button\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>\n", styles: [".chip-container{padding:5px 0}.chip-container fs-chip{cursor:move}.cdk-drag-preview{box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i0.ChangeDetectorRef }]; } });
+
 class FsSavedFiltersMenuComponent {
-    constructor(_itemsStore, _externalParams, _savedFilters) {
+    constructor(_itemsStore, _externalParams, _savedFilters, _dialog) {
         this._itemsStore = _itemsStore;
         this._externalParams = _externalParams;
         this._savedFilters = _savedFilters;
+        this._dialog = _dialog;
         this.clear = new EventEmitter();
     }
     get filters$() {
@@ -4302,15 +4355,19 @@ class FsSavedFiltersMenuComponent {
         this.clear.emit();
     }
     manageFilters() {
-        // TODO: Implement
+        this._dialog.open(FsFilterSavedFilterManageComponent, {
+            data: {
+                savedFiltersController: this._savedFilters,
+            },
+        });
     }
 }
-FsSavedFiltersMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
-FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { clear: "clear" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <!-- TODO: Implement -->\n  <!-- <ng-template \n      fs-menu-item \n      class=\"saved-filter-last-item\" \n      (click)=\"manageFilters()\">\n    Manage\n  </ng-template> -->\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }], directives: [{ type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsSavedFiltersMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { clear: "clear" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"(filters$ | async).length !==0\">\n    <ng-container *ngFor=\"let filter of filters$ | async\">\n      <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n        {{ filter.name }}\n      </ng-template>\n    </ng-container>\n    <ng-template fs-menu-divider-item></ng-template>\n  </ng-container>\n  <ng-template \n      fs-menu-item \n      class=\"saved-filter-last-item\" \n      (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }], directives: [{ type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSavedFiltersMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-filter-saved-filters-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <!-- TODO: Implement -->\n  <!-- <ng-template \n      fs-menu-item \n      class=\"saved-filter-last-item\" \n      (click)=\"manageFilters()\">\n    Manage\n  </ng-template> -->\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: ExternalParamsController }, { type: SavedFiltersController }]; }, propDecorators: { clear: [{
+            args: [{ selector: 'fs-filter-saved-filters-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngIf=\"(filters$ | async).length !==0\">\n    <ng-container *ngFor=\"let filter of filters$ | async\">\n      <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n        {{ filter.name }}\n      </ng-template>\n    </ng-container>\n    <ng-template fs-menu-divider-item></ng-template>\n  </ng-container>\n  <ng-template \n      fs-menu-item \n      class=\"saved-filter-last-item\" \n      (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: ExternalParamsController }, { type: SavedFiltersController }, { type: i1$1.MatDialog }]; }, propDecorators: { clear: [{
                 type: Output
             }] } });
 
@@ -4360,6 +4417,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FsFilterActionsComponent,
         FsFilterActionButtonComponent,
         FsFilterActionKebabActionsComponent,
+        FsFilterSavedFilterManageComponent,
         FilterStatusBarDirective,
         FocusToItemDirective,
         // Pipes
@@ -4367,6 +4425,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         RouterModule,
         FormsModule,
         ReactiveFormsModule,
+        DragDropModule,
         MatIconModule,
         MatInputModule,
         MatSelectModule,
@@ -4402,6 +4461,7 @@ FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             RouterModule,
             FormsModule,
             ReactiveFormsModule,
+            DragDropModule,
             MatIconModule,
             MatInputModule,
             MatSelectModule,
@@ -4437,6 +4497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         RouterModule,
                         FormsModule,
                         ReactiveFormsModule,
+                        DragDropModule,
                         MatIconModule,
                         MatInputModule,
                         MatSelectModule,
@@ -4492,6 +4553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FsFilterActionsComponent,
                         FsFilterActionButtonComponent,
                         FsFilterActionKebabActionsComponent,
+                        FsFilterSavedFilterManageComponent,
                         FilterStatusBarDirective,
                         FocusToItemDirective,
                         // Pipes