@firestitch/list 9.11.1 → 9.12.1

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

@@ -4,7 +4,7 @@ import { ChangeFn, FilterConfig, IFilterSavedFiltersConfig } from '@firestitch/f
 import { FsScrollInstance, FsScrollService } from '@firestitch/scroll';
 import { SelectionDialog } from '@firestitch/selection';
 import { Model } from 'tsmodels';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { FsListAfterFetchFn, FsListConfig, FsListEmptyStateConfig, FsListFetchFn, FsListFetchSubscription, FsListNoResultsConfig, FsListRestoreConfig, FsListScrollableConfig, FsListTrackByFn } from '../interfaces';
 import { ColumnsController } from './columns-controller';
 import { ActionsController } from './index';
@@ -45,7 +45,6 @@ export declare class List extends Model {
     afterFetchFn: FsListAfterFetchFn;
     initialized$: BehaviorSubject<boolean>;
     loading$: BehaviorSubject<boolean>;
-    filtersQuery: any;
     hasRowActions: any;
     paging: PaginationController;
     columns: ColumnsController;
@@ -68,6 +67,7 @@ export declare class List extends Model {
     emptyStateTemplate: TemplateRef<any>;
     fsScrollInstance: FsScrollInstance;
     onDestroy$: Subject<unknown>;
+    private readonly _filtersQuery;
     private readonly _headerConfig;
     private readonly _groupCellConfig;
     private readonly _cellConfig;
@@ -75,6 +75,8 @@ export declare class List extends Model {
     private _fsScrollSubscription;
     constructor(el: ElementRef, config: FsListConfig, fsScroll: FsScrollService, selectionDialog: SelectionDialog, router: Router, route: ActivatedRoute, persistance: PersistanceController, inDialog: boolean);
     get hasSavedFilters(): boolean;
+    get filtersQuery(): Record<string, any>;
+    get filtersQuery$(): Observable<Record<string, any>>;
     fetchRemote(query: any): any;
     /**
      * Transform templates for using

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

@@ -27,6 +27,7 @@ export declare class ReorderController implements OnDestroy {
     private _enabled$;
     private _manualReorderActivated$;
     private _reorderDisabled$;
+    private _numberOfActiveFilters;
     private _destroy$;
     constructor();
     get enabled(): boolean;
@@ -53,4 +54,5 @@ export declare class ReorderController implements OnDestroy {
      * Disable reorder action and update filter actions state
      */
     disableReorderAction(): void;
+    setNunberOfActiveFilters(activeFilters: number): void;
 }

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

@@ -1,10 +1,13 @@
 import { EventEmitter } from '@angular/core';
 import { FsPrompt } from '@firestitch/prompt';
+import { FsFile } from '@firestitch/file';
 import { RowAction } from '../../../../models/row-action.model';
 export declare class FsRowInlineActionComponent {
     private _fsPrompt;
     action: RowAction;
     clicked: EventEmitter<any>;
+    fileSelect: EventEmitter<FsFile | FsFile[]>;
     constructor(_fsPrompt: FsPrompt);
     actionClick(event: any): void;
+    fileSelected(event: any): void;
 }

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

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

package/app/components/list/list.component.d.ts

@@ -103,6 +103,7 @@ export declare class FsListComponent implements OnInit, OnDestroy {
     private _subscribeToRemoveRow;
     private _subscribeToGroupExpandStatusChange;
     private _waitFirstLoad;
+    private _listenFiltersQueryChange;
     private _configMergeCustomizer;
     private _restorePersistance;
 }

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

@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
 import { FsSelectionActionSelected, FsSelectionDialogConfigAction, SelectionRef } from '@firestitch/selection';
 import { IFilterConfigItem, IFilterConfigDateItem, FsFilterPersistance, IFilterSavedFiltersConfig, FsFilterAction, ChangeFn } from '@firestitch/filter';
+import { FsFile } from '@firestitch/file';
 import { ActionType } from '../enums/button-type.enum';
 import { ReorderPosition, ReorderStrategy } from '../classes/reorder-controller';
 import { PaginationStrategy } from '../enums/pagination-strategy.enum';
@@ -150,6 +151,11 @@ export interface FsListRowAction {
     menu?: boolean;
     click?: (row: any, event: any, index: any) => void;
     link?: FsListRowActionLinkFn;
+    file?: {
+        select: FsListRowActionFileFn;
+        error?: (error: unknown) => void;
+        multiple?: boolean;
+    };
     show?: (row: any, index: number) => boolean;
     remove?: {
         title?: string;
@@ -157,6 +163,9 @@ export interface FsListRowAction {
     } | boolean;
     restore?: boolean;
 }
+export interface FsListRowActionFileFn {
+    (selection: FsFile | FsFile[], row: FsListAbstractRow, index: number): void;
+}
 export interface FsListRowActionLinkFn {
     (row: FsListAbstractRow): FsListRowActionLink;
 }

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

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

package/bundles/firestitch-list.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('@angular/flex-layout'), require('@firestitch/filter'), require('@firestitch/scroll'), require('@firestitch/menu'), require('@firestitch/prompt'), require('lodash-es'), require('rxjs'), require('rxjs/operators'), require('@firestitch/selection'), require('@firestitch/common'), require('@firestitch/drawer'), require('tsmodels'), require('@firestitch/store')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/list', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/checkbox', '@angular/material/core', '@angular/material/dialog', '@angular/material/icon', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/progress-spinner', '@angular/flex-layout', '@firestitch/filter', '@firestitch/scroll', '@firestitch/menu', '@firestitch/prompt', 'lodash-es', 'rxjs', 'rxjs/operators', '@firestitch/selection', '@firestitch/common', '@firestitch/drawer', 'tsmodels', '@firestitch/store'], factory) :
-    (global = global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.list = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.checkbox, global.ng.material.core, global.ng.material.dialog, global.ng.material.icon, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.progressSpinner, global.ng.flexLayout, global.filter, global.scroll, global.menu$1, global.prompt, global.lodashEs, global.rxjs, global.rxjs.operators, global.selection, global.common$1, global.drawer, global.tsmodels, global.store));
-}(this, (function (exports, core, common, router, button, checkbox, core$1, dialog, icon, menu, tooltip, progressSpinner, flexLayout, filter, scroll, menu$1, prompt, lodashEs, rxjs, operators, selection, common$1, drawer, tsmodels, store) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('@angular/flex-layout'), require('@firestitch/filter'), require('@firestitch/scroll'), require('@firestitch/menu'), require('@firestitch/prompt'), require('@firestitch/file'), require('lodash-es'), require('rxjs'), require('rxjs/operators'), require('@firestitch/selection'), require('@firestitch/common'), require('@firestitch/drawer'), require('tsmodels'), require('@firestitch/store')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/list', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/checkbox', '@angular/material/core', '@angular/material/dialog', '@angular/material/icon', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/progress-spinner', '@angular/flex-layout', '@firestitch/filter', '@firestitch/scroll', '@firestitch/menu', '@firestitch/prompt', '@firestitch/file', 'lodash-es', 'rxjs', 'rxjs/operators', '@firestitch/selection', '@firestitch/common', '@firestitch/drawer', 'tsmodels', '@firestitch/store'], factory) :
+    (global = global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.list = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.checkbox, global.ng.material.core, global.ng.material.dialog, global.ng.material.icon, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.progressSpinner, global.ng.flexLayout, global.filter, global.scroll, global.menu$1, global.prompt, global.file, global.lodashEs, global.rxjs, global.rxjs.operators, global.selection, global.common$1, global.drawer, global.tsmodels, global.store));
+}(this, (function (exports, core, common, router, button, checkbox, core$1, dialog, icon, menu, tooltip, progressSpinner, flexLayout, filter, scroll, menu$1, prompt, file, lodashEs, rxjs, operators, selection, common$1, drawer, tsmodels, store) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -550,6 +550,15 @@
                 return _this.clickEvent(row, event, index, rowActionsRef, clickFn);
             };
             this._linkFn = value.link;
+            if (value.file) {
+                if (value.file.select) {
+                    this.fileUploadFn = function (selection, row, index) {
+                        value.file.select(selection, row, index);
+                    };
+                }
+                this.fileUploadErrorFn = value.file.error;
+                this.fileMultiple = value.file.multiple;
+            }
             if (typeof value.label === 'function') {
                 this._labelFn = value.label;
                 this.label = '';
@@ -569,7 +578,8 @@
                 this.rowActions.forEach(function (action) {
                     action.checkShowStatus(row, index);
                 });
-                this.isShown = this.rowActions.some(function (action) { return action.isShown; });
+                var groupVisible = !this.show || this.show(row, index);
+                this.isShown = groupVisible && this.rowActions.some(function (action) { return action.isShown; });
             }
             else if (this.show) {
                 this.isShown = this.show(row, index);
@@ -3044,6 +3054,7 @@
             // Empty state
             _this.emptyStateEnabled = false;
             _this.onDestroy$ = new rxjs.Subject();
+            _this._filtersQuery = new rxjs.BehaviorSubject(null);
             _this._fromJSON(config);
             _this.initialize(config);
             _this._headerConfig = new StyleConfig(config.header);
@@ -3065,6 +3076,20 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(List.prototype, "filtersQuery", {
+            get: function () {
+                return this._filtersQuery.getValue();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(List.prototype, "filtersQuery$", {
+            get: function () {
+                return this._filtersQuery.asObservable();
+            },
+            enumerable: true,
+            configurable: true
+        });
         List.prototype.fetchRemote = function (query) {
             var options = {
                 state: this.dataController.operation,
@@ -3528,7 +3553,7 @@
             if (this.filterInitCb) {
                 this.filterInitCb(filters);
             }
-            this.filtersQuery = filters;
+            this._filtersQuery.next(filters);
             this.checkRestoreFilter();
         };
         /**
@@ -3540,7 +3565,7 @@
             if (this.filterChangeCb) {
                 this.filterChangeCb(filterQuery, filterSort);
             }
-            this.filtersQuery = filterQuery;
+            this._filtersQuery.next(filterQuery);
             this.restoreMode = false;
             // Restore option
             this.checkRestoreFilter();
@@ -3760,6 +3785,7 @@
             this._enabled$ = new rxjs.BehaviorSubject(false);
             this._manualReorderActivated$ = new rxjs.BehaviorSubject(false);
             this._reorderDisabled$ = new rxjs.BehaviorSubject(false);
+            this._numberOfActiveFilters = 0;
             this._destroy$ = new rxjs.Subject();
         }
         Object.defineProperty(ReorderController.prototype, "enabled", {
@@ -3793,7 +3819,9 @@
                 return this._enabled$
                     .pipe(operators.map(function (enabled) {
                     return enabled && _this.position === exports.ReorderPosition.Left;
-                }), operators.distinctUntilChanged(), operators.shareReplay(), operators.takeUntil(this._destroy$));
+                }), operators.map(function (enabled) {
+                    return enabled && _this._numberOfActiveFilters === 0;
+                }), operators.distinctUntilChanged(), operators.shareReplay());
             },
             enumerable: true,
             configurable: true
@@ -3804,7 +3832,9 @@
                 return this._enabled$
                     .pipe(operators.map(function (enabled) {
                     return enabled && _this.position === exports.ReorderPosition.Right;
-                }), operators.distinctUntilChanged(), operators.shareReplay(), operators.takeUntil(this._destroy$));
+                }), operators.map(function (enabled) {
+                    return enabled && _this._numberOfActiveFilters === 0;
+                }), operators.distinctUntilChanged(), operators.shareReplay());
             },
             enumerable: true,
             configurable: true
@@ -3927,6 +3957,10 @@
             this._reorderDisabled$.next(true);
             this._actionsController.updateDisabledState();
         };
+        ReorderController.prototype.setNunberOfActiveFilters = function (activeFilters) {
+            this._numberOfActiveFilters = activeFilters;
+            this.enabled = this.enabled;
+        };
         ReorderController = __decorate([
             core.Injectable(),
             __metadata("design:paramtypes", [])
@@ -4453,6 +4487,7 @@
             this._updateCustomizeAction(listConfig.actions);
             this.list = new List(this._el, listConfig, this.fsScroll, this.selectionDialog, this._router, this._route, this._persistance, this._inDialog);
             this._waitFirstLoad();
+            this._listenFiltersQueryChange();
             this.reorderController.initWithConfig(config.reorder, this.list.dataController, this.list.actions);
             if (this.listColumnDirectives) {
                 this.list.tranformTemplatesToColumns(this.listColumnDirectives);
@@ -4530,6 +4565,17 @@
                 _this.cdRef.markForCheck();
             });
         };
+        FsListComponent.prototype._listenFiltersQueryChange = function () {
+            var _this = this;
+            this.list.filtersQuery$
+                .pipe(operators.takeUntil(this.list.onDestroy$), operators.takeUntil(this._destroy))
+                .subscribe(function (value) {
+                if (value) {
+                    var activeFilters = Object.keys(value).length;
+                    _this.reorderController.setNunberOfActiveFilters(activeFilters);
+                }
+            });
+        };
         FsListComponent.prototype._configMergeCustomizer = function (objValue, srcValue) {
             if (Array.isArray(objValue)) {
                 return objValue;
@@ -5826,7 +5872,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    </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        <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n        {{action.label}}\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              <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]=\"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          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n          {{action.label}}\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.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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [prompt.FsPrompt])
@@ -5838,10 +5884,14 @@
         function FsRowInlineActionComponent(_fsPrompt) {
             this._fsPrompt = _fsPrompt;
             this.clicked = new core.EventEmitter();
+            this.fileSelect = new core.EventEmitter();
         }
         FsRowInlineActionComponent.prototype.actionClick = function (event) {
             this.clicked.emit(event);
         };
+        FsRowInlineActionComponent.prototype.fileSelected = function (event) {
+            this.fileSelect.emit(event);
+        };
         FsRowInlineActionComponent.ctorParameters = function () { return [
             { type: prompt.FsPrompt }
         ]; };
@@ -5853,10 +5903,14 @@
             core.Output(),
             __metadata("design:type", Object)
         ], FsRowInlineActionComponent.prototype, "clicked", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], FsRowInlineActionComponent.prototype, "fileSelect", void 0);
         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 let-value=\"value\">\n    <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n    {{action.label}}\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.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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [prompt.FsPrompt])
@@ -5864,6 +5918,45 @@
         return FsRowInlineActionComponent;
     }());
 
+    var FsRowMenuActionComponent = /** @class */ (function () {
+        function FsRowMenuActionComponent() {
+            this.fileSelect = new core.EventEmitter();
+            this.fileError = new core.EventEmitter();
+        }
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], FsRowMenuActionComponent.prototype, "icon", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], FsRowMenuActionComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], FsRowMenuActionComponent.prototype, "file", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], FsRowMenuActionComponent.prototype, "fileMultiple", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], FsRowMenuActionComponent.prototype, "fileSelect", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], FsRowMenuActionComponent.prototype, "fileError", void 0);
+        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",
+                changeDetection: core.ChangeDetectionStrategy.OnPush
+            })
+        ], FsRowMenuActionComponent);
+        return FsRowMenuActionComponent;
+    }());
+
     var FsListManageSavedFiltersComponent = /** @class */ (function () {
         function FsListManageSavedFiltersComponent(_externalParams) {
             this._externalParams = _externalParams;
@@ -6086,6 +6179,7 @@
                     prompt.FsPromptModule,
                     dialog.MatDialogModule,
                     tooltip.MatTooltipModule,
+                    file.FsFileModule,
                 ],
                 declarations: [
                     // Components
@@ -6093,6 +6187,7 @@
                     FsRowComponent,
                     FsRowActionsComponent,
                     FsRowInlineActionComponent,
+                    FsRowMenuActionComponent,
                     FsCellComponent,
                     FsFooterRowComponent,
                     FsFooterCellComponent,
@@ -6180,11 +6275,12 @@
     exports.ɵf = FsListDraggableListDirective;
     exports.ɵg = FsRowActionsComponent;
     exports.ɵh = FsRowInlineActionComponent;
-    exports.ɵi = FsListLoaderComponent;
-    exports.ɵj = FsListSavedFiltersComponent;
-    exports.ɵk = FsListManageSavedFiltersComponent;
-    exports.ɵl = FsListDraggableRowDirective;
-    exports.ɵm = CustomizeColsDialogComponent;
+    exports.ɵi = FsRowMenuActionComponent;
+    exports.ɵj = FsListLoaderComponent;
+    exports.ɵk = FsListSavedFiltersComponent;
+    exports.ɵl = FsListManageSavedFiltersComponent;
+    exports.ɵm = FsListDraggableRowDirective;
+    exports.ɵn = CustomizeColsDialogComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });