@firestitch/filter 13.3.1 → 13.4.1

package/fesm2015/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';
@@ -1435,6 +1437,9 @@ class FsFilterItemsStore {
     get items() {
         return this._items;
     }
+    get itemNames() {
+        return this._items.map((item) => item.name);
+    }
     get visibleItems() {
         return this._visibleItems$.getValue();
     }
@@ -2073,17 +2078,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) {
@@ -2170,15 +2175,20 @@ class ExternalParamsController {
     }
     get params() {
         var _a;
-        const result = {};
+        let result = {};
         if (this._persistanceStore.enabled) {
-            Object.assign(result, (_a = this._persistanceStore.value) === null || _a === void 0 ? void 0 : _a.data);
+            result = Object.assign(Object.assign({}, result), (_a = this._persistanceStore.value) === null || _a === void 0 ? void 0 : _a.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 Object.assign(Object.assign({}, acc), { [key]: result[key] });
+            }, {});
+            result = Object.assign(Object.assign({}, query), this._savedFilters.activeFilterData);
         }
-        if (this._queryParams.enabled) {
-            Object.assign(result, this._queryParams.fetchedParams);
+        else if (this._queryParams.enabled) {
+            result = Object.assign(Object.assign({}, result), this._queryParams.fetchedParams);
         }
         return result;
     }
@@ -4306,11 +4316,44 @@ 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$() {
@@ -4328,15 +4371,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
             }] } });
 
@@ -4383,6 +4430,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FsFilterActionsComponent,
         FsFilterActionButtonComponent,
         FsFilterActionKebabActionsComponent,
+        FsFilterSavedFilterManageComponent,
         FilterStatusBarDirective,
         FocusToItemDirective,
         // Pipes
@@ -4390,6 +4438,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         RouterModule,
         FormsModule,
         ReactiveFormsModule,
+        DragDropModule,
         MatIconModule,
         MatInputModule,
         MatSelectModule,
@@ -4425,6 +4474,7 @@ FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             RouterModule,
             FormsModule,
             ReactiveFormsModule,
+            DragDropModule,
             MatIconModule,
             MatInputModule,
             MatSelectModule,
@@ -4460,6 +4510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         RouterModule,
                         FormsModule,
                         ReactiveFormsModule,
+                        DragDropModule,
                         MatIconModule,
                         MatInputModule,
                         MatSelectModule,
@@ -4515,6 +4566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FsFilterActionsComponent,
                         FsFilterActionButtonComponent,
                         FsFilterActionKebabActionsComponent,
+                        FsFilterSavedFilterManageComponent,
                         FilterStatusBarDirective,
                         FocusToItemDirective,
                         // Pipes