@firestitch/list 9.11.0 → 9.12.0

package/fesm5/firestitch-list.js

@@ -15,6 +15,7 @@ import { ItemType, FilterComponent, ExternalParamsController as ExternalParamsCo
 import { FsScrollService, FsScrollModule } from '@firestitch/scroll';
 import { FsMenuModule } from '@firestitch/menu';
 import { FsPrompt, FsPromptModule } from '@firestitch/prompt';
+import { FsFileModule } from '@firestitch/file';
 import { isString, isObject, isBoolean, isNumber, isFunction, get, cloneDeep, mergeWith, random, merge as merge$1 } from 'lodash-es';
 import { Subject, BehaviorSubject, Observable, merge, from, combineLatest, of } from 'rxjs';
 import { takeUntil, tap, take, map, debounceTime, switchMap, mapTo, catchError, distinctUntilChanged, shareReplay, skip, filter } from 'rxjs/operators';
@@ -356,6 +357,15 @@ var RowAction = /** @class */ (function (_super) {
             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 = '';
@@ -2850,6 +2860,7 @@ var List = /** @class */ (function (_super) {
         // Empty state
         _this.emptyStateEnabled = false;
         _this.onDestroy$ = new Subject();
+        _this._filtersQuery = new BehaviorSubject(null);
         _this._fromJSON(config);
         _this.initialize(config);
         _this._headerConfig = new StyleConfig(config.header);
@@ -2871,6 +2882,20 @@ var List = /** @class */ (function (_super) {
         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,
@@ -3161,7 +3186,7 @@ var List = /** @class */ (function (_super) {
         var _this = this;
         var fetch$ = this.fetch$.asObservable();
         // Should wait until saved filters not loaded
-        if (!!this.filters && !!this.savedFilters) {
+        if (!!this.filters) {
             fetch$ = combineLatest([fetch$, this.filtersReady$])
                 .pipe(map(function (_a) {
                 var _b = __read(_a, 1), params = _b[0];
@@ -3334,7 +3359,7 @@ var List = /** @class */ (function (_super) {
         if (this.filterInitCb) {
             this.filterInitCb(filters);
         }
-        this.filtersQuery = filters;
+        this._filtersQuery.next(filters);
         this.checkRestoreFilter();
     };
     /**
@@ -3346,7 +3371,7 @@ var List = /** @class */ (function (_super) {
         if (this.filterChangeCb) {
             this.filterChangeCb(filterQuery, filterSort);
         }
-        this.filtersQuery = filterQuery;
+        this._filtersQuery.next(filterQuery);
         this.restoreMode = false;
         // Restore option
         this.checkRestoreFilter();
@@ -3566,6 +3591,7 @@ var ReorderController = /** @class */ (function () {
         this._enabled$ = new BehaviorSubject(false);
         this._manualReorderActivated$ = new BehaviorSubject(false);
         this._reorderDisabled$ = new BehaviorSubject(false);
+        this._numberOfActiveFilters = 0;
         this._destroy$ = new Subject();
     }
     Object.defineProperty(ReorderController.prototype, "enabled", {
@@ -3599,7 +3625,9 @@ var ReorderController = /** @class */ (function () {
             return this._enabled$
                 .pipe(map(function (enabled) {
                 return enabled && _this.position === ReorderPosition.Left;
-            }), distinctUntilChanged(), shareReplay(), takeUntil(this._destroy$));
+            }), map(function (enabled) {
+                return enabled && _this._numberOfActiveFilters === 0;
+            }), distinctUntilChanged(), shareReplay());
         },
         enumerable: true,
         configurable: true
@@ -3610,7 +3638,9 @@ var ReorderController = /** @class */ (function () {
             return this._enabled$
                 .pipe(map(function (enabled) {
                 return enabled && _this.position === ReorderPosition.Right;
-            }), distinctUntilChanged(), shareReplay(), takeUntil(this._destroy$));
+            }), map(function (enabled) {
+                return enabled && _this._numberOfActiveFilters === 0;
+            }), distinctUntilChanged(), shareReplay());
         },
         enumerable: true,
         configurable: true
@@ -3733,6 +3763,10 @@ var ReorderController = /** @class */ (function () {
         this._reorderDisabled$.next(true);
         this._actionsController.updateDisabledState();
     };
+    ReorderController.prototype.setNunberOfActiveFilters = function (activeFilters) {
+        this._numberOfActiveFilters = activeFilters;
+        this.enabled = this.enabled;
+    };
     ReorderController = __decorate([
         Injectable(),
         __metadata("design:paramtypes", [])
@@ -4259,6 +4293,7 @@ var FsListComponent = /** @class */ (function () {
         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);
@@ -4336,6 +4371,17 @@ var FsListComponent = /** @class */ (function () {
             _this.cdRef.markForCheck();
         });
     };
+    FsListComponent.prototype._listenFiltersQueryChange = function () {
+        var _this = this;
+        this.list.filtersQuery$
+            .pipe(takeUntil(this.list.onDestroy$), 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;
@@ -5632,7 +5678,7 @@ var FsRowActionsComponent = /** @class */ (function () {
     FsRowActionsComponent = __decorate([
         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: ChangeDetectionStrategy.OnPush
         }),
         __metadata("design:paramtypes", [FsPrompt])
@@ -5644,10 +5690,14 @@ var FsRowInlineActionComponent = /** @class */ (function () {
     function FsRowInlineActionComponent(_fsPrompt) {
         this._fsPrompt = _fsPrompt;
         this.clicked = new EventEmitter();
+        this.fileSelect = new EventEmitter();
     }
     FsRowInlineActionComponent.prototype.actionClick = function (event) {
         this.clicked.emit(event);
     };
+    FsRowInlineActionComponent.prototype.fileSelected = function (event) {
+        this.fileSelect.emit(event);
+    };
     FsRowInlineActionComponent.ctorParameters = function () { return [
         { type: FsPrompt }
     ]; };
@@ -5659,10 +5709,14 @@ var FsRowInlineActionComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", Object)
     ], FsRowInlineActionComponent.prototype, "clicked", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], FsRowInlineActionComponent.prototype, "fileSelect", void 0);
     FsRowInlineActionComponent = __decorate([
         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: ChangeDetectionStrategy.OnPush
         }),
         __metadata("design:paramtypes", [FsPrompt])
@@ -5670,6 +5724,45 @@ var FsRowInlineActionComponent = /** @class */ (function () {
     return FsRowInlineActionComponent;
 }());
 
+var FsRowMenuActionComponent = /** @class */ (function () {
+    function FsRowMenuActionComponent() {
+        this.fileSelect = new EventEmitter();
+        this.fileError = new EventEmitter();
+    }
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], FsRowMenuActionComponent.prototype, "icon", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], FsRowMenuActionComponent.prototype, "label", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], FsRowMenuActionComponent.prototype, "file", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], FsRowMenuActionComponent.prototype, "fileMultiple", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], FsRowMenuActionComponent.prototype, "fileSelect", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], FsRowMenuActionComponent.prototype, "fileError", void 0);
+    FsRowMenuActionComponent = __decorate([
+        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: ChangeDetectionStrategy.OnPush
+        })
+    ], FsRowMenuActionComponent);
+    return FsRowMenuActionComponent;
+}());
+
 var FsListManageSavedFiltersComponent = /** @class */ (function () {
     function FsListManageSavedFiltersComponent(_externalParams) {
         this._externalParams = _externalParams;
@@ -5892,6 +5985,7 @@ var FsListModule = /** @class */ (function () {
                 FsPromptModule,
                 MatDialogModule,
                 MatTooltipModule,
+                FsFileModule,
             ],
             declarations: [
                 // Components
@@ -5899,6 +5993,7 @@ var FsListModule = /** @class */ (function () {
                 FsRowComponent,
                 FsRowActionsComponent,
                 FsRowInlineActionComponent,
+                FsRowMenuActionComponent,
                 FsCellComponent,
                 FsFooterRowComponent,
                 FsFooterCellComponent,
@@ -5959,5 +6054,5 @@ function FsListConfigFactory(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListEmptyStateDirective, FsListFooterDirective, FsListHeaderDirective, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig, FsListConfigFactory as ɵa, GroupExpandNotifierService as ɵb, PersistanceController as ɵc, FsListGroupCellDirective as ɵd, FsListGroupExpandTriggerDirective as ɵe, FsListDraggableListDirective as ɵf, FsRowActionsComponent as ɵg, FsRowInlineActionComponent as ɵh, FsListLoaderComponent as ɵi, FsListSavedFiltersComponent as ɵj, FsListManageSavedFiltersComponent as ɵk, FsListDraggableRowDirective as ɵl, CustomizeColsDialogComponent as ɵm };
+export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListEmptyStateDirective, FsListFooterDirective, FsListHeaderDirective, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig, FsListConfigFactory as ɵa, GroupExpandNotifierService as ɵb, PersistanceController as ɵc, FsListGroupCellDirective as ɵd, FsListGroupExpandTriggerDirective as ɵe, FsListDraggableListDirective as ɵf, FsRowActionsComponent as ɵg, FsRowInlineActionComponent as ɵh, FsRowMenuActionComponent as ɵi, FsListLoaderComponent as ɵj, FsListSavedFiltersComponent as ɵk, FsListManageSavedFiltersComponent as ɵl, FsListDraggableRowDirective as ɵm, CustomizeColsDialogComponent as ɵn };
 //# sourceMappingURL=firestitch-list.js.map