@firestitch/filter 9.9.3 → 9.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,6 +17,7 @@ interface IFsFilterBaseAction {
17
17
  className?: string;
18
18
  color?: ThemePalette;
19
19
  icon?: string;
20
+ iconPlacement?: 'left' | 'right';
20
21
  label?: string;
21
22
  primary?: boolean;
22
23
  show?: FsFilterActionShowFn;
@@ -42,6 +43,11 @@ export interface IFsFilterFileAction extends IFsFilterBaseAction {
42
43
  multiple?: boolean;
43
44
  accept?: string;
44
45
  disabled?: FsFilterActionDisabledFn;
46
+ minWidth?: number;
47
+ minHeight?: number;
48
+ maxWidth?: number;
49
+ maxHeight?: number;
50
+ imageQuality?: number;
45
51
  }
46
52
  export interface IFsFilterMenuActionGroupItem {
47
53
  label?: string;
@@ -7,6 +7,7 @@ import { ActionMenuItem } from './action-menu-item.model';
7
7
  export declare class Action {
8
8
  primary: boolean;
9
9
  icon: string;
10
+ iconPlacement: 'left' | 'right';
10
11
  label: string;
11
12
  menu: boolean;
12
13
  color: ThemePalette;
@@ -18,6 +19,12 @@ export declare class Action {
18
19
  fileSelected: FsFilterFileActionSelectFn;
19
20
  fileError: FsFilterFileActionErrorFn;
20
21
  multiple: boolean;
22
+ accept: string;
23
+ minWidth: number;
24
+ minHeight: number;
25
+ maxWidth: number;
26
+ maxHeight: number;
27
+ imageQuality: number;
21
28
  mode: ActionMode;
22
29
  isReorderAction: boolean;
23
30
  classArray: string[];
@@ -2647,10 +2647,8 @@
2647
2647
  this._initSavedFilters();
2648
2648
  this._pending$.next(true);
2649
2649
  if (this._savedFilters.enabled) {
2650
- rxjs.combineLatest([
2651
- this._itemsStore.ready$,
2652
- this._savedFilters.load(),
2653
- ])
2650
+ this._savedFilters
2651
+ .load()
2654
2652
  .pipe(operators.takeUntil(this._destroy$))
2655
2653
  .subscribe(function () {
2656
2654
  _this._savedFilters.updateActiveFilter();
@@ -2660,12 +2658,8 @@
2660
2658
  });
2661
2659
  }
2662
2660
  else {
2663
- this._itemsStore.ready$
2664
- .pipe(operators.takeUntil(this._destroy$))
2665
- .subscribe(function () {
2666
- _this._initItemsValues();
2667
- _this._pending$.next(false);
2668
- });
2661
+ this._initItemsValues();
2662
+ this._pending$.next(false);
2669
2663
  }
2670
2664
  this._listenItemsChange();
2671
2665
  };
@@ -2698,6 +2692,12 @@
2698
2692
  };
2699
2693
  ExternalParamsController.prototype._listenItemsChange = function () {
2700
2694
  var _this = this;
2695
+ this._itemsStore.ready$
2696
+ .pipe(operators.filter(function (v) { return v; }), operators.take(1), operators.takeUntil(this._destroy$))
2697
+ .subscribe(function () {
2698
+ _this._saveQueryParams();
2699
+ _this._savePersistedParams();
2700
+ });
2701
2701
  this._itemsStore
2702
2702
  .itemsChange$
2703
2703
  .pipe(operators.takeUntil(this._destroy$))
@@ -3225,6 +3225,7 @@
3225
3225
  this.label = config.label;
3226
3226
  this.mode = config.mode;
3227
3227
  this.icon = config.icon;
3228
+ this.iconPlacement = config.iconPlacement;
3228
3229
  this._showFn = config.show;
3229
3230
  this.tabIndex = (_d = config.tabIndex) !== null && _d !== void 0 ? _d : 0;
3230
3231
  if (config.multiple !== undefined) {
@@ -3259,6 +3260,12 @@
3259
3260
  {
3260
3261
  this.fileSelected = config.select;
3261
3262
  this.fileError = config.error;
3263
+ this.accept = config.accept;
3264
+ this.imageQuality = config.imageQuality;
3265
+ this.minWidth = config.minWidth;
3266
+ this.minHeight = config.minHeight;
3267
+ this.maxWidth = config.maxWidth;
3268
+ this.maxHeight = config.maxHeight;
3262
3269
  this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (function () { });
3263
3270
  this._disabledFn = config.disabled;
3264
3271
  this.updateDisabledState();
@@ -5135,7 +5142,7 @@
5135
5142
  FsFilterActionsComponent = __decorate([
5136
5143
  core.Component({
5137
5144
  selector: 'fs-filter-actions',
5138
- 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",
5145
+ 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",
5139
5146
  changeDetection: core.ChangeDetectionStrategy.OnPush,
5140
5147
  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}"]
5141
5148
  })
@@ -5153,7 +5160,7 @@
5153
5160
  FsFilterActionButtonComponent = __decorate([
5154
5161
  core.Component({
5155
5162
  selector: 'fs-filter-action-button',
5156
- 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",
5163
+ 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",
5157
5164
  host: {
5158
5165
  class: 'action-button',
5159
5166
  },
@@ -5173,7 +5180,7 @@
5173
5180
  FsFilterActionKebabActionsComponent = __decorate([
5174
5181
  core.Component({
5175
5182
  selector: 'fs-filter-action-kebab-actions',
5176
- 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",
5183
+ 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",
5177
5184
  changeDetection: core.ChangeDetectionStrategy.OnPush,
5178
5185
  styles: [".menu-button{width:36px;height:36px;line-height:36px}"]
5179
5186
  })