@firestitch/filter 9.9.1 → 9.9.6

package/app/interfaces/action.interface.d.ts

@@ -17,6 +17,7 @@ interface IFsFilterBaseAction {
     className?: string;
     color?: ThemePalette;
     icon?: string;
+    iconPlacement?: 'left' | 'right';
     label?: string;
     primary?: boolean;
     show?: FsFilterActionShowFn;

package/app/models/action.model.d.ts

@@ -7,6 +7,7 @@ import { ActionMenuItem } from './action-menu-item.model';
 export declare class Action {
     primary: boolean;
     icon: string;
+    iconPlacement: 'left' | 'right';
     label: string;
     menu: boolean;
     color: ThemePalette;

package/bundles/firestitch-filter.umd.js

@@ -494,6 +494,7 @@
         });
         BaseItem.prototype.loadDefaultValue = function () {
             var _this = this;
+            this._pendingDefaultValue = true;
             return this.defaultValueFn()
                 .pipe(operators.tap(function (value) {
                 _this.defaultValue = value;
@@ -566,7 +567,6 @@
             this.label = item.label;
             this.chipLabel = item.chipLabel;
             if (typeof item.default === 'function') {
-                this._pendingDefaultValue = true;
                 this.defaultValueFn = item.default;
             }
             else {
@@ -1869,7 +1869,7 @@
             var _this = this;
             var pendingItems = this.items
                 .filter(function (item) {
-                return item.hasPendingDefaultValue
+                return item.defaultValueFn
                     && (item.persistedValue === null || item.persistedValue === undefined);
             });
             if (pendingItems.length > 0) {
@@ -2692,6 +2692,12 @@
         };
         ExternalParamsController.prototype._listenItemsChange = function () {
             var _this = this;
+            this._itemsStore.ready$
+                .pipe(operators.filter(function (v) { return v; }), operators.take(1), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._saveQueryParams();
+                _this._savePersistedParams();
+            });
             this._itemsStore
                 .itemsChange$
                 .pipe(operators.takeUntil(this._destroy$))
@@ -3219,6 +3225,7 @@
             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) {
@@ -5147,7 +5154,7 @@
         FsFilterActionButtonComponent = __decorate([
             core.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',
                 },
@@ -5167,7 +5174,7 @@
         FsFilterActionKebabActionsComponent = __decorate([
             core.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 *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            [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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [".menu-button{width:36px;height:36px;line-height:36px}"]
             })