@firestitch/filter 9.9.5 → 9.10.0

package/fesm5/firestitch-filter.js

@@ -2454,11 +2454,27 @@ var ExternalParamsController = /** @class */ (function () {
         this._destroy$.complete();
     };
     ExternalParamsController.prototype.setConfig = function (config) {
-        var _this = this;
         this._config = config;
         this._initPersistance();
         this._initQueryParams();
         this._initSavedFilters();
+        this.initItems();
+    };
+    ExternalParamsController.prototype.setActiveSavedFilter = function (savedFilter) {
+        this.savedFiltersController.setActiveFilter(savedFilter);
+        if (savedFilter) {
+            this.reloadFiltersWithValues(savedFilter.filters, false);
+        }
+    };
+    ExternalParamsController.prototype.reloadFiltersWithValues = function (params, shouldResetSavedFilters) {
+        if (shouldResetSavedFilters === void 0) { shouldResetSavedFilters = true; }
+        this._shouldResetSavedFilters = shouldResetSavedFilters;
+        this._itemsStore.updateItemsWithValues(params);
+        this._saveQueryParams();
+        this._savePersistedParams();
+    };
+    ExternalParamsController.prototype.initItems = function () {
+        var _this = this;
         this._pending$.next(true);
         if (this._savedFilters.enabled) {
             this._savedFilters
@@ -2477,19 +2493,6 @@ var ExternalParamsController = /** @class */ (function () {
         }
         this._listenItemsChange();
     };
-    ExternalParamsController.prototype.setActiveSavedFilter = function (savedFilter) {
-        this.savedFiltersController.setActiveFilter(savedFilter);
-        if (savedFilter) {
-            this.reloadFiltersWithValues(savedFilter.filters, false);
-        }
-    };
-    ExternalParamsController.prototype.reloadFiltersWithValues = function (params, shouldResetSavedFilters) {
-        if (shouldResetSavedFilters === void 0) { shouldResetSavedFilters = true; }
-        this._shouldResetSavedFilters = shouldResetSavedFilters;
-        this._itemsStore.updateItemsWithValues(params);
-        this._saveQueryParams();
-        this._savePersistedParams();
-    };
     ExternalParamsController.prototype._initItemsValues = function () {
         this._itemsStore.initItemValues(this.params);
         this._saveQueryParams();
@@ -3039,6 +3042,7 @@ var Action = /** @class */ (function () {
         this.label = config.label;
         this.mode = config.mode;
         this.icon = config.icon;
+        this.iconPlacement = config.iconPlacement;
         this._showFn = config.show;
         this.tabIndex = (_d = config.tabIndex) !== null && _d !== void 0 ? _d : 0;
         if (config.multiple !== undefined) {
@@ -3073,6 +3077,12 @@ var Action = /** @class */ (function () {
                 {
                     this.fileSelected = config.select;
                     this.fileError = config.error;
+                    this.accept = config.accept;
+                    this.imageQuality = config.imageQuality;
+                    this.minWidth = config.minWidth;
+                    this.minHeight = config.minHeight;
+                    this.maxWidth = config.maxWidth;
+                    this.maxHeight = config.maxHeight;
                     this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (function () { });
                     this._disabledFn = config.disabled;
                     this.updateDisabledState();
@@ -3675,6 +3685,14 @@ var FilterComponent = /** @class */ (function () {
     FilterComponent.prototype.updateDisabledState = function () {
         this._actions.updateDisabledState();
     };
+    FilterComponent.prototype.setItems = function (items) {
+        this._filterItems.destroyItems();
+        this.config.items = items;
+        this._filterItems.setConfig(this._config);
+        this._externalParams.initItems();
+        this._syncSearchInputWithKeyword();
+        this._listenKeywordItemClear();
+    };
     FilterComponent.prototype._initFilterWithConfig = function (config) {
         if (this.config) {
             this._filterItems.destroyItems();
@@ -3684,11 +3702,7 @@ var FilterComponent = /** @class */ (function () {
         this._actions.initActions(this._config.actions);
         this._filterItems.setConfig(this._config);
         this._externalParams.setConfig(this._config);
-        var keywordItem = this._filterItems.keywordItem;
-        if (keywordItem) {
-            this.searchText.setValue(keywordItem.model);
-            this.searchPlaceholder = keywordItem.label || 'Search';
-        }
+        this._syncSearchInputWithKeyword();
         if (!!this.config.reloadWhenConfigChanged) {
             this.change();
         }
@@ -3762,6 +3776,13 @@ var FilterComponent = /** @class */ (function () {
             });
         });
     };
+    FilterComponent.prototype._syncSearchInputWithKeyword = function () {
+        var keywordItem = this._filterItems.keywordItem;
+        if (keywordItem) {
+            this.searchText.setValue(keywordItem.model);
+            this.searchPlaceholder = keywordItem.label || 'Search';
+        }
+    };
     FilterComponent.prototype._listenKeywordItemClear = function () {
         var _this = this;
         var _a;
@@ -4949,7 +4970,7 @@ var FsFilterActionsComponent = /** @class */ (function () {
     FsFilterActionsComponent = __decorate([
         Component({
             selector: 'fs-filter-actions',
-            template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n        class=\"action-button\"\n        [multiple]=\"action.multiple\"\n        (select)=\"action.fileSelected($event)\"\n        (error)=\"action.fileError($event)\"\n        (clicked)=\"action.click($event)\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n</ng-container>\n",
+            template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n        class=\"action-button\"\n        [accept]=\"action.accept || '*'\"\n        [multiple]=\"action.multiple\"\n        [minWidth]=\"action.minWidth\"\n        [minHeight]=\"action.minHeight\"\n        [imageWidth]=\"action.maxWidth\"\n        [imageHeight]=\"action.maxHeight\"\n        (select)=\"action.fileSelected($event)\"\n        (error)=\"action.fileError($event)\"\n        (clicked)=\"action.click($event)\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n</ng-container>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}"]
         })
@@ -4967,7 +4988,7 @@ var FsFilterActionButtonComponent = /** @class */ (function () {
     FsFilterActionButtonComponent = __decorate([
         Component({
             selector: 'fs-filter-action-button',
-            template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'basic'\"\n          mat-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button type=\"button\"\n          *ngSwitchDefault\n          mat-raised-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'icon'\"\n          mat-icon-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'fab'\"\n          mat-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'mini-fab'\"\n          mat-mini-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n  </ng-template>\n</ng-container>\n",
+            template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'basic'\"\n          mat-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button type=\"button\"\n          *ngSwitchDefault\n          mat-raised-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'icon'\"\n          mat-icon-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'fab'\"\n          mat-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'mini-fab'\"\n          mat-mini-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #withIcon>\n      <mat-icon *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n      {{action.label}}\n      <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n    </ng-template>\n  </ng-template>\n</ng-container>\n",
             host: {
                 class: 'action-button',
             },
@@ -4987,7 +5008,7 @@ var FsFilterActionKebabActionsComponent = /** @class */ (function () {
     FsFilterActionKebabActionsComponent = __decorate([
         Component({
             selector: 'fs-filter-action-kebab-actions',
-            template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\n          <fs-file\n            class=\"action-button\"\n            [multiple]=\"action.multiple\"\n            (select)=\"action.fileSelected($event)\"\n            (error)=\"action.fileError($event)\"\n            (clicked)=\"action.click($event)\">\n            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n",
+            template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\n          <fs-file\n            class=\"action-button\"\n            [accept]=\"action.accept || '*'\"\n            [multiple]=\"action.multiple\"\n            [minWidth]=\"action.minWidth\"\n            [minHeight]=\"action.minHeight\"\n            [imageWidth]=\"action.maxWidth\"\n            [imageHeight]=\"action.maxHeight\"\n            (select)=\"action.fileSelected($event)\"\n            (error)=\"action.fileError($event)\"\n            (clicked)=\"action.click($event)\">\n            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             styles: [".menu-button{width:36px;height:36px;line-height:36px}"]
         })