@firestitch/list 9.12.1 → 9.12.4

package/app/classes/pagination-controller.d.ts

@@ -1,8 +1,7 @@
 import { Observable } from 'rxjs';
-import { Model } from 'tsmodels';
 import { FsListLoadMoreConfig, FsPaging, PageChange, QueryOffsetStrategy, QueryPageStrategy } from '../interfaces';
 import { PaginationStrategy } from '../enums/pagination-strategy.enum';
-export declare class PaginationController extends Model {
+export declare class PaginationController {
     limit: number;
     records: number;
     manual: boolean;
@@ -45,6 +44,7 @@ export declare class PaginationController extends Model {
      * Get query for request
      */
     get query(): QueryPageStrategy | QueryOffsetStrategy;
+    get loadMoreQuery(): QueryPageStrategy | QueryOffsetStrategy;
     /**
      * Query for Page Strategy
      */
@@ -93,7 +93,6 @@ export declare class PaginationController extends Model {
      * Showing 0 results sorted by Name, Ascending
      */
     get statusLabel(): string;
-    _fromJSON(value: any): void;
     initWithConfig(config: FsPaging | false, loadMore: FsListLoadMoreConfig | boolean, infinityScrollEnabled?: boolean): void;
     /**
      * If pagination has prev page when Page Strategy
@@ -114,10 +113,10 @@ export declare class PaginationController extends Model {
     /**
      * Update paging config and all related fields
      * @param config
-     * @param displayed
-     * @param loadMore
+     * @param displayedRecords
+     * @param loadMoreOperation
      */
-    updatePaging(config: any, displayed?: number, loadMore?: boolean): void;
+    updatePaging(config: any, displayedRecords?: number, loadMoreOperation?: boolean): void;
     /**
      * Update pages array with new pages count
      */
@@ -174,6 +173,11 @@ export declare class PaginationController extends Model {
      * Destroy
      */
     destroy(): void;
+    /**
+     * Update paging state
+     * @param params
+     */
+    private _fromParams;
     /**
      * Calc and update offset
      */

package/app/components/body/row/menu-action/menu-action.component.d.ts

@@ -1,9 +1,9 @@
 import { EventEmitter } from '@angular/core';
+import { FsListRowActionFile } from '../../../../interfaces/listconfig.interface';
 export declare class FsRowMenuActionComponent {
     icon: string;
     label: string;
-    file: boolean;
-    fileMultiple: boolean;
+    file: FsListRowActionFile;
     fileSelect: EventEmitter<any>;
     fileError: EventEmitter<any>;
 }

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

@@ -151,11 +151,7 @@ export interface FsListRowAction {
     menu?: boolean;
     click?: (row: any, event: any, index: any) => void;
     link?: FsListRowActionLinkFn;
-    file?: {
-        select: FsListRowActionFileFn;
-        error?: (error: unknown) => void;
-        multiple?: boolean;
-    };
+    file?: FsListRowActionFile;
     show?: (row: any, index: number) => boolean;
     remove?: {
         title?: string;
@@ -172,6 +168,17 @@ export interface FsListRowActionLinkFn {
 export interface FsListRowActionLabelFn {
     (row: FsListAbstractRow): string;
 }
+export interface FsListRowActionFile {
+    select: FsListRowActionFileFn;
+    error?: (error: unknown) => void;
+    multiple?: boolean;
+    accept?: string;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    imageQuality?: number;
+}
 export interface FsListRowActionLink {
     link: any[] | string;
     queryParams?: Record<string, any>;

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

@@ -1,6 +1,6 @@
 import { Model } from 'tsmodels';
 import { ActionType } from '../enums/button-type.enum';
-import { FsListRowActionFileFn, FsListRowActionLink } from '../interfaces';
+import { FsListRowActionFile, FsListRowActionLink } from '../interfaces';
 export declare class RowAction extends Model {
     icon: string;
     menu: boolean;
@@ -18,9 +18,7 @@ export declare class RowAction extends Model {
     classArray: string[];
     isShown: boolean;
     click: Function;
-    fileUploadFn: FsListRowActionFileFn;
-    fileUploadErrorFn: (error: unknown) => void;
-    fileMultiple: boolean;
+    fileConfig: FsListRowActionFile;
     private _linkFn;
     private _labelFn;
     private readonly _isGroup;

package/bundles/firestitch-list.umd.js

@@ -551,13 +551,13 @@
             };
             this._linkFn = value.link;
             if (value.file) {
-                if (value.file.select) {
-                    this.fileUploadFn = function (selection, row, index) {
-                        value.file.select(selection, row, index);
+                this.fileConfig = __assign({}, value.file);
+                if (this.fileConfig.select) {
+                    var selectFn_1 = this.fileConfig.select;
+                    this.fileConfig.select = function (selection, row, index) {
+                        selectFn_1(selection, row, index);
                     };
                 }
-                this.fileUploadErrorFn = value.file.error;
-                this.fileMultiple = value.file.multiple;
             }
             if (typeof value.label === 'function') {
                 this._labelFn = value.label;
@@ -1616,27 +1616,24 @@
         PaginationStrategy["None"] = "none";
     })(exports.PaginationStrategy || (exports.PaginationStrategy = {}));
 
-    var PaginationController = /** @class */ (function (_super) {
-        __extends(PaginationController, _super);
+    var PaginationController = /** @class */ (function () {
         function PaginationController() {
-            var _this = _super.call(this) || this;
-            _this.limit = 25;
-            _this.manual = false;
-            _this.page = 1; // Active page
-            _this.offset = 0;
+            this.limit = 25;
+            this.manual = false;
+            this.page = 1; // Active page
+            this.offset = 0;
             // public pagesArray = [];
-            _this.displayed = 0;
-            _this._pages$ = new rxjs.BehaviorSubject(0); // Total pages
-            _this._strategy = exports.PaginationStrategy.None;
-            _this._removedRows = 0;
-            _this._pageChanged$ = new rxjs.Subject();
-            _this._pageReset$ = new rxjs.Subject();
-            _this._onDestroy$ = new rxjs.Subject();
-            _this._loadMoreEnabled = false;
-            _this._infinityScrollEnabled = false;
-            _this._loadMoreText = 'Load More';
-            _this._limits = [10, 25, 50, 100, 200];
-            return _this;
+            this.displayed = 0;
+            this._pages$ = new rxjs.BehaviorSubject(0); // Total pages
+            this._strategy = exports.PaginationStrategy.None;
+            this._removedRows = 0;
+            this._pageChanged$ = new rxjs.Subject();
+            this._pageReset$ = new rxjs.Subject();
+            this._onDestroy$ = new rxjs.Subject();
+            this._loadMoreEnabled = false;
+            this._infinityScrollEnabled = false;
+            this._loadMoreText = 'Load More';
+            this._limits = [10, 25, 50, 100, 200];
         }
         Object.defineProperty(PaginationController.prototype, "pages", {
             get: function () {
@@ -1651,7 +1648,8 @@
         });
         Object.defineProperty(PaginationController.prototype, "pages$", {
             get: function () {
-                return this._pages$.asObservable();
+                return this._pages$
+                    .pipe(operators.distinctUntilChanged());
             },
             enumerable: true,
             configurable: true
@@ -1722,6 +1720,22 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(PaginationController.prototype, "loadMoreQuery", {
+            get: function () {
+                switch (this.strategy) {
+                    case exports.PaginationStrategy.Page:
+                        return this.query;
+                    case exports.PaginationStrategy.Offset:
+                        var query = this.queryOffsetStrategy;
+                        query.limit = query.offset + query.limit;
+                        query.offset = 0;
+                        return query;
+                }
+                return {};
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(PaginationController.prototype, "queryPageStrategy", {
             /**
              * Query for Page Strategy
@@ -1884,12 +1898,6 @@
             enumerable: true,
             configurable: true
         });
-        PaginationController.prototype._fromJSON = function (value) {
-            _super.prototype._fromJSON.call(this, value);
-            if (!value.limit) {
-                this.limit = 25;
-            }
-        };
         PaginationController.prototype.initWithConfig = function (config, loadMore, infinityScrollEnabled) {
             if (infinityScrollEnabled === void 0) { infinityScrollEnabled = false; }
             if (config) {
@@ -1899,12 +1907,12 @@
                 if (config.limit) {
                     this.limit = config.limit;
                 }
-                if (loadMore) {
-                    this.setLoadMore(loadMore);
-                }
-                this._infinityScrollEnabled = infinityScrollEnabled;
                 this.strategy = config.strategy;
             }
+            if (loadMore) {
+                this.setLoadMore(loadMore);
+            }
+            this._infinityScrollEnabled = infinityScrollEnabled;
         };
         Object.defineProperty(PaginationController.prototype, "_hasPrevPagePageStrategy", {
             /**
@@ -1949,15 +1957,15 @@
         /**
          * Update paging config and all related fields
          * @param config
-         * @param displayed
-         * @param loadMore
+         * @param displayedRecords
+         * @param loadMoreOperation
          */
-        PaginationController.prototype.updatePaging = function (config, displayed, loadMore) {
-            if (displayed === void 0) { displayed = 0; }
-            if (loadMore === void 0) { loadMore = false; }
-            if (!loadMore) {
-                this._fromJSON(config);
-                this.displayed = displayed;
+        PaginationController.prototype.updatePaging = function (config, displayedRecords, loadMoreOperation) {
+            if (displayedRecords === void 0) { displayedRecords = 0; }
+            if (loadMoreOperation === void 0) { loadMoreOperation = false; }
+            if (!loadMoreOperation) {
+                this._fromParams(config);
+                this.displayed = displayedRecords;
             }
             else {
                 this.records = config.records;
@@ -2144,6 +2152,19 @@
             this._onDestroy$.next();
             this._onDestroy$.complete();
         };
+        /**
+         * Update paging state
+         * @param params
+         */
+        PaginationController.prototype._fromParams = function (params) {
+            var _a;
+            if (!this.loadMoreEnabled) {
+                this.limit = (_a = params.limit, (_a !== null && _a !== void 0 ? _a : 25));
+            }
+            this.records = params.records;
+            this.manual = params.manual;
+            this.pages = params.pages || 0;
+        };
         /**
          * Calc and update offset
          */
@@ -2156,25 +2177,8 @@
         PaginationController.prototype.updateTotalPages = function () {
             this.pages = Math.ceil(this.records / this.limit);
         };
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", Object)
-        ], PaginationController.prototype, "limit", void 0);
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", Number)
-        ], PaginationController.prototype, "records", void 0);
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", Object)
-        ], PaginationController.prototype, "manual", void 0);
-        __decorate([
-            tsmodels.Alias('pages'),
-            __metadata("design:type", Number),
-            __metadata("design:paramtypes", [Number])
-        ], PaginationController.prototype, "pages", null);
         return PaginationController;
-    }(tsmodels.Model));
+    }());
 
 
     (function (SelectionChangeType) {
@@ -3394,9 +3398,18 @@
                 var _a;
                 (_a = _this.selection) === null || _a === void 0 ? void 0 : _a.closeSelectionDialog();
             }), operators.map(function (params) {
-                var query = _this.paging.hasOffsetStrategy && params && params.loadOffset
-                    ? Object.assign({}, _this.filtersQuery, _this.paging.loadDeletedOffsetQuery)
-                    : Object.assign({}, _this.filtersQuery, _this.paging.query);
+                var query = Object.assign({}, _this.filtersQuery);
+                if (_this.paging.hasOffsetStrategy && params && params.loadOffset) {
+                    query = Object.assign(query, _this.paging.loadDeletedOffsetQuery);
+                }
+                else {
+                    if (_this.initialFetch && _this.paging.loadMoreEnabled) {
+                        query = Object.assign(query, _this.paging.loadMoreQuery);
+                    }
+                    else {
+                        query = Object.assign(query, _this.paging.query);
+                    }
+                }
                 if (_this.sorting.sortingColumn) {
                     Object.assign(query, {
                         order: _this.sorting.sortingColumn.name + "," + _this.sorting.sortingColumn.direction
@@ -3423,6 +3436,7 @@
                 return source$;
             }), operators.takeUntil(this.onDestroy$))
                 .subscribe(function (response) {
+                _this.initialFetch = false;
                 _this.completeFetch(response);
             });
         };
@@ -3638,7 +3652,7 @@
                 this.selection.selectedRowsIntersection(this.dataController.visibleRowsData);
             }
             if (((_c = this.emptyState) === null || _c === void 0 ? void 0 : _c.validate) && this.emptyStateTemplate) {
-                this.emptyStateEnabled = this.emptyState.validate(query, lodashEs.cloneDeep(response.data));
+                this.emptyStateEnabled = this.emptyState.validate(query, lodashEs.cloneDeep(this.dataController.visibleRowsData));
             }
             if (this.afterFetchFn) {
                 this.afterFetchFn(query, this.dataController.visibleRowsData);
@@ -5872,7 +5886,7 @@
         FsRowActionsComponent = __decorate([
             core.Component({
                 selector: 'fs-list-row-actions',
-                template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action class=\"row-inline-action row-inline-action-{{action.type}}\"\n                               [action]=\"action\"\n                               [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n                               (clicked)=\"actionClick(action, row, $event)\"\n                               (fileSelect)=\"action.fileUploadFn($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu class=\"row-menu-action\"\n         *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n         (click)=\"clickOnTrigger($event)\"\n         #menuRef\n>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template class=\"hidden-mobile-menu-action\"\n                   fs-menu-item\n                   [link]=\"action.routerLink?.link\"\n                   [queryParams]=\"action.routerLink?.queryParams\"\n                   [target]=\"action.routerLink?.target\"\n                   [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [file]=\"!!action.fileUploadFn\"\n          [fileMultiple]=\"action.fileMultiple\"\n          (fileSelect)=\"action.fileUploadFn($event, row, index)\"\n          (fileError)=\"action.fileUploadErrorFn && action.fileUploadErrorFn($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template fs-menu-item\n                         [link]=\"subAction.routerLink?.link\"\n                         [queryParams]=\"subAction.routerLink?.queryParams\"\n                         [target]=\"subAction.routerLink?.target\"\n                         [hidden]=\"!subAction.isShown\"\n                         (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [file]=\"!!subAction.fileUploadFn\"\n                [fileMultiple]=\"subAction.fileMultiple\"\n                (fileSelect)=\"subAction.fileUploadFn($event, row, index)\"\n                (fileError)=\"subAction.fileUploadErrorFn && subAction.fileUploadErrorFn($event)\">\n              </fs-list-row-menu-action>\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]=\"action.routerLink?.link\"\n                     [queryParams]=\"action.routerLink?.queryParams\"\n                     [target]=\"action.routerLink?.target\"\n                     [hidden]=\"!action.isShown\"\n                     (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [file]=\"!!action.fileUploadFn\"\n            [fileMultiple]=\"action.fileMultiple\"\n            (fileSelect)=\"action.fileUploadFn($event, row, index)\"\n            (fileError)=\"action.fileUploadErrorFn && action.fileUploadErrorFn($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n",
+                template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action class=\"row-inline-action row-inline-action-{{action.type}}\"\n                               [action]=\"action\"\n                               [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n                               (clicked)=\"actionClick(action, row, $event)\"\n                               (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu class=\"row-menu-action\"\n         *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n         (click)=\"clickOnTrigger($event)\"\n         #menuRef\n>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template class=\"hidden-mobile-menu-action\"\n                   fs-menu-item\n                   [link]=\"action.routerLink?.link\"\n                   [queryParams]=\"action.routerLink?.queryParams\"\n                   [target]=\"action.routerLink?.target\"\n                   [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template fs-menu-item\n                         [link]=\"subAction.routerLink?.link\"\n                         [queryParams]=\"subAction.routerLink?.queryParams\"\n                         [target]=\"subAction.routerLink?.target\"\n                         [hidden]=\"!subAction.isShown\"\n                         (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\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]=\"action.routerLink?.link\"\n                     [queryParams]=\"action.routerLink?.queryParams\"\n                     [target]=\"action.routerLink?.target\"\n                     [hidden]=\"!action.isShown\"\n                     (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [prompt.FsPrompt])
@@ -5910,7 +5924,7 @@
         FsRowInlineActionComponent = __decorate([
             core.Component({
                 selector: 'fs-list-row-inline-action',
-                template: "<ng-container *ngIf=\"action.isShown\" [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-raised-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-raised-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-icon-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-icon-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-fab\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-fab\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-mini-fab\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-mini-fab\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.fileUploadFn else uploadFileBtn\">\n      <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #uploadFileBtn>\n      <fs-file\n        class=\"action-button\"\n        [multiple]=\"action.fileMultiple\"\n        (select)=\"fileSelected($event)\"\n        (error)=\"action.fileUploadErrorFn && action.fileUploadErrorFn($event)\">\n        <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n        {{action.label}}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>\n",
+                template: "<ng-container *ngIf=\"action.isShown\" [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-raised-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-raised-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-icon-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-icon-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-fab\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-fab\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-mini-fab\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-mini-fab\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #uploadFileBtn>\n      <fs-file\n        class=\"action-button\"\n        [accept]=\"action.fileConfig.accept || '*'\"\n        [multiple]=\"action.fileConfig.multiple\"\n        [minWidth]=\"action.fileConfig.minWidth\"\n        [minHeight]=\"action.fileConfig.minHeight\"\n        [imageWidth]=\"action.fileConfig.maxWidth\"\n        [imageHeight]=\"action.fileConfig.maxHeight\"\n        (select)=\"fileSelected($event)\"\n        (error)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n        {{action.label}}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [prompt.FsPrompt])
@@ -5933,12 +5947,8 @@
         ], FsRowMenuActionComponent.prototype, "label", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", Boolean)
+            __metadata("design:type", Object)
         ], FsRowMenuActionComponent.prototype, "file", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Boolean)
-        ], FsRowMenuActionComponent.prototype, "fileMultiple", void 0);
         __decorate([
             core.Output(),
             __metadata("design:type", Object)
@@ -5950,7 +5960,7 @@
         FsRowMenuActionComponent = __decorate([
             core.Component({
                 selector: 'fs-list-row-menu-action',
-                template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n  {{label}}\n</ng-container>\n\n<ng-template #withFile>\n  <fs-file\n    class=\"action-button\"\n    [multiple]=\"fileMultiple\"\n    (select)=\"fileSelect.emit($event)\"\n    (error)=\"fileError.emit($event)\">\n    <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n    {{label}}\n  </fs-file>\n</ng-template>\n",
+                template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n  {{label}}\n</ng-container>\n\n<ng-template #withFile>\n  <fs-file\n    class=\"action-button\"\n    [accept]=\"file.accept || '*'\"\n    [multiple]=\"file.multiple\"\n    [minWidth]=\"file.minWidth\"\n    [minHeight]=\"file.minHeight\"\n    [imageWidth]=\"file.maxWidth\"\n    [imageHeight]=\"file.maxHeight\"\n    (select)=\"fileSelect.emit($event)\"\n    (error)=\"fileError.emit($event)\">\n    <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n    {{label}}\n  </fs-file>\n</ng-template>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             })
         ], FsRowMenuActionComponent);