@firestitch/filter 13.3.0 → 13.4.0

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';
@@ -2060,17 +2062,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) {
@@ -3691,7 +3693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
 
 class FilterComponent {
-    constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions, _savedFiltersController) {
+    constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions, _savedFiltersController, _externalParamsController) {
         this._defaultConfig = _defaultConfig;
         this._filterOverlay = _filterOverlay;
         this._zone = _zone;
@@ -3699,6 +3701,7 @@ class FilterComponent {
         this._filterItems = _filterItems;
         this._actions = _actions;
         this._savedFiltersController = _savedFiltersController;
+        this._externalParamsController = _externalParamsController;
         this.showSortBy = true;
         this.showFilterInput = true;
         this.closed = new EventEmitter();
@@ -3782,8 +3785,8 @@ class FilterComponent {
     get menuActions$() {
         return this._actions.menuActions$;
     }
-    set activeSavedFilter(saveFilter) {
-        this._savedFiltersController.setActiveFilter(saveFilter);
+    set activeSavedFilter(savedFilter) {
+        this._externalParams.setActiveSavedFilter(savedFilter);
     }
     get activeSavedFilter() {
         return this._savedFiltersController.activeFilter;
@@ -4202,7 +4205,7 @@ class FilterComponent {
         this._hasFilterChips$.next(hasFilterChips);
     }
 }
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: SavedFiltersController }, { token: ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
 FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FilterComponent, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy", showFilterInput: "showFilterInput" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass", "class.has-keyword": "this.hasKeyword" } }, providers: [
         FsFilterOverlayService,
         ExternalParamsController,
@@ -4230,7 +4233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }, {
                     type: Inject,
                     args: [FS_FILTER_CONFIG]
-                }] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: SavedFiltersController }]; }, propDecorators: { setConfig: [{
+                }] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: SavedFiltersController }, { type: ExternalParamsController }]; }, propDecorators: { setConfig: [{
                 type: Input,
                 args: ['config']
             }], setFilter: [{
@@ -4279,11 +4282,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$() {
@@ -4301,15 +4335,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
             }] } });
 
@@ -4359,6 +4397,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FsFilterActionsComponent,
         FsFilterActionButtonComponent,
         FsFilterActionKebabActionsComponent,
+        FsFilterSavedFilterManageComponent,
         FilterStatusBarDirective,
         FocusToItemDirective,
         // Pipes
@@ -4366,6 +4405,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         RouterModule,
         FormsModule,
         ReactiveFormsModule,
+        DragDropModule,
         MatIconModule,
         MatInputModule,
         MatSelectModule,
@@ -4401,6 +4441,7 @@ FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             RouterModule,
             FormsModule,
             ReactiveFormsModule,
+            DragDropModule,
             MatIconModule,
             MatInputModule,
             MatSelectModule,
@@ -4436,6 +4477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         RouterModule,
                         FormsModule,
                         ReactiveFormsModule,
+                        DragDropModule,
                         MatIconModule,
                         MatInputModule,
                         MatSelectModule,
@@ -4491,6 +4533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FsFilterActionsComponent,
                         FsFilterActionButtonComponent,
                         FsFilterActionKebabActionsComponent,
+                        FsFilterSavedFilterManageComponent,
                         FilterStatusBarDirective,
                         FocusToItemDirective,
                         // Pipes