@firestitch/list 12.12.3 → 12.12.4

package/fesm2015/firestitch-list.js

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, TemplateRef, ContentChild, ContentChildren, InjectionToken, Component, ChangeDetectionStrategy, Inject, HostBinding, ViewContainerRef, ViewChild, EventEmitter, Output, ViewChildren, Optional, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, TemplateRef, ContentChild, ContentChildren, InjectionToken, Component, ChangeDetectionStrategy, Inject, HostBinding, ViewContainerRef, ViewChild, EventEmitter, Output, Pipe, ViewChildren, Optional, NgModule } from '@angular/core';
 import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i6$1 from '@angular/router';
+import * as i7 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$2 from '@angular/material/core';
+import * as i3$2 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
-import * as i4 from '@angular/material/dialog';
+import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -18,28 +18,25 @@ import { MatMenuModule } from '@angular/material/menu';
 import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i2$2 from '@firestitch/filter';
 import { ItemType, FilterComponent, FsFilterModule } from '@firestitch/filter';
 import * as i2$4 from '@firestitch/scroll';
 import { FsScrollModule } from '@firestitch/scroll';
 import * as i2$3 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
-import * as i1$1 from '@firestitch/prompt';
+import * as i1$2 from '@firestitch/prompt';
 import { FsPromptModule } from '@firestitch/prompt';
-import * as i4$1 from '@firestitch/file';
+import * as i4 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
-import * as i5$1 from '@firestitch/common';
+import * as i4$1 from '@firestitch/common';
 import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
 import { isString, isObject, isBoolean, isNumber, isFunction, get, cloneDeep, random, mergeWith, merge as merge$1 } from 'lodash-es';
 import { BehaviorSubject, Subject, merge, Observable, from, combineLatest, of } from 'rxjs';
 import { takeUntil, tap, skip, distinctUntilChanged, take, map, debounceTime, switchMap, mapTo, catchError, shareReplay, filter } from 'rxjs/operators';
-import * as i3$3 from '@firestitch/selection';
-import * as i9 from '@firestitch/drawer';
-import * as i1 from '@firestitch/store';
+import * as i5 from '@firestitch/selection';
+import * as i4$2 from '@firestitch/drawer';
+import * as i1$1 from '@firestitch/store';
 import { FsPersistanceStore } from '@firestitch/store';
-import * as i5 from '@angular/flex-layout/extended';
-import * as i3$2 from '@angular/flex-layout/flex';
 
 class StyleConfig {
     constructor(config = {}) {
@@ -310,7 +307,12 @@ class RowAction {
         this.menu = (_a = value.menu) !== null && _a !== void 0 ? _a : true;
         this.remove = value.remove;
         this.className = value.className;
-        this.type = (_b = value.type) !== null && _b !== void 0 ? _b : ActionType.Basic;
+        if (this.menu && this.icon && !this.label && !value.type) {
+            this.type = ActionType.Icon;
+        }
+        else {
+            this.type = (_b = value.type) !== null && _b !== void 0 ? _b : ActionType.Basic;
+        }
         this.show = value.show;
         this.restore = value.restore;
         this.rowActions = (_c = value.rowActions) === null || _c === void 0 ? void 0 : _c.map((action) => new RowAction(action));
@@ -329,13 +331,7 @@ class RowAction {
                 };
             }
         }
-        if (typeof value.label === 'function') {
-            this._labelFn = value.label;
-            this.label = '';
-        }
-        else {
-            this.label = value.label;
-        }
+        this.label = value.label;
         if (this.className) {
             this.classArray = this.className.split(' ').reduce((acc, elem) => {
                 acc.push(elem);
@@ -371,19 +367,6 @@ class RowAction {
             }
         }
     }
-    updateLabel(row) {
-        if (!this.isShown) {
-            return;
-        }
-        if (this.isGroup) {
-            this.rowActions.forEach((action) => {
-                action.updateLabel(row);
-            });
-        }
-        else if (this._labelFn) {
-            this.label = this._labelFn(row);
-        }
-    }
     clickEvent(row, event, index, rowActionsRef, clickFn) {
         // Stop event propagation for parent
         event.stopPropagation();
@@ -710,6 +693,10 @@ class GroupRow extends BaseRow {
             this._expanded.next(initialExpand);
         }
     }
+    get childrenData() {
+        return this.children
+            .map((child) => child.data);
+    }
     get isGroup() {
         return true;
     }
@@ -786,7 +773,7 @@ class GroupFooterRow extends BaseRow {
     get parent() {
         return this._parent;
     }
-    get isFooter() {
+    get isGroupFooter() {
         return true;
     }
     destroy() { }
@@ -839,7 +826,7 @@ class Row {
     get isChild() {
         return this._row instanceof ChildRow;
     }
-    get isFooter() {
+    get isGroupFooter() {
         return this._row instanceof GroupFooterRow;
     }
     get parent() {
@@ -1053,7 +1040,7 @@ class DataController {
         }
         return !!removedRows.length;
     }
-    swapRows(row1, row2) {
+    swapRows(row1, row2, selectedRows, isMultipleDrag = false) {
         let tmpEl;
         const rowsStack = this._rowsStack;
         const row1GlobalIndex = rowsStack.indexOf(row1);
@@ -1061,6 +1048,24 @@ class DataController {
         tmpEl = rowsStack[row1GlobalIndex];
         rowsStack[row1GlobalIndex] = rowsStack[row2GlobalIndex];
         rowsStack[row2GlobalIndex] = tmpEl;
+        if (isMultipleDrag && Array.isArray(selectedRows)) {
+            if (!selectedRows.includes(row1)) {
+                selectedRows = [row1, ...selectedRows];
+            }
+            selectedRows
+                .filter((selectedRow) => {
+                return selectedRow !== row1;
+            })
+                .forEach((selectedRow) => {
+                const idx = rowsStack.indexOf(selectedRow);
+                rowsStack.splice(idx, 1);
+            });
+            const indexToInsertAfter = rowsStack.indexOf(tmpEl);
+            rowsStack.splice(indexToInsertAfter, 1);
+            selectedRows.forEach((selectedRow, offset) => {
+                rowsStack.splice(indexToInsertAfter + offset, 0, selectedRow);
+            });
+        }
         this._rowsStack = [...rowsStack];
     }
     destroy() {
@@ -1073,7 +1078,9 @@ class DataController {
         const row = this.visibleRows.find((visibleRow) => visibleRow.data === rowData);
         row.toggleRowExpandStatus();
         this._updateVisibleRows();
-        console.log(this._rowsStack);
+    }
+    finishReorder() {
+        this._updateVisibleRows();
     }
     _updateRowsStack(rows) {
         this._destroyRowsStack();
@@ -1105,7 +1112,7 @@ class DataController {
     _updateVisibleRows() {
         this.visibleRows = this._rowsStack
             .filter((row) => {
-            return (!row.isChild && !row.isFooter) || row.visible;
+            return (!row.isChild && !row.isGroupFooter) || row.visible;
         });
     }
     updateRow(targetRow, trackBy) {
@@ -1149,20 +1156,15 @@ class DataController {
         if (!this._groupByFn || !this._compareByFn) {
             return rows;
         }
-        let numberOfGroups = 0;
+        let groupRows = [];
         const footerRows = new Map();
         rows.forEach((row) => {
             const mainGroup = this._groupByFn(row);
-            const isFooterRow = this._footerRowFn(row);
             const mainGroupKey = this._compareByFn(mainGroup);
-            if (isFooterRow) {
-                footerRows.set(mainGroupKey, row);
-                return;
-            }
             if (!this._store.has(mainGroupKey)) {
                 const group = new GroupRow(mainGroup, this._initialExpand);
-                group.index = numberOfGroups;
-                numberOfGroups++;
+                group.index = groupRows.length;
+                groupRows.push(group);
                 const childRow = new ChildRow(row, group);
                 this._store.set(mainGroupKey, group);
                 group.children.push(childRow);
@@ -1173,13 +1175,16 @@ class DataController {
                 group.children.push(childRow);
             }
         });
-        for (const [key, value] of footerRows) {
-            const group = this._store.get(key);
-            if (group) {
-                const footerRow = new GroupFooterRow(value, group);
-                group.children.push(footerRow);
+        groupRows.forEach((groupRow) => {
+            const footerIndex = groupRow.children
+                .findIndex((row) => {
+                return this._footerRowFn(row.data, Object.assign(Object.assign({}, groupRow.data), { children: groupRow.childrenData }));
+            });
+            if (footerIndex !== -1) {
+                const footerRow = groupRow.children.slice(footerIndex, footerIndex + 1)[0];
+                groupRow.children.push(new GroupFooterRow(footerRow.data, groupRow));
             }
-        }
+        });
         return Array.from(this._store.values())
             .reduce((acc, item) => {
             if (item.isGroup) {
@@ -1684,12 +1689,20 @@ class SelectionController {
         this._visibleRecordsCount = 0;
         this._totalRecordsCount = 0;
         this._destroy$ = new Subject();
+        this._disabled$ = new BehaviorSubject(false);
         this.actions = config.actions ? [...config.actions] : [];
         this.actionSelectedFn = config.actionSelected;
         this.allSelectedFn = config.allSelected;
         this.cancelledFn = config.cancelled;
         this.selectionChangedFn = config.selectionChanged;
         this.selectAll = config.selectAll;
+        this._disabled$.next(!!config.disabled);
+    }
+    get disabled() {
+        return this._disabled$.getValue();
+    }
+    get disabled$() {
+        return this._disabled$.asObservable();
     }
     get selectedAll() {
         return this._selectedAll;
@@ -1826,6 +1839,12 @@ class SelectionController {
             this._updateSelectedVisibleStatus();
         }
     }
+    enableSelection() {
+        this._disabled$.next(false);
+    }
+    disableSelection() {
+        this._disabled$.next(true);
+    }
     /**
      * Method will be called from List for remove row if it was selected
      *
@@ -2573,7 +2592,7 @@ class ExternalParamsController {
     }
 }
 
-const SHOW_DELETED_FILTERS_KEY = '$$_show_deleted_$$';
+const SHOW_DELETED_FILTERS_KEY = '_showDeleted_';
 class List {
     constructor(el, config = {}, fsScroll, selectionDialog, router, route, persistance, inDialog) {
         this.el = el;
@@ -2585,7 +2604,6 @@ class List {
         this.persistance = persistance;
         this.inDialog = inDialog;
         this.filters = [];
-        // @Alias('rows') private _rows: any;
         this.initialized$ = new BehaviorSubject(false);
         this.loading$ = new BehaviorSubject(false);
         this.paging = new PaginationController();
@@ -3301,9 +3319,15 @@ class ReorderController {
     get dataController() {
         return this._dataController;
     }
+    get selectionController() {
+        return this._selectionController;
+    }
     get manualReorderActivated$() {
         return this._manualReorderActivated$.asObservable();
     }
+    get manualReorderActivated() {
+        return this._manualReorderActivated$.getValue();
+    }
     get leftReorderActivated$() {
         return this._enabled$
             .pipe(map((enabled) => {
@@ -3326,22 +3350,30 @@ class ReorderController {
     get reorderDisabled() {
         return this._reorderDisabled$.getValue();
     }
-    initWithConfig(data, dataController, actionsController) {
-        var _a, _b, _c, _d;
+    initWithConfig(data, dataController, actionsController, selectionController) {
+        var _a, _b, _c;
         if (!data) {
             return;
         }
-        this.menu = (_a = data.menu) !== null && _a !== void 0 ? _a : true;
+        this.menu = (_a = data.menu) !== null && _a !== void 0 ? _a : false;
         this.position = (_b = data.position) !== null && _b !== void 0 ? _b : ReorderPosition.Left;
-        this.strategy = (_c = data.strategy) !== null && _c !== void 0 ? _c : ReorderStrategy.Manual;
-        this.status = (_d = data.status) !== null && _d !== void 0 ? _d : true;
+        if (!data.disabled) {
+            this.strategy = ReorderStrategy.Always;
+        }
+        if (data.toggle) {
+            this.strategy = ReorderStrategy.Manual;
+        }
+        // this.strategy = data.strategy ?? ReorderStrategy.Manual;
         this.label = data.label;
+        this.multiple = data.multiple;
+        this.status = (_c = data.status) !== null && _c !== void 0 ? _c : true;
         this.startCallback = data.start;
         this.movedCallback = data.moved;
         this.doneCallback = data.done;
         this.moveDropCallback = data.moveDrop;
         this._dataController = dataController;
         this._actionsController = actionsController;
+        this._selectionController = selectionController;
         if (this.strategy === ReorderStrategy.Always) {
             this.enableReorder();
         }
@@ -3370,7 +3402,7 @@ class ReorderController {
         }
     }
     enableReorder() {
-        if (this.strategy === ReorderStrategy.Manual || this.strategy === ReorderStrategy.Custom) {
+        if ((this.strategy === ReorderStrategy.Manual || this.strategy === ReorderStrategy.Custom) && this.startCallback) {
             const returnedValue = this.startCallback();
             if (returnedValue && returnedValue instanceof Observable) {
                 this.disableReorderAction();
@@ -3715,8 +3747,8 @@ class CustomizeColsDialogComponent {
         this._dialog.close();
     }
 }
-CustomizeColsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomizeColsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-CustomizeColsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomizeColsDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>Customize Columns</h1>\n<mat-dialog-content>\n  <div *ngFor=\"let column of columns\">\n    <mat-checkbox [checked]=\"column.show\" (change)=\"visibilityChange($event, column)\" [disabled]=\"column.disabled\">\n      <ng-container *ngIf=\"!column.title; else titleLable\">\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n      </ng-container>\n      <ng-template #titleLable>\n        {{ column.title }}\n      </ng-template>\n\n      <ng-container *ngIf=\"column.tooltip\">\n        <mat-icon [matTooltip]=\"column.tooltip\">\n          help\n        </mat-icon>\n      </ng-container>\n    </mat-checkbox>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"saveDisabled\">Save</button>\n  <button type=\"button\" mat-button (click)=\"cancel()\">Cancel</button>\n</mat-dialog-actions>\n", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}\n"], components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CustomizeColsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomizeColsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+CustomizeColsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomizeColsDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>Customize Columns</h1>\n<mat-dialog-content>\n  <div *ngFor=\"let column of columns\">\n    <mat-checkbox [checked]=\"column.show\" (change)=\"visibilityChange($event, column)\" [disabled]=\"column.disabled\">\n      <ng-container *ngIf=\"!column.title; else titleLable\">\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n      </ng-container>\n      <ng-template #titleLable>\n        {{ column.title }}\n      </ng-template>\n\n      <ng-container *ngIf=\"column.tooltip\">\n        <mat-icon [matTooltip]=\"column.tooltip\">\n          help\n        </mat-icon>\n      </ng-container>\n    </mat-checkbox>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"saveDisabled\">Save</button>\n  <button type=\"button\" mat-button (click)=\"cancel()\">Cancel</button>\n</mat-dialog-actions>\n", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}\n"], components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomizeColsDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -3727,7 +3759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i4.MatDialogRef }]; } });
+                }] }, { type: i1.MatDialogRef }]; } });
 
 const FILTER_STORE_KEY = 'fs-list-persist';
 class PersistanceController extends FsPersistanceStore {
@@ -3736,11 +3768,33 @@ class PersistanceController extends FsPersistanceStore {
         this.STORE_KEY = FILTER_STORE_KEY;
     }
 }
-PersistanceController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceController, deps: [{ token: i1.FsStore }, { token: i6$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+PersistanceController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceController, deps: [{ token: i1$1.FsStore }, { token: i7.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
 PersistanceController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceController });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceController, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.FsStore }, { type: i6$1.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.FsStore }, { type: i7.ActivatedRoute }]; } });
+
+class FsListHeadingDirective {
+}
+FsListHeadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListHeadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListHeadingDirective, selector: "[fs-list-heading],[fsListHeading]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListHeadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs-list-heading],[fsListHeading]'
+                }]
+        }] });
+
+class FsListSubheadingDirective {
+}
+FsListSubheadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListSubheadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListSubheadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListSubheadingDirective, selector: "[fs-list-subheading],[fsListSubheading]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListSubheadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs-list-subheading],[fsListSubheading]'
+                }]
+        }] });
 
 // import { FsListManageSavedFiltersComponent } from '../manage-saved-filters/manage-saved-filters.component';
 class FsListSavedFiltersComponent {
@@ -3758,7 +3812,7 @@ class FsListSavedFiltersComponent {
         // });
     }
 }
-FsListSavedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i4.MatDialog }, { token: i2$2.ExternalParamsController }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+FsListSavedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i1.MatDialog }, { token: i2$2.ExternalParamsController }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 FsListSavedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters", ngImport: i0, template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\n  -->, saved filter\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\n</ng-container>\n", components: [{ type: i2$2.FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: ["select", "clear", "manage"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListSavedFiltersComponent, decorators: [{
             type: Component,
@@ -3766,7 +3820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'fs-list-saved-filters',
                     templateUrl: 'saved-filters.component.html',
                 }]
-        }], ctorParameters: function () { return [{ type: i4.MatDialog }, { type: i2$2.ExternalParamsController }, { type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2$2.ExternalParamsController }, { type: i0.ViewContainerRef }]; } });
 
 class FsStatusComponent {
     constructor(_cdRef) {
@@ -3802,15 +3856,13 @@ class FsStatusComponent {
     }
 }
 FsStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsStatusComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsStatusComponent, selector: "fs-list-status", inputs: { paging: "paging", sorting: "sorting", rows: "rows", scrollable: "scrollable", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <ng-container *ngIf=\"paging.enabled && !scrollable\">\n    <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\n      Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\n    </ng-container>\n    <ng-template #emptyResults>\n      Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n--></ng-container><!--\n\n--><ng-container *ngIf=\"(!paging.enabled || scrollable) && paging.displayed > 0\">\n  <ng-container *ngIf=\"!scrollable; else scrollable\">\n    Showing\n    <span *ngIf=\"paging.displayed == 1\">{{ paging.displayed }} result </span>\n    <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\n  </ng-container>\n\n  <ng-template #scrollable>\n    <span *ngIf=\"paging.records == 1\">{{ paging.records }} result </span>\n    <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n--></ng-container><!--\n\n--><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n\n  <fs-menu [hidden]=\"!paging.enabled || scrollable\" #limitsMenu>\n    <ng-template\n      ngFor\n      let-limit\n      [ngForOf]=\"paging.limits\"\n    >\n      <ng-template fs-menu-item (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n\n  <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\n    <!-- Real sorting columns -->\n    <ng-template\n      ngFor\n      let-column\n      [ngForOf]=\"sorting.sortingColumns\"\n    >\n      <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\n        <ng-container *ngIf=\"column.title; else sortByTemplate\">\n          {{ column.title }}\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n        </ng-template>\n      </ng-template>\n    </ng-template>\n\n    <!-- Fake sorting columns -->\n    <ng-template\n      ngFor\n      let-column\n      [ngForOf]=\"sorting.fakeSortingColumns\"\n    >\n      <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\n        {{ column.title }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n\n  <ng-template #sortedBy>\n    <ng-container *ngIf=\"sorting.sortingColumn\">\n      sorted by\n      <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n        <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\n      </ng-container>\n      <ng-template #sortByTemplate>\n        <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\n          <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n        </a>,\n      </ng-template>\n      <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\n  --></ng-container><!--\n--></ng-template>\n</div>\n", styles: [":host{display:inline-block}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}\n"], components: [{ type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters" }, { type: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], pipes: { "number": i3$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+FsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsStatusComponent, selector: "fs-list-status", inputs: { paging: "paging", sorting: "sorting", rows: "rows", scrollable: "scrollable", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    <ng-container *ngIf=\"paging.enabled && !scrollable\">\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\n      </ng-container>\n      <ng-template #emptyResults>\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\n      </ng-template>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n  --></ng-container><!--\n\n  --><ng-container *ngIf=\"(!paging.enabled || scrollable) && paging.displayed > 0\">\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\n      Showing\n      <span *ngIf=\"paging.displayed == 1\">{{ paging.displayed }} result </span>\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\n    </ng-container>\n\n    <ng-template #scrollable>\n      <span *ngIf=\"paging.records == 1\">{{ paging.records }} result </span>\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n  --></ng-container><!--\n\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n\n    <fs-menu [hidden]=\"!paging.enabled || scrollable\" #limitsMenu>\n      <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\"\n      >\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\n          {{ limit }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n        ngFor\n        let-column\n        [ngForOf]=\"sorting.sortingColumns\"\n      >\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n\n      <!-- Fake sorting columns -->\n      <ng-template\n        ngFor\n        let-column\n        [ngForOf]=\"sorting.fakeSortingColumns\"\n      >\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>,\n        </ng-template>\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\n    --></ng-container><!--\n  --></ng-template>\n  </small>  \n</div>\n", styles: [":host{display:inline-block}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}\n"], components: [{ type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters" }, { type: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "number": i3$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsStatusComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fs-list-status',
                     templateUrl: 'status.component.html',
-                    styleUrls: [
-                        './status.component.scss',
-                    ],
+                    styleUrls: ['./status.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: true
                 }]
@@ -3840,14 +3892,17 @@ class FsCellComponent {
         this._destroy$ = new Subject();
     }
     ngOnInit() {
-        this._initCellContext();
-        this._initCellTemplate();
         this._listenGroupOpen();
     }
     ngOnChanges(changes) {
-        if (changes.rowIndex) {
+        var _a, _b, _c, _d;
+        if (((_a = changes.rowIndex) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes.rowIndex) === null || _b === void 0 ? void 0 : _b.previousValue)) {
             this.cellContext.index = this.rowIndex;
         }
+        if (((_c = changes.column) === null || _c === void 0 ? void 0 : _c.currentValue) !== ((_d = changes.column) === null || _d === void 0 ? void 0 : _d.previousValue)) {
+            this._initCellContext();
+            this._initCellTemplate();
+        }
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -3859,9 +3914,21 @@ class FsCellComponent {
             if (this.row.isGroup) {
                 this.cellContext.groupIndex = this.row.index;
             }
-            else if (this.row.isChild || this.row.isFooter) {
-                this.cellContext.groupChildIndex = this.row.index;
+            else if (this.row.isChild || this.row.isGroupFooter) {
+                this.cellContext.groupIndex = this.row.index;
                 this.cellContext.groupRow = this.row.parent.data;
+                this.cellContext.group = this.row.parent.data;
+            }
+            if (this.row.isGroup) {
+                this.cellContext.group = this.row.data;
+                this.cellContext.groupChildren = this.row.children
+                    .map((child) => child.data);
+            }
+            else if (this.row.isGroupFooter) {
+                this.cellContext.group = this.row.parent.data;
+                this.cellContext.groupIndex = this.row.index;
+                this.cellContext.groupChildren = this.row.parent.children
+                    .map((child) => child.data);
             }
         }
         this.cellContext.column = this.column;
@@ -3877,7 +3944,7 @@ class FsCellComponent {
         if ((_a = this.row) === null || _a === void 0 ? void 0 : _a.isGroup) {
             this.cellTemplate = this.column.groupHeaderTemplate || this.column.cellTemplate;
         }
-        else if ((_b = this.row) === null || _b === void 0 ? void 0 : _b.isFooter) {
+        else if ((_b = this.row) === null || _b === void 0 ? void 0 : _b.isGroupFooter) {
             this.cellTemplate = this.column.groupFooterTemplate || this.column.cellTemplate;
         }
         else {
@@ -4003,7 +4070,7 @@ class FsHeadComponent {
     }
 }
 FsHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHeadComponent, deps: [{ token: ReorderController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></th>\n\n  <!-- Selection -->\n  <th *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox (change)=\"selectAll($event)\" [checked]=\"selectedAll\"></mat-checkbox>\n  </th>\n\n  <!-- Content -->\n  <th fs-head-cell *ngFor=\"let column of columns; trackBy: trackByFn\"\n      (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n      [column]=\"column\"\n      [class.sorting]=\"column.sortable\"\n      [ngClass]=\"column.headerConfigs.classesArray\"\n      [attr.colspan]=\"column.headerConfigs.colspan\"\n      [attr.width]=\"column.width\"></th>\n\n  <!-- Drag -->\n  <th *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col drag-col\"></th>\n\n  <!-- Row Actions -->\n  <th *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\"></th>\n</tr>\n", components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsHeadCellComponent, selector: "[fs-head-cell]" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></th>\n\n  <!-- Selection -->\n  <th *ngIf=\"selection && !(selection.disabled$ | async)\" class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox (change)=\"selectAll($event)\" [checked]=\"selectedAll\"></mat-checkbox>\n  </th>\n\n  <!-- Content -->\n  <th fs-head-cell *ngFor=\"let column of columns; trackBy: trackByFn\"\n      (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n      [column]=\"column\"\n      [class.sorting]=\"column.sortable\"\n      [ngClass]=\"column.headerConfigs.classesArray\"\n      [attr.colspan]=\"column.headerConfigs.colspan\"\n      [attr.width]=\"column.width\"></th>\n\n  <!-- Drag -->\n  <th *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col drag-col\"></th>\n\n  <!-- Row Actions -->\n  <th *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\"></th>\n</tr>\n", components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsHeadCellComponent, selector: "[fs-head-cell]" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHeadComponent, decorators: [{
             type: Component,
             args: [{
@@ -4025,11 +4092,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class FsListDraggableListDirective {
-    constructor(_cdRef, _zone, _containerElement, _reorderController) {
+    constructor(_cdRef, _zone, _containerElement, _reorderController, _renderer) {
         this._cdRef = _cdRef;
         this._zone = _zone;
         this._containerElement = _containerElement;
         this._reorderController = _reorderController;
+        this._renderer = _renderer;
         // Handlers
         this._dragToHandler = this.dragTo.bind(this);
         this._dragEndHandler = this.dragEnd.bind(this);
@@ -4037,6 +4105,8 @@ class FsListDraggableListDirective {
         this._dragInProgress = false;
         this._dragStart$ = new Subject();
         this._dragEnd$ = new Subject();
+        this._draggableChildrenDirectives = [];
+        this._selectedRowsDirectives = [];
         this._destroy$ = new Subject();
     }
     get dragStart$() {
@@ -4048,6 +4118,18 @@ class FsListDraggableListDirective {
     get draggableItem() {
         return this._rows[this._draggableElementIndex];
     }
+    get _isMultipleDrag() {
+        return this._reorderController.multiple && this._selectedRowsDirectives.length > 1;
+    }
+    addDraggableDirective(dir) {
+        this._draggableChildrenDirectives.push(dir);
+    }
+    removeDraggableDirective(dir) {
+        const idx = this._draggableChildrenDirectives.indexOf(dir);
+        if (idx !== -1) {
+            this._draggableChildrenDirectives.splice(idx, 1);
+        }
+    }
     /**
      * Prepare draggable elements and add events
      * @param draggableElement
@@ -4063,6 +4145,7 @@ class FsListDraggableListDirective {
         this._dragInProgress = true;
         window.document.body.classList.add('reorder-in-progress');
         this._draggableElement = draggableElement;
+        this._detectSelectedRows();
         this.prepareElements();
         this.initDraggableElement();
         this._draggableElement.classList.add('draggable-elem');
@@ -4084,6 +4167,10 @@ class FsListDraggableListDirective {
         this.touchFix(event);
         const elemIndex = this.lookupElementUnder(event);
         const targetRow = this._rows[elemIndex];
+        if (this._multipleDraggableElementPreview) {
+            this._multipleDraggableElementPreview.style.left = event.clientX + 'px';
+            this._multipleDraggableElementPreview.style.top = event.clientY + 'px';
+        }
         // Can not drag before first group and after last group
         const swapWithBoundaryGroupElement = (elemIndex === 0 || elemIndex === this._rows.length - 1)
             && targetRow.isGroup
@@ -4092,22 +4179,29 @@ class FsListDraggableListDirective {
             if (elemIndex !== null) {
                 if (targetRow.readyToSwap) {
                     this.swapWithIndex(elemIndex);
-                    this._draggableElementPreview.classList.remove('fs-list-no-drop');
+                    if (this._draggableElementPreview) {
+                        this._draggableElementPreview.classList.remove('fs-list-no-drop');
+                    }
                 }
                 else {
-                    this._draggableElementPreview.classList.add('fs-list-no-drop');
+                    if (this._draggableElementPreview) {
+                        this._draggableElementPreview.classList.add('fs-list-no-drop');
+                    }
                 }
             }
+            // FIXME
+            if (this._draggableElementPreview) {
+                const topOffset = (event.y || event.clientY) - (this._draggableElementHeight / 2);
+                this._draggableElementPreview.style.top = topOffset + 'px';
+            }
         }
-        const topOffset = (event.y || event.clientY) - (this._draggableElementHeight / 2);
-        this._draggableElementPreview.style.top = topOffset + 'px';
     }
     /**
      * Remove events and classes after drag finish
      */
     dragEnd() {
         this._dragInProgress = false;
-        ///
+        this._reorderController.dataController.finishReorder();
         if (this._reorderController.movedCallback) {
             this._reorderController.movedCallback(this._reorderController.dataController.reorderData);
         }
@@ -4121,13 +4215,21 @@ class FsListDraggableListDirective {
         }
         // this._reorderController.dataController.updateOrderByRows(this._rows);
         ///
+        this._containerElement.nativeElement.classList.remove('drag-hidden');
         this._draggableElement.classList.remove('draggable-elem');
         window.document.body.classList.remove('reorder-in-progress');
-        this._draggableElementPreview.remove();
         this._draggableElement = null;
-        this._draggableElementPreview = null;
+        if (this._draggableElementPreview) {
+            this._draggableElementPreview.remove();
+            this._draggableElementPreview = null;
+        }
+        else {
+            this._renderer.removeChild(document.body, this._multipleDraggableElementPreview);
+            this._multipleDraggableElementPreview = null;
+        }
         this._draggableElementHeight = null;
         this._draggableElementIndex = null;
+        this._selectedRowsDirectives = [];
         window.removeEventListener('touchmove', this._windowTouchMoveHandler);
         window.document.removeEventListener('mousemove', this._dragToHandler);
         window.document.removeEventListener('touchmove', this._dragToHandler);
@@ -4147,7 +4249,7 @@ class FsListDraggableListDirective {
      * Store child rows
      */
     lookupChildElements() {
-        this._childRowElements = Array.from(this._containerElement.nativeElement.querySelectorAll('tr'))
+        this._childRowElements = Array.from(this._containerElement.nativeElement.querySelectorAll('tr:not(.drag-hidden)'))
             .reduce((acc, rowElement, index) => {
             const element = { target: rowElement };
             if (rowElement === this._draggableElement) {
@@ -4174,19 +4276,35 @@ class FsListDraggableListDirective {
      * Init draggable element
      */
     initDraggableElement() {
+        var _a;
         const el = this._draggableElement.cloneNode(true);
         const data = this._draggableElement.getBoundingClientRect();
-        el.style.width = data.width + 'px';
-        el.style.left = data.left + 'px';
-        el.style.top = data.top + 'px';
-        el.classList.add('draggable');
-        this._containerElement.nativeElement.insertAdjacentElement('afterbegin', el);
-        this._draggableElementPreview = el;
-        this._draggableElementHeight = data.height;
-        this.updateDraggableDims();
+        if (!(this._isMultipleDrag)) {
+            el.style.width = data.width + 'px';
+            el.style.left = data.left + 'px';
+            el.style.top = data.top + 'px';
+            el.classList.add('draggable');
+            this._containerElement.nativeElement.insertAdjacentElement('afterbegin', el);
+            this._draggableElementPreview = el;
+            this._draggableElementHeight = data.height;
+            this.updateDraggableDims();
+        }
+        else {
+            // Create preview DIV
+            this._containerElement.nativeElement.classList.add('drag-hidden');
+            const selectedCount = (_a = this._selectedRowsDirectives) === null || _a === void 0 ? void 0 : _a.length;
+            const previewBlock = this._renderer.createElement('div');
+            previewBlock.style.left = data.left + 'px';
+            previewBlock.style.top = data.top + 'px';
+            const text = this._renderer.createText(`${selectedCount} selected items`);
+            this._renderer.appendChild(previewBlock, text);
+            this._renderer.addClass(previewBlock, 'preview-block');
+            this._renderer.appendChild(document.body, previewBlock);
+            this._multipleDraggableElementPreview = previewBlock;
+        }
     }
     /**
-     * Looking by stored row elemens for overlapped row
+     * Looking by stored row elements for overlapped row
      * @param event
      */
     lookupElementUnder(event) {
@@ -4210,19 +4328,24 @@ class FsListDraggableListDirective {
      */
     swapWithIndex(index) {
         const activeIndex = this._draggableElementIndex;
+        const selectedRows = this._selectedRowsDirectives
+            .map((d) => d.row)
+            .filter((d) => d.readyToSwap);
         // Swap rows in global rows stack
         this._reorderController
             .dataController
-            .swapRows(this._rows[activeIndex], this._rows[index]);
+            .swapRows(this._rows[activeIndex], this._rows[index], selectedRows, this._isMultipleDrag);
         // Swap visible rows
-        const activeRow = this._rows[activeIndex];
-        this._rows[activeIndex] = this._rows[index];
-        this._rows[index] = activeRow;
-        const activeElement = this._childRowElements[activeIndex].target;
-        this._childRowElements[activeIndex].active = false;
-        this._childRowElements[activeIndex].target = this._childRowElements[index].target;
-        this._childRowElements[index].target = activeElement;
-        this._childRowElements[index].active = true;
+        if (!this._isMultipleDrag) {
+            const activeRow = this._rows[activeIndex];
+            this._rows[activeIndex] = this._rows[index];
+            this._rows[index] = activeRow;
+            const activeElement = this._childRowElements[activeIndex].target;
+            this._childRowElements[activeIndex].active = false;
+            this._childRowElements[activeIndex].target = this._childRowElements[index].target;
+            this._childRowElements[index].target = activeElement;
+            this._childRowElements[index].active = true;
+        }
         this._draggableElementIndex = index;
         this._cdRef.detectChanges();
     }
@@ -4242,11 +4365,20 @@ class FsListDraggableListDirective {
             doneResult
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(() => {
-                console.log('enable');
                 this._reorderController.enableReorderAction();
             });
         }
     }
+    _detectSelectedRows() {
+        this._draggableChildrenDirectives
+            .forEach((dir) => {
+            var _a;
+            const isRowSelected = (_a = this._reorderController.selectionController) === null || _a === void 0 ? void 0 : _a.isRowSelected(dir.row.data);
+            if (isRowSelected && !dir.row.isGroup) {
+                this._selectedRowsDirectives.push(dir);
+            }
+        });
+    }
     /**
      * Fix background when mobile
      * @param e
@@ -4262,14 +4394,14 @@ class FsListDraggableListDirective {
         }
     }
 }
-FsListDraggableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListDraggableListDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: ReorderController }], target: i0.ɵɵFactoryTarget.Directive });
+FsListDraggableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListDraggableListDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: ReorderController }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
 FsListDraggableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: { _rows: ["rows", "_rows"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListDraggableListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsListDraggableList]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: ReorderController }]; }, propDecorators: { _rows: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: ReorderController }, { type: i0.Renderer2 }]; }, propDecorators: { _rows: [{
                 type: Input,
                 args: ['rows']
             }] } });
@@ -4287,8 +4419,8 @@ class FsRowInlineActionComponent {
         this.fileSelect.emit(event);
     }
 }
-FsRowInlineActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowInlineActionComponent, deps: [{ token: i1$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-FsRowInlineActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: { action: "action" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, ngImport: i0, 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", components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsRowInlineActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowInlineActionComponent, deps: [{ token: i1$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+FsRowInlineActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: { action: "action" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, ngImport: i0, 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", components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
             type: Component,
             args: [{
@@ -4296,7 +4428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './inline-action.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.FsPrompt }]; }, propDecorators: { action: [{
+        }], ctorParameters: function () { return [{ type: i1$2.FsPrompt }]; }, propDecorators: { action: [{
                 type: Input
             }], clicked: [{
                 type: Output
@@ -4304,6 +4436,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
+class ActionLabelPipe {
+    transform(label, row) {
+        if (typeof label === 'function') {
+            return label(row.data);
+        }
+        return label;
+    }
+}
+ActionLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ActionLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionLabelPipe, name: "actionLabel" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'actionLabel' }]
+        }] });
+
 class FsRowMenuActionComponent {
     constructor() {
         this.fileSelect = new EventEmitter();
@@ -4311,7 +4458,7 @@ class FsRowMenuActionComponent {
     }
 }
 FsRowMenuActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowMenuActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsRowMenuActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: { icon: "icon", label: "label", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, ngImport: i0, 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", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsRowMenuActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: { row: "row", icon: "icon", label: "label", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, ngImport: i0, template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n  {{label| actionLabel:row}}\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| actionLabel:row}}\n  </fs-file>\n</ng-template>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "actionLabel": ActionLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowMenuActionComponent, decorators: [{
             type: Component,
             args: [{
@@ -4319,7 +4466,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './menu-action.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { icon: [{
+        }], propDecorators: { row: [{
+                type: Input
+            }], icon: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -4368,11 +4517,6 @@ class FsRowActionsComponent {
     trackByFn(index) {
         return index;
     }
-    clickOnTrigger(event) {
-        event.stopPropagation();
-        this.rowActions
-            .forEach((action) => action.updateLabel(this.row.data));
-    }
     /**
      * Emit that some row must be removed
      * @param action
@@ -4391,8 +4535,8 @@ class FsRowActionsComponent {
         }
     }
 }
-FsRowActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowActionsComponent, deps: [{ token: i1$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-FsRowActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: { row: "row", index: "index", restoreMode: "restoreMode", rowActions: "rowActions", rowRemoved: "rowRemoved", menuRowActions: "menuRowActions", inlineRowActions: "inlineRowActions", restoreAction: "restoreAction" }, ngImport: i0, 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", components: [{ type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["action"], outputs: ["clicked", "fileSelect"] }, { type: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["icon", "label", "file"], outputs: ["fileSelect", "fileError"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsRowActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowActionsComponent, deps: [{ token: i1$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+FsRowActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: { row: "row", index: "index", restoreMode: "restoreMode", rowActions: "rowActions", rowRemoved: "rowRemoved", menuRowActions: "menuRowActions", inlineRowActions: "inlineRowActions", restoreAction: "restoreAction" }, ngImport: i0, template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action \n      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 \n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\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 \n          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          [row]=\"row\"\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 | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template \n                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                [row]=\"row\"\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 \n            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            [row]=\"row\"\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 | actionLabel:row}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n", components: [{ type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["action"], outputs: ["clicked", "fileSelect"] }, { type: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "icon", "label", "file"], outputs: ["fileSelect", "fileError"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "actionLabel": ActionLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -4400,7 +4544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: './actions.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.FsPrompt }]; }, propDecorators: { row: [{
+        }], ctorParameters: function () { return [{ type: i1$2.FsPrompt }]; }, propDecorators: { row: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -4450,7 +4594,14 @@ class FsRowComponent {
         return this.row.isChild;
     }
     get isGroupFooterRow() {
-        return this.row.isFooter;
+        return this.row.isGroupFooter;
+    }
+    get isDragDisabled() {
+        return !this.selected && this.reorderController.multiple && !!this.selection.selectedRows.size;
+    }
+    get isMultipleSelection() {
+        const multiple = this.reorderController.multiple;
+        return multiple && this.selected;
     }
     get rowCssClass() {
         var _a, _b, _c;
@@ -4465,7 +4616,7 @@ class FsRowComponent {
         else if ((_b = this.row) === null || _b === void 0 ? void 0 : _b.isChild) {
             cls += ' fs-list-row-group-child';
         }
-        else if ((_c = this.row) === null || _c === void 0 ? void 0 : _c.isFooter) {
+        else if ((_c = this.row) === null || _c === void 0 ? void 0 : _c.isGroupFooter) {
             cls += ' fs-list-row-group-footer';
         }
         if (this.rowClass) {
@@ -4476,7 +4627,7 @@ class FsRowComponent {
                 options.groupIndex = this.row.index;
             }
             else if (this.row.isChild) {
-                options.groupChildIndex = this.row.index;
+                options.groupIndex = this.row.index;
             }
             const resultClass = this.rowClass(this.row.data, options);
             if (typeof resultClass === 'string') {
@@ -4542,7 +4693,7 @@ class FsRowComponent {
         return index;
     }
     dragStart(event) {
-        if (this.reorderController.enabled) {
+        if (this.reorderController.enabled && !this.isDragDisabled) {
             event.preventDefault();
             event.stopPropagation();
             this._draggableList.dragStart(this.el.nativeElement);
@@ -4623,7 +4774,7 @@ class FsRowComponent {
     }
 }
 FsRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, deps: [{ token: i0.ElementRef }, { token: ReorderController }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Component });
-FsRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowComponent, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved" }, host: { properties: { "attr.role": "this.role", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"reorderController.leftReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isFooter\">\n      <mat-checkbox (change)=\"selectRow($event)\"\n                    [checked]=\"selected\"\n                    [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"reorderController.rightReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions [row]=\"row\"\n                         [index]=\"rowIndex\"\n                         [rowActions]=\"rowActions\"\n                         [menuRowActions]=\"menuRowActions\"\n                         [inlineRowActions]=\"inlineRowActions\"\n                         [restoreAction]=\"restoreAction\"\n                         [restoreMode]=\"restoreMode\"\n                         [rowRemoved]=\"rowRemoved\"\n    ></fs-list-row-actions>\n  </ng-container>\n</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowComponent, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved" }, host: { properties: { "attr.role": "this.role", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"reorderController.leftReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox (change)=\"selectRow($event)\"\n                    [checked]=\"selected\"\n                    [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"reorderController.rightReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions [row]=\"row\"\n                         [index]=\"rowIndex\"\n                         [rowActions]=\"rowActions\"\n                         [menuRowActions]=\"menuRowActions\"\n                         [inlineRowActions]=\"inlineRowActions\"\n                         [restoreAction]=\"restoreAction\"\n                         [restoreMode]=\"restoreMode\"\n                         [rowRemoved]=\"rowRemoved\"\n    ></fs-list-row-actions>\n  </ng-container>\n</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, decorators: [{
             type: Component,
             args: [{
@@ -4659,6 +4810,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], cellRefs: [{
                 type: ViewChildren,
                 args: ['td']
+            }], isMultipleSelection: [{
+                type: HostBinding,
+                args: ['class.multiple-selection']
             }], rowCssClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -4672,15 +4826,23 @@ class FsListDraggableRowDirective {
         this._draggableList = _draggableList;
         this._destroy$ = new Subject();
     }
+    get elRef() {
+        return this._el;
+    }
     ngOnInit() {
         if (this._reorderController.moveDropCallback) {
             this._listenDragEvents();
         }
+        this._draggableList.addDraggableDirective(this);
     }
     ngOnDestroy() {
+        this._draggableList.removeDraggableDirective(this);
         this._destroy$.next();
         this._destroy$.complete();
     }
+    dragHide() {
+        this._el.nativeElement.classList.add('drag-hidden');
+    }
     _listenDragEvents() {
         this._draggableList
             .dragStart$
@@ -4729,8 +4891,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class FsBodyComponent {
-    constructor(reorderContoller, el, cdRef, differs) {
-        this.reorderContoller = reorderContoller;
+    constructor(reorderController, el, cdRef, differs) {
+        this.reorderController = reorderController;
         this.el = el;
         this.cdRef = cdRef;
         this.differs = differs;
@@ -4755,7 +4917,7 @@ class FsBodyComponent {
     }
 }
 FsBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsBodyComponent, deps: [{ token: ReorderController }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-FsBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsBodyComponent, selector: "[fs-list-body]", inputs: { rows: "rows", columns: "columns", hasFooter: "hasFooter", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", rowEvents: "rowEvents", rowClass: "rowClass", hasRowActions: "hasRowActions", selection: "selection", restoreMode: "restoreMode", rowRemoved: "rowRemoved" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsRowComponent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr fs-list-row\n      fsListDraggableRow\n      [row]=\"row\"\n      [rowIndex]=\"i\"\n      [columns]=\"columns\"\n      [rowActionsRaw]=\"rowActionsRaw\"\n      [groupActionsRaw]=\"groupActionsRaw\"\n      [hasRowActions]=\"hasRowActions\"\n      [rowEvents]=\"rowEvents\"\n      [rowClass]=\"rowClass\"\n      [selection]=\"selection\"\n      [restoreMode]=\"restoreMode\"\n      [ngClass]=\"{ 'drag-row': reorderContoller.enabled }\"\n      [rowRemoved]=\"rowRemoved\"\n      #activeRow>\n  </tr>\n</ng-container>\n", components: [{ type: FsRowComponent, selector: "[fs-list-row]", inputs: ["row", "rowActionsRaw", "groupActionsRaw", "hasRowActions", "rowEvents", "rowClass", "restoreMode", "rowIndex", "columns", "selection", "rowRemoved"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: ["row"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsBodyComponent, selector: "[fs-list-body]", inputs: { rows: "rows", columns: "columns", hasFooter: "hasFooter", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", rowEvents: "rowEvents", rowClass: "rowClass", hasRowActions: "hasRowActions", selection: "selection", restoreMode: "restoreMode", rowRemoved: "rowRemoved" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsRowComponent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr fs-list-row\n      fsListDraggableRow\n      [row]=\"row\"\n      [rowIndex]=\"i\"\n      [columns]=\"columns\"\n      [rowActionsRaw]=\"rowActionsRaw\"\n      [groupActionsRaw]=\"groupActionsRaw\"\n      [hasRowActions]=\"hasRowActions\"\n      [rowEvents]=\"rowEvents\"\n      [rowClass]=\"rowClass\"\n      [selection]=\"selection\"\n      [restoreMode]=\"restoreMode\"\n      [ngClass]=\"{ 'drag-row': reorderController.enabled }\"\n      [rowRemoved]=\"rowRemoved\"\n      #activeRow>\n  </tr>\n</ng-container>\n", components: [{ type: FsRowComponent, selector: "[fs-list-row]", inputs: ["row", "rowActionsRaw", "groupActionsRaw", "hasRowActions", "rowEvents", "rowClass", "restoreMode", "rowIndex", "columns", "selection", "rowRemoved"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: ["row"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -4816,7 +4978,7 @@ class FsFooterRowComponent extends FsRowComponent {
     }
 }
 FsFooterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterRowComponent, deps: [{ token: i0.ElementRef }, { token: ReorderController }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-FsFooterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFooterRowComponent, selector: "[fs-list-footer-row]", inputs: { hasRowActions: "hasRowActions" }, usesInheritance: true, ngImport: i0, template: "<td *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></td>\n\n<td *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\"></td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td fs-list-footer-cell\n      *ngIf=\"!column.footerColspanned\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [ngClass]=\"column.footerConfigs.classesArray\"\n      [attr.colspan]=\"column.footerConfigs.colspan\"\n      [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<td *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col row-actions\"></td>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.enabled && reorderController.strategy === ReorderStrategy.Manual)\" class=\"fs-list-col drag-col\"></td>\n", components: [{ type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFooterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFooterRowComponent, selector: "[fs-list-footer-row]", inputs: { hasRowActions: "hasRowActions" }, usesInheritance: true, ngImport: i0, template: "<td *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></td>\n\n<td *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\"></td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td fs-list-footer-cell\n      *ngIf=\"!column.footerColspanned\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [ngClass]=\"column.footerConfigs.classesArray\"\n      [attr.colspan]=\"column.footerConfigs.colspan\"\n      [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<td *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col row-actions\"></td>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.enabled && reorderController.strategy === ReorderStrategy.Manual)\" class=\"fs-list-col drag-col\"></td>\n", components: [{ type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterRowComponent, decorators: [{
             type: Component,
             args: [{
@@ -4911,7 +5073,7 @@ class FsPaginationComponent {
     }
 }
 FsPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <div class=\"paging\" *ngIf=\"pagination?.pages\">\n    <div class=\"records\"></div>\n    <div fxFlex>\n      <div class=\"pages\">\n        <a matRipple matRippleRadius=\"15\" [matRippleCentered]=\"true\" class=\"first\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goFirst()\">\n          <i class=\"material-icons\">first_page</i>\n        </a>\n\n        <a matRipple matRippleRadius=\"15\" [matRippleCentered]=\"true\" class=\"previous\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goPrev()\">\n          <i class=\"material-icons\">keyboard_arrow_left</i>\n        </a>\n\n        <div class=\"number\">\n          {{ pagination.page | fsFormatNumber }} of {{ pagination.pages | fsFormatNumber }}\n        </div>\n\n        <a matRipple matRippleRadius=\"15\" [matRippleCentered]=\"true\" class=\"next\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goNext()\">\n          <i class=\"material-icons\">keyboard_arrow_right</i>\n        </a>\n\n        <a matRipple matRippleRadius=\"15\" [matRippleCentered]=\"true\" class=\"last\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goLast()\">\n          <i class=\"material-icons\">last_page</i>\n        </a>\n\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loadMoreButton>\n  <div class=\"fs-list-load-more\" *ngIf=\"pagination.hasNextPage\">\n    <button mat-button (click)=\"pagination.goNext()\">{{ pagination.loadMoreText }}</button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.paging{display:flex}.paging .pages{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.paging .pages a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}.paging .pages a:not(.page){padding:10px}.paging .pages a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.paging .pages .number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }], pipes: { "fsFormatNumber": i5$1.FsFormatNumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <ng-container *ngIf=\"pagination?.pages\">\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"first\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goFirst()\">\n      <i class=\"material-icons\">first_page</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"previous\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goPrev()\">\n      <i class=\"material-icons\">keyboard_arrow_left</i>\n    </a>\n\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of {{ pagination.pages | fsFormatNumber }}\n    </div>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"next\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goNext()\">\n      <i class=\"material-icons\">keyboard_arrow_right</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"last\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goLast()\">\n      <i class=\"material-icons\">last_page</i>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadMoreButton>\n  <div class=\"fs-list-load-more\" *ngIf=\"pagination.hasNextPage\">\n    <button mat-button (click)=\"pagination.goNext()\">{{ pagination.loadMoreText }}</button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], components: [{ type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }], pipes: { "fsFormatNumber": i4$1.FsFormatNumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
             args: [{
@@ -4949,11 +5111,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class FsListComponent {
-    constructor(reorderController, _el, _defaultOptions, fsScroll, selectionDialog, dialog, cdRef, _groupExpandNotifier, _router, _route, _persistance, _location, _dialogRef, _drawerRef) {
+    constructor(reorderController, _defaultOptions, fsScroll, _dialogRef, _drawerRef, _el, selectionDialog, dialog, cdRef, _groupExpandNotifier, _router, _route, _persistance, _location) {
         this.reorderController = reorderController;
-        this._el = _el;
         this._defaultOptions = _defaultOptions;
         this.fsScroll = fsScroll;
+        this._dialogRef = _dialogRef;
+        this._drawerRef = _drawerRef;
+        this._el = _el;
         this.selectionDialog = selectionDialog;
         this.dialog = dialog;
         this.cdRef = cdRef;
@@ -4962,11 +5126,10 @@ class FsListComponent {
         this._route = _route;
         this._persistance = _persistance;
         this._location = _location;
-        this._dialogRef = _dialogRef;
-        this._drawerRef = _drawerRef;
         this.classFsList = true;
         this.loaderLines = 3;
         this.filtersReady = new EventEmitter();
+        this.keywordVisible = true;
         // Event will fired if action remove: true will clicked
         this.rowRemoved = new EventEmitter();
         this.firstLoad = true;
@@ -5007,6 +5170,15 @@ class FsListComponent {
     get groupEnabled() {
         return this.list.dataController.groupEnabled;
     }
+    get hasFilterKeyword() {
+        return this.list.filterInput && this.keywordVisible;
+    }
+    get hasStatus() {
+        return this.list.status &&
+            (this.list.sorting.isDefined || this.list.paging.enabled) &&
+            (!this.reorderController.enabled || (this.reorderController.enabled && this.reorderController.status)) &&
+            ((this.list.scrollable && this.list.scrollable.status) || !this.list.scrollable);
+    }
     get paginatorVisible() {
         return this.list.paging.enabled
             && !this.firstLoad
@@ -5065,6 +5237,12 @@ class FsListComponent {
     resetSelectionActions() {
         this.list.selection.resetActions();
     }
+    enableSelection() {
+        this.list.selection.enableSelection();
+    }
+    disableSelection() {
+        this.list.selection.disableSelection();
+    }
     removeData(data) {
         return this.list.dataController.removeData(data);
     }
@@ -5106,6 +5284,8 @@ class FsListComponent {
     _emitFiltersReadyEvent() {
         if (!!this.filterRef && this._filterParamsReady) {
             this.filtersReady.emit();
+            this.keywordVisible = this.filterRef.hasKeyword;
+            this.cdRef.markForCheck();
         }
     }
     /**
@@ -5127,7 +5307,7 @@ class FsListComponent {
         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);
+        this.reorderController.initWithConfig(config.reorder, this.list.dataController, this.list.actions, this.list.selection);
         if (this.listColumnDirectives) {
             this.list.tranformTemplatesToColumns(this.listColumnDirectives);
         }
@@ -5218,20 +5398,18 @@ class FsListComponent {
         this._persistance.setConfig(persistConfig, namespace, this._inDialog);
     }
 }
-FsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListComponent, deps: [{ token: ReorderController }, { token: i0.ElementRef }, { token: FS_LIST_DEFAULT_CONFIG, optional: true }, { token: i2$4.FsScrollService, optional: true }, { token: i3$3.SelectionDialog }, { token: i4.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: PersistanceController }, { token: i3$1.Location }, { token: i4.MatDialogRef, optional: true }, { token: i9.DrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListComponent, deps: [{ token: ReorderController }, { token: FS_LIST_DEFAULT_CONFIG, optional: true }, { token: i2$4.FsScrollService, optional: true }, { token: i1.MatDialogRef, optional: true }, { token: i4$2.DrawerRef, optional: true }, { token: i0.ElementRef }, { token: i5.SelectionDialog }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i7.Router }, { token: i7.ActivatedRoute }, { token: PersistanceController }, { token: i3$1.Location }], target: i0.ɵɵFactoryTarget.Component });
 FsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsListComponent, selector: "fs-list", inputs: { config: "config", loaderLines: "loaderLines" }, outputs: { filtersReady: "filtersReady" }, host: { properties: { "class.fs-list": "this.classFsList" } }, providers: [
         GroupExpandNotifierService,
         PersistanceController,
         ReorderController,
-    ], queries: [{ propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-list-container\"\n     [ngClass]=\"{ 'has-filter-input': list.filterInput,\n                  'has-filters': list.filterConfig?.items.length,\n                  'has-heading': list.heading,\n                  'has-status': list.status,\n                  'has-chips': list.chips,\n                  'has-actions': list.actions.hasActions,\n                  'first-load': firstLoad,\n                  'loading': list.loading$ | async }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <!-- Header -->\n    <div class=\"fs-list-header-container\">\n\n      <div class=\"fs-list-header\"\n        [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated$ || !list.filterConfig?.items.length }\">\n        <div class=\"heading-container\">\n          <h2 class=\"heading\" *ngIf=\"list.heading\">{{list.heading}}</h2>\n          <span class=\"subheading\" *ngIf=\"list.subheading\">{{list.subheading}}</span>\n        </div>\n        <fs-filter\n          class=\"fs-list-filter\"\n          *ngIf=\"list.filterConfig\"\n          [filter]=\"list.filterConfig\"\n          [showSortBy]=\"!list.status\"\n          [showFilterInput]=\"list.filterInput\"\n          (ready)=\"filterReady()\">\n\n          <ng-template fsFilterStatusBar>\n            <ng-container *ngIf=\"\n              list.paging &&\n              !(reorderController.manualReorderActivated$ | async) &&\n              (!reorderController.enabled || reorderController.status) &&\n              ((list.scrollable && list.scrollable.status) || !list.scrollable)\">\n              <!-- Status -->\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\"\n                [scrollable]=\"list.scrollable\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table class=\"fs-list-table\" role=\"grid\" [fsListContentInit]=\"list.afterContentInit\">\n          <thead fs-list-head\n                 class=\"fs-list-head\"\n                 role=\"rowgroup\"\n                 *ngIf=\"list.columns.hasHeader\"\n                 [ngClass]=\"list.columns.theadClass\"\n                 [columns]=\"list.columns.visibleColumns$ | async\"\n                 [sorting]=\"list.sorting\"\n                 [selection]=\"list.selection\"\n                 [hasRowActions]=\"list.hasRowActions\"\n          >\n          </thead>\n\n          <tbody fs-list-body\n                 fsListDraggableList\n                 class=\"fs-list-body\"\n                 role=\"rowgroup\"\n                 [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n                 [rows]=\"listData\"\n                 [rowActionsRaw]=\"list.rowActionsRaw\"\n                 [groupActionsRaw]=\"list.groupActionsRaw\"\n                 [hasRowActions]=\"list.hasRowActions\"\n                 [rowEvents]=\"list.rowEvents\"\n                 [rowClass]=\"list.rowClass\"\n                 [columns]=\"list.columns.visibleColumns$ | async\"\n                 [restoreMode]=\"list.restoreMode\"\n                 [selection]=\"list.selection\"\n                 [rowRemoved]=\"rowRemoved\"\n          >\n          </tbody>\n\n          <tfoot fs-list-footer\n                 class=\"fs-list-footer\"\n                 *ngIf=\"list.columns.hasFooter\"\n                 [columns]=\"list.columns.visibleColumns$ | async\"\n                 [selection]=\"list.selection\"\n                 [hasRowActions]=\"list.hasRowActions\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n", styles: ["@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}::ng-deep .fs-list{display:block;width:100%}::ng-deep .fs-list .fs-list-swap-restricted{opacity:.5}::ng-deep .fs-list .fs-list-no-drop{cursor:no-drop}::ng-deep .fs-list .fs-filter{margin-bottom:0;position:initial!important;display:block}::ng-deep .fs-list .fs-list-container.loading .fs-list-status,::ng-deep .fs-list .fs-list-container.loading .fs-list-body,::ng-deep .fs-list .fs-list-container.loading fs-list-pagination,::ng-deep .fs-list .fs-list-container.loading .filter-chips,::ng-deep .fs-list .fs-list-container.loading .fs-list-no-results-container,::ng-deep .fs-list .fs-list-container.first-load .fs-list-status,::ng-deep .fs-list .fs-list-container.first-load .fs-list-body,::ng-deep .fs-list .fs-list-container.first-load fs-list-pagination,::ng-deep .fs-list .fs-list-container.first-load .filter-chips,::ng-deep .fs-list .fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}::ng-deep .fs-list .fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}::ng-deep .fs-list .fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}::ng-deep .fs-list .fs-list-container.has-actions .fs-list-actions{margin-left:5px}::ng-deep .fs-list .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list table,::ng-deep .fs-list .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}::ng-deep .fs-list .hidden{display:none}::ng-deep .fs-list thead,::ng-deep .fs-list .fs-list-head{display:table-header-group}::ng-deep .fs-list thead th,::ng-deep .fs-list thead .fs-list-col,::ng-deep .fs-list .fs-list-head th,::ng-deep .fs-list .fs-list-head .fs-list-col{color:#999;padding:8px;font-weight:normal;font-size:13px;color:#8f8f8f}::ng-deep .fs-list thead th.fs-list-col-selection,::ng-deep .fs-list thead .fs-list-col.fs-list-col-selection,::ng-deep .fs-list .fs-list-head th.fs-list-col-selection,::ng-deep .fs-list .fs-list-head .fs-list-col.fs-list-col-selection{width:1%;text-align:left}::ng-deep .fs-list thead th.sorting,::ng-deep .fs-list thead .fs-list-col.sorting,::ng-deep .fs-list .fs-list-head th.sorting,::ng-deep .fs-list .fs-list-head .fs-list-col.sorting{cursor:pointer}::ng-deep .fs-list thead th.sorting:hover,::ng-deep .fs-list thead .fs-list-col.sorting:hover,::ng-deep .fs-list .fs-list-head th.sorting:hover,::ng-deep .fs-list .fs-list-head .fs-list-col.sorting:hover{background-color:#f6f6f6}::ng-deep .fs-list thead th .wrap,::ng-deep .fs-list thead .fs-list-col .wrap,::ng-deep .fs-list .fs-list-head th .wrap,::ng-deep .fs-list .fs-list-head .fs-list-col .wrap{display:inline-flex;vertical-align:middle;white-space:nowrap}::ng-deep .fs-list thead th .wrap mat-icon,::ng-deep .fs-list thead .fs-list-col .wrap mat-icon,::ng-deep .fs-list .fs-list-head th .wrap mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-col .wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}::ng-deep .fs-list thead th .wrap .direction,::ng-deep .fs-list thead .fs-list-col .wrap .direction,::ng-deep .fs-list .fs-list-head th .wrap .direction,::ng-deep .fs-list .fs-list-head .fs-list-col .wrap .direction{margin-left:5px}::ng-deep .fs-list thead th.sorting,::ng-deep .fs-list thead .fs-list-col.sorting,::ng-deep .fs-list .fs-list-head th.sorting,::ng-deep .fs-list .fs-list-head .fs-list-col.sorting{background-image:none}::ng-deep .fs-list tbody,::ng-deep .fs-list .fs-list-body{display:table-row-group;position:relative}::ng-deep .fs-list tbody.disabled,::ng-deep .fs-list .fs-list-body.disabled{opacity:.4;pointer-events:none}::ng-deep .fs-list tbody td,::ng-deep .fs-list tbody .fs-list-col,::ng-deep .fs-list .fs-list-body td,::ng-deep .fs-list .fs-list-body .fs-list-col{box-sizing:border-box}::ng-deep .fs-list tbody tr:hover td,::ng-deep .fs-list tbody .fs-list-row:hover .fs-list-col,::ng-deep .fs-list .fs-list-body tr:hover td,::ng-deep .fs-list .fs-list-body .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list tbody tr:hover td,::ng-deep .fs-list tbody tr:hover .fs-list-col,::ng-deep .fs-list tbody .fs-list-row:hover td,::ng-deep .fs-list tbody .fs-list-row:hover .fs-list-col,::ng-deep .fs-list .fs-list-body tr:hover td,::ng-deep .fs-list .fs-list-body tr:hover .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row:hover td,::ng-deep .fs-list .fs-list-body .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list tbody tr:first-child td,::ng-deep .fs-list .fs-list-body tr:first-child td{border-top:2px solid #ddd}::ng-deep .fs-list tbody tr:last-child td,::ng-deep .fs-list .fs-list-body tr:last-child td{border-bottom:2px solid #ddd}::ng-deep .fs-list tbody td,::ng-deep .fs-list .fs-list-body td{border-top:1px solid #ddd}::ng-deep .fs-list thead tr,::ng-deep .fs-list thead .fs-list-row,::ng-deep .fs-list tbody tr,::ng-deep .fs-list tbody .fs-list-row,::ng-deep .fs-list tfoot tr,::ng-deep .fs-list tfoot .fs-list-row,::ng-deep .fs-list .fs-list-head tr,::ng-deep .fs-list .fs-list-head .fs-list-row,::ng-deep .fs-list .fs-list-body tr,::ng-deep .fs-list .fs-list-body .fs-list-row,::ng-deep .fs-list .fs-list-footer tr,::ng-deep .fs-list .fs-list-footer .fs-list-row{display:table-row}::ng-deep .fs-list thead tr td,::ng-deep .fs-list thead tr th,::ng-deep .fs-list thead tr .fs-list-col,::ng-deep .fs-list thead .fs-list-row td,::ng-deep .fs-list thead .fs-list-row th,::ng-deep .fs-list thead .fs-list-row .fs-list-col,::ng-deep .fs-list tbody tr td,::ng-deep .fs-list tbody tr th,::ng-deep .fs-list tbody tr .fs-list-col,::ng-deep .fs-list tbody .fs-list-row td,::ng-deep .fs-list tbody .fs-list-row th,::ng-deep .fs-list tbody .fs-list-row .fs-list-col,::ng-deep .fs-list tfoot tr td,::ng-deep .fs-list tfoot tr th,::ng-deep .fs-list tfoot tr .fs-list-col,::ng-deep .fs-list tfoot .fs-list-row td,::ng-deep .fs-list tfoot .fs-list-row th,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col,::ng-deep .fs-list .fs-list-head tr td,::ng-deep .fs-list .fs-list-head tr th,::ng-deep .fs-list .fs-list-head tr .fs-list-col,::ng-deep .fs-list .fs-list-head .fs-list-row td,::ng-deep .fs-list .fs-list-head .fs-list-row th,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col,::ng-deep .fs-list .fs-list-body tr td,::ng-deep .fs-list .fs-list-body tr th,::ng-deep .fs-list .fs-list-body tr .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row td,::ng-deep .fs-list .fs-list-body .fs-list-row th,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col,::ng-deep .fs-list .fs-list-footer tr td,::ng-deep .fs-list .fs-list-footer tr th,::ng-deep .fs-list .fs-list-footer tr .fs-list-col,::ng-deep .fs-list .fs-list-footer .fs-list-row td,::ng-deep .fs-list .fs-list-footer .fs-list-row th,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col{display:table-cell;padding:8px;vertical-align:middle;outline:none}::ng-deep .fs-list thead tr td.drag-col,::ng-deep .fs-list thead tr th.drag-col,::ng-deep .fs-list thead tr .fs-list-col.drag-col,::ng-deep .fs-list thead .fs-list-row td.drag-col,::ng-deep .fs-list thead .fs-list-row th.drag-col,::ng-deep .fs-list thead .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list tbody tr td.drag-col,::ng-deep .fs-list tbody tr th.drag-col,::ng-deep .fs-list tbody tr .fs-list-col.drag-col,::ng-deep .fs-list tbody .fs-list-row td.drag-col,::ng-deep .fs-list tbody .fs-list-row th.drag-col,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list tfoot tr td.drag-col,::ng-deep .fs-list tfoot tr th.drag-col,::ng-deep .fs-list tfoot tr .fs-list-col.drag-col,::ng-deep .fs-list tfoot .fs-list-row td.drag-col,::ng-deep .fs-list tfoot .fs-list-row th.drag-col,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-head tr td.drag-col,::ng-deep .fs-list .fs-list-head tr th.drag-col,::ng-deep .fs-list .fs-list-head tr .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-head .fs-list-row td.drag-col,::ng-deep .fs-list .fs-list-head .fs-list-row th.drag-col,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-body tr td.drag-col,::ng-deep .fs-list .fs-list-body tr th.drag-col,::ng-deep .fs-list .fs-list-body tr .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-body .fs-list-row td.drag-col,::ng-deep .fs-list .fs-list-body .fs-list-row th.drag-col,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-footer tr td.drag-col,::ng-deep .fs-list .fs-list-footer tr th.drag-col,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-footer .fs-list-row td.drag-col,::ng-deep .fs-list .fs-list-footer .fs-list-row th.drag-col,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.drag-col{width:24px;text-align:center;cursor:grab}::ng-deep .fs-list thead tr td.drag-col mat-icon,::ng-deep .fs-list thead tr th.drag-col mat-icon,::ng-deep .fs-list thead tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list thead .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list thead .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list thead .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tbody tr td.drag-col mat-icon,::ng-deep .fs-list tbody tr th.drag-col mat-icon,::ng-deep .fs-list tbody tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tbody .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list tbody .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tfoot tr td.drag-col mat-icon,::ng-deep .fs-list tfoot tr th.drag-col mat-icon,::ng-deep .fs-list tfoot tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tfoot .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list tfoot .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-head tr td.drag-col mat-icon,::ng-deep .fs-list .fs-list-head tr th.drag-col mat-icon,::ng-deep .fs-list .fs-list-head tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-body tr td.drag-col mat-icon,::ng-deep .fs-list .fs-list-body tr th.drag-col mat-icon,::ng-deep .fs-list .fs-list-body tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-body .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list .fs-list-body .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer tr td.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer tr th.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.drag-col mat-icon{display:flex}::ng-deep .fs-list thead tr td.row-actions,::ng-deep .fs-list thead tr th.row-actions,::ng-deep .fs-list thead tr .fs-list-col.row-actions,::ng-deep .fs-list thead .fs-list-row td.row-actions,::ng-deep .fs-list thead .fs-list-row th.row-actions,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list tbody tr td.row-actions,::ng-deep .fs-list tbody tr th.row-actions,::ng-deep .fs-list tbody tr .fs-list-col.row-actions,::ng-deep .fs-list tbody .fs-list-row td.row-actions,::ng-deep .fs-list tbody .fs-list-row th.row-actions,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list tfoot tr td.row-actions,::ng-deep .fs-list tfoot tr th.row-actions,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions,::ng-deep .fs-list tfoot .fs-list-row td.row-actions,::ng-deep .fs-list tfoot .fs-list-row th.row-actions,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-head tr td.row-actions,::ng-deep .fs-list .fs-list-head tr th.row-actions,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-body tr td.row-actions,::ng-deep .fs-list .fs-list-body tr th.row-actions,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-footer tr td.row-actions,::ng-deep .fs-list .fs-list-footer tr th.row-actions,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions{width:1%;white-space:nowrap;padding-right:10px;overflow:hidden}::ng-deep .fs-list thead tr td.row-actions .row-inline-action,::ng-deep .fs-list thead tr th.row-actions .row-inline-action,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action{margin-left:12px;display:inline-block}::ng-deep .fs-list thead tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child{margin-left:0}::ng-deep .fs-list thead tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list thead tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list thead tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead tr td.row-actions .row-menu-action,::ng-deep .fs-list thead tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list thead tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list thead tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead tr th.row-actions .row-menu-action,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody tr td.row-actions .row-menu-action,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody tr th.row-actions .row-menu-action,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot tr td.row-actions .row-menu-action,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot tr th.row-actions .row-menu-action,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-menu-action{width:35px;justify-content:center;align-items:center}::ng-deep .fs-list thead tr td.left,::ng-deep .fs-list thead tr th.left,::ng-deep .fs-list thead tr .fs-list-col.left,::ng-deep .fs-list thead .fs-list-row td.left,::ng-deep .fs-list thead .fs-list-row th.left,::ng-deep .fs-list thead .fs-list-row .fs-list-col.left,::ng-deep .fs-list tbody tr td.left,::ng-deep .fs-list tbody tr th.left,::ng-deep .fs-list tbody tr .fs-list-col.left,::ng-deep .fs-list tbody .fs-list-row td.left,::ng-deep .fs-list tbody .fs-list-row th.left,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.left,::ng-deep .fs-list tfoot tr td.left,::ng-deep .fs-list tfoot tr th.left,::ng-deep .fs-list tfoot tr .fs-list-col.left,::ng-deep .fs-list tfoot .fs-list-row td.left,::ng-deep .fs-list tfoot .fs-list-row th.left,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.left,::ng-deep .fs-list .fs-list-head tr td.left,::ng-deep .fs-list .fs-list-head tr th.left,::ng-deep .fs-list .fs-list-head tr .fs-list-col.left,::ng-deep .fs-list .fs-list-head .fs-list-row td.left,::ng-deep .fs-list .fs-list-head .fs-list-row th.left,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.left,::ng-deep .fs-list .fs-list-body tr td.left,::ng-deep .fs-list .fs-list-body tr th.left,::ng-deep .fs-list .fs-list-body tr .fs-list-col.left,::ng-deep .fs-list .fs-list-body .fs-list-row td.left,::ng-deep .fs-list .fs-list-body .fs-list-row th.left,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.left,::ng-deep .fs-list .fs-list-footer tr td.left,::ng-deep .fs-list .fs-list-footer tr th.left,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.left,::ng-deep .fs-list .fs-list-footer .fs-list-row td.left,::ng-deep .fs-list .fs-list-footer .fs-list-row th.left,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.left{text-align:left}::ng-deep .fs-list thead tr td.center,::ng-deep .fs-list thead tr th.center,::ng-deep .fs-list thead tr .fs-list-col.center,::ng-deep .fs-list thead .fs-list-row td.center,::ng-deep .fs-list thead .fs-list-row th.center,::ng-deep .fs-list thead .fs-list-row .fs-list-col.center,::ng-deep .fs-list tbody tr td.center,::ng-deep .fs-list tbody tr th.center,::ng-deep .fs-list tbody tr .fs-list-col.center,::ng-deep .fs-list tbody .fs-list-row td.center,::ng-deep .fs-list tbody .fs-list-row th.center,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.center,::ng-deep .fs-list tfoot tr td.center,::ng-deep .fs-list tfoot tr th.center,::ng-deep .fs-list tfoot tr .fs-list-col.center,::ng-deep .fs-list tfoot .fs-list-row td.center,::ng-deep .fs-list tfoot .fs-list-row th.center,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.center,::ng-deep .fs-list .fs-list-head tr td.center,::ng-deep .fs-list .fs-list-head tr th.center,::ng-deep .fs-list .fs-list-head tr .fs-list-col.center,::ng-deep .fs-list .fs-list-head .fs-list-row td.center,::ng-deep .fs-list .fs-list-head .fs-list-row th.center,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.center,::ng-deep .fs-list .fs-list-body tr td.center,::ng-deep .fs-list .fs-list-body tr th.center,::ng-deep .fs-list .fs-list-body tr .fs-list-col.center,::ng-deep .fs-list .fs-list-body .fs-list-row td.center,::ng-deep .fs-list .fs-list-body .fs-list-row th.center,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.center,::ng-deep .fs-list .fs-list-footer tr td.center,::ng-deep .fs-list .fs-list-footer tr th.center,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.center,::ng-deep .fs-list .fs-list-footer .fs-list-row td.center,::ng-deep .fs-list .fs-list-footer .fs-list-row th.center,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.center{text-align:center}::ng-deep .fs-list thead tr td.right,::ng-deep .fs-list thead tr th.right,::ng-deep .fs-list thead tr .fs-list-col.right,::ng-deep .fs-list thead .fs-list-row td.right,::ng-deep .fs-list thead .fs-list-row th.right,::ng-deep .fs-list thead .fs-list-row .fs-list-col.right,::ng-deep .fs-list tbody tr td.right,::ng-deep .fs-list tbody tr th.right,::ng-deep .fs-list tbody tr .fs-list-col.right,::ng-deep .fs-list tbody .fs-list-row td.right,::ng-deep .fs-list tbody .fs-list-row th.right,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.right,::ng-deep .fs-list tfoot tr td.right,::ng-deep .fs-list tfoot tr th.right,::ng-deep .fs-list tfoot tr .fs-list-col.right,::ng-deep .fs-list tfoot .fs-list-row td.right,::ng-deep .fs-list tfoot .fs-list-row th.right,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.right,::ng-deep .fs-list .fs-list-head tr td.right,::ng-deep .fs-list .fs-list-head tr th.right,::ng-deep .fs-list .fs-list-head tr .fs-list-col.right,::ng-deep .fs-list .fs-list-head .fs-list-row td.right,::ng-deep .fs-list .fs-list-head .fs-list-row th.right,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.right,::ng-deep .fs-list .fs-list-body tr td.right,::ng-deep .fs-list .fs-list-body tr th.right,::ng-deep .fs-list .fs-list-body tr .fs-list-col.right,::ng-deep .fs-list .fs-list-body .fs-list-row td.right,::ng-deep .fs-list .fs-list-body .fs-list-row th.right,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.right,::ng-deep .fs-list .fs-list-footer tr td.right,::ng-deep .fs-list .fs-list-footer tr th.right,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.right,::ng-deep .fs-list .fs-list-footer .fs-list-row td.right,::ng-deep .fs-list .fs-list-footer .fs-list-row th.right,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.right{text-align:right}::ng-deep .fs-list thead tr.draggable,::ng-deep .fs-list thead .fs-list-row.draggable,::ng-deep .fs-list tbody tr.draggable,::ng-deep .fs-list tbody .fs-list-row.draggable,::ng-deep .fs-list tfoot tr.draggable,::ng-deep .fs-list tfoot .fs-list-row.draggable,::ng-deep .fs-list .fs-list-head tr.draggable,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable,::ng-deep .fs-list .fs-list-body tr.draggable,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable,::ng-deep .fs-list .fs-list-footer tr.draggable,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable{position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}::ng-deep .fs-list thead tr.draggable td,::ng-deep .fs-list thead tr.draggable .fs-list-col,::ng-deep .fs-list thead .fs-list-row.draggable td,::ng-deep .fs-list thead .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list tbody tr.draggable td,::ng-deep .fs-list tbody tr.draggable .fs-list-col,::ng-deep .fs-list tbody .fs-list-row.draggable td,::ng-deep .fs-list tbody .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list tfoot tr.draggable td,::ng-deep .fs-list tfoot tr.draggable .fs-list-col,::ng-deep .fs-list tfoot .fs-list-row.draggable td,::ng-deep .fs-list tfoot .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-head tr.draggable td,::ng-deep .fs-list .fs-list-head tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-body tr.draggable td,::ng-deep .fs-list .fs-list-body tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-footer tr.draggable td,::ng-deep .fs-list .fs-list-footer tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable .fs-list-col{background-color:#f6f6f6;border:none}::ng-deep .fs-list .fs-list-header .heading-container{font-weight:600;font-size:18px;color:#212537;display:flex;flex-direction:column;justify-content:center}::ng-deep .fs-list .fs-list-header .heading{margin:0;line-height:36px}::ng-deep .fs-list .fs-list-header .subheading{display:block;font-size:14px;color:#929292;font-weight:400}::ng-deep .fs-list .fs-list-header .fs-list-actions{white-space:nowrap;float:right}::ng-deep .fs-list .fs-list-header .fs-list-actions .menu-button{width:36px;height:36px;line-height:36px}::ng-deep .fs-list .fs-list-header .action-button{margin-left:5px}::ng-deep .fs-list .fs-list-header .action-button:first-child{margin-left:0}::ng-deep .fs-list .fs-list-header .mat-button{margin-top:0;margin-bottom:0;margin-right:0}::ng-deep .fs-list .fs-list-container{width:100%}::ng-deep .fs-list .fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}::ng-deep .fs-list .fs-list-container.has-dragging thead th{border-bottom:2px solid #ddd}::ng-deep .fs-list .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list tfoot td{padding:8px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}::ng-deep .draggable-elem td{opacity:.2}::ng-deep .hidden-mobile-menu-action{display:none!important}::ng-deep .hidden-mobile{display:none!important}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}\n"], components: [{ type: i2$2.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "scrollable", "firstLoad"] }, { type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection"] }, { type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved"] }, { type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection"] }, { type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\"\n                [scrollable]=\"list.scrollable || list.paging.loadMoreEnabled\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table class=\"fs-list-table\" role=\"grid\" [fsListContentInit]=\"list.afterContentInit\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"list.heading || list.subheading || headingTemplate\">\n    <h2 class=\"heading\" *ngIf=\"list.heading|| headingTemplate\">\n      {{list.heading}}\n      <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n    </h2>\n    <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n      {{list.subheading}}\n      <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading .filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load .filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-header .heading{margin:0}.fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-header .fs-list-actions{white-space:nowrap;float:right}.fs-list-header .fs-list-actions .menu-button{width:36px;height:36px;line-height:36px}.fs-list-header .action-button{margin-left:5px}.fs-list-header .action-button:first-child{margin-left:0}.fs-list-header .mat-button{margin-top:0;margin-bottom:0;margin-right:0}.fs-list-table-container{width:100%;overflow:auto}::ng-deep .preview-block{position:fixed;height:30px;width:200px;background:grey;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .fs-list{display:block;width:100%}::ng-deep .fs-list table,::ng-deep .fs-list .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list thead,::ng-deep .fs-list .fs-list-head{display:table-header-group}::ng-deep .fs-list thead th,::ng-deep .fs-list thead .fs-list-col,::ng-deep .fs-list .fs-list-head th,::ng-deep .fs-list .fs-list-head .fs-list-col{color:#999;padding:8px;font-weight:normal;color:#8f8f8f;font-size:85%}::ng-deep .fs-list thead th.fs-list-col-selection,::ng-deep .fs-list thead .fs-list-col.fs-list-col-selection,::ng-deep .fs-list .fs-list-head th.fs-list-col-selection,::ng-deep .fs-list .fs-list-head .fs-list-col.fs-list-col-selection{width:1%;text-align:left}::ng-deep .fs-list thead th.sorting,::ng-deep .fs-list thead .fs-list-col.sorting,::ng-deep .fs-list .fs-list-head th.sorting,::ng-deep .fs-list .fs-list-head .fs-list-col.sorting{cursor:pointer}::ng-deep .fs-list thead th.sorting:hover,::ng-deep .fs-list thead .fs-list-col.sorting:hover,::ng-deep .fs-list .fs-list-head th.sorting:hover,::ng-deep .fs-list .fs-list-head .fs-list-col.sorting:hover{background-color:#f6f6f6}::ng-deep .fs-list thead th .wrap,::ng-deep .fs-list thead .fs-list-col .wrap,::ng-deep .fs-list .fs-list-head th .wrap,::ng-deep .fs-list .fs-list-head .fs-list-col .wrap{display:inline-flex;vertical-align:middle;white-space:nowrap}::ng-deep .fs-list thead th .wrap mat-icon,::ng-deep .fs-list thead .fs-list-col .wrap mat-icon,::ng-deep .fs-list .fs-list-head th .wrap mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-col .wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}::ng-deep .fs-list thead th .wrap .direction,::ng-deep .fs-list thead .fs-list-col .wrap .direction,::ng-deep .fs-list .fs-list-head th .wrap .direction,::ng-deep .fs-list .fs-list-head .fs-list-col .wrap .direction{margin-left:5px}::ng-deep .fs-list thead th.sorting,::ng-deep .fs-list thead .fs-list-col.sorting,::ng-deep .fs-list .fs-list-head th.sorting,::ng-deep .fs-list .fs-list-head .fs-list-col.sorting{background-image:none}::ng-deep .fs-list tbody,::ng-deep .fs-list .fs-list-body{display:table-row-group;position:relative}::ng-deep .fs-list tbody.drag-hidden .drag-col,::ng-deep .fs-list .fs-list-body.drag-hidden .drag-col{opacity:0!important;cursor:default}::ng-deep .fs-list tbody.disabled,::ng-deep .fs-list .fs-list-body.disabled{opacity:.4;pointer-events:none}::ng-deep .fs-list tbody td,::ng-deep .fs-list .fs-list-body td{border-top:1px solid #ddd}::ng-deep .fs-list tbody td,::ng-deep .fs-list tbody .fs-list-col,::ng-deep .fs-list .fs-list-body td,::ng-deep .fs-list .fs-list-body .fs-list-col{box-sizing:border-box}::ng-deep .fs-list tbody tr:hover td,::ng-deep .fs-list tbody .fs-list-row:hover .fs-list-col,::ng-deep .fs-list .fs-list-body tr:hover td,::ng-deep .fs-list .fs-list-body .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list tbody tr:hover td,::ng-deep .fs-list tbody tr:hover .fs-list-col,::ng-deep .fs-list tbody .fs-list-row:hover td,::ng-deep .fs-list tbody .fs-list-row:hover .fs-list-col,::ng-deep .fs-list .fs-list-body tr:hover td,::ng-deep .fs-list .fs-list-body tr:hover .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row:hover td,::ng-deep .fs-list .fs-list-body .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list tbody tr:first-child td,::ng-deep .fs-list .fs-list-body tr:first-child td{border-top:2px solid #ddd}::ng-deep .fs-list tbody tr:last-child td,::ng-deep .fs-list .fs-list-body tr:last-child td{border-bottom:2px solid #ddd}::ng-deep .fs-list thead tr,::ng-deep .fs-list thead .fs-list-row,::ng-deep .fs-list tbody tr,::ng-deep .fs-list tbody .fs-list-row,::ng-deep .fs-list tfoot tr,::ng-deep .fs-list tfoot .fs-list-row,::ng-deep .fs-list .fs-list-head tr,::ng-deep .fs-list .fs-list-head .fs-list-row,::ng-deep .fs-list .fs-list-body tr,::ng-deep .fs-list .fs-list-body .fs-list-row,::ng-deep .fs-list .fs-list-footer tr,::ng-deep .fs-list .fs-list-footer .fs-list-row{display:table-row}::ng-deep .fs-list thead tr.drag-hidden,::ng-deep .fs-list thead .fs-list-row.drag-hidden,::ng-deep .fs-list tbody tr.drag-hidden,::ng-deep .fs-list tbody .fs-list-row.drag-hidden,::ng-deep .fs-list tfoot tr.drag-hidden,::ng-deep .fs-list tfoot .fs-list-row.drag-hidden,::ng-deep .fs-list .fs-list-head tr.drag-hidden,::ng-deep .fs-list .fs-list-head .fs-list-row.drag-hidden,::ng-deep .fs-list .fs-list-body tr.drag-hidden,::ng-deep .fs-list .fs-list-body .fs-list-row.drag-hidden,::ng-deep .fs-list .fs-list-footer tr.drag-hidden,::ng-deep .fs-list .fs-list-footer .fs-list-row.drag-hidden{display:none}::ng-deep .fs-list thead tr.multiple-selection,::ng-deep .fs-list thead .fs-list-row.multiple-selection,::ng-deep .fs-list tbody tr.multiple-selection,::ng-deep .fs-list tbody .fs-list-row.multiple-selection,::ng-deep .fs-list tfoot tr.multiple-selection,::ng-deep .fs-list tfoot .fs-list-row.multiple-selection,::ng-deep .fs-list .fs-list-head tr.multiple-selection,::ng-deep .fs-list .fs-list-head .fs-list-row.multiple-selection,::ng-deep .fs-list .fs-list-body tr.multiple-selection,::ng-deep .fs-list .fs-list-body .fs-list-row.multiple-selection,::ng-deep .fs-list .fs-list-footer tr.multiple-selection,::ng-deep .fs-list .fs-list-footer .fs-list-row.multiple-selection{background-color:#2196f380}::ng-deep .fs-list thead tr.multiple-selection .fs-list-col,::ng-deep .fs-list thead .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list tbody tr.multiple-selection .fs-list-col,::ng-deep .fs-list tbody .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list tfoot tr.multiple-selection .fs-list-col,::ng-deep .fs-list tfoot .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list .fs-list-head tr.multiple-selection .fs-list-col,::ng-deep .fs-list .fs-list-head .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list .fs-list-body tr.multiple-selection .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list .fs-list-footer tr.multiple-selection .fs-list-col,::ng-deep .fs-list .fs-list-footer .fs-list-row.multiple-selection .fs-list-col{background-color:#2196f380}::ng-deep .fs-list thead tr td,::ng-deep .fs-list thead tr th,::ng-deep .fs-list thead tr .fs-list-col,::ng-deep .fs-list thead .fs-list-row td,::ng-deep .fs-list thead .fs-list-row th,::ng-deep .fs-list thead .fs-list-row .fs-list-col,::ng-deep .fs-list tbody tr td,::ng-deep .fs-list tbody tr th,::ng-deep .fs-list tbody tr .fs-list-col,::ng-deep .fs-list tbody .fs-list-row td,::ng-deep .fs-list tbody .fs-list-row th,::ng-deep .fs-list tbody .fs-list-row .fs-list-col,::ng-deep .fs-list tfoot tr td,::ng-deep .fs-list tfoot tr th,::ng-deep .fs-list tfoot tr .fs-list-col,::ng-deep .fs-list tfoot .fs-list-row td,::ng-deep .fs-list tfoot .fs-list-row th,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col,::ng-deep .fs-list .fs-list-head tr td,::ng-deep .fs-list .fs-list-head tr th,::ng-deep .fs-list .fs-list-head tr .fs-list-col,::ng-deep .fs-list .fs-list-head .fs-list-row td,::ng-deep .fs-list .fs-list-head .fs-list-row th,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col,::ng-deep .fs-list .fs-list-body tr td,::ng-deep .fs-list .fs-list-body tr th,::ng-deep .fs-list .fs-list-body tr .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row td,::ng-deep .fs-list .fs-list-body .fs-list-row th,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col,::ng-deep .fs-list .fs-list-footer tr td,::ng-deep .fs-list .fs-list-footer tr th,::ng-deep .fs-list .fs-list-footer tr .fs-list-col,::ng-deep .fs-list .fs-list-footer .fs-list-row td,::ng-deep .fs-list .fs-list-footer .fs-list-row th,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col{display:table-cell;padding:8px;vertical-align:middle;outline:none}::ng-deep .fs-list thead tr td.drag-col,::ng-deep .fs-list thead tr th.drag-col,::ng-deep .fs-list thead tr .fs-list-col.drag-col,::ng-deep .fs-list thead .fs-list-row td.drag-col,::ng-deep .fs-list thead .fs-list-row th.drag-col,::ng-deep .fs-list thead .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list tbody tr td.drag-col,::ng-deep .fs-list tbody tr th.drag-col,::ng-deep .fs-list tbody tr .fs-list-col.drag-col,::ng-deep .fs-list tbody .fs-list-row td.drag-col,::ng-deep .fs-list tbody .fs-list-row th.drag-col,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list tfoot tr td.drag-col,::ng-deep .fs-list tfoot tr th.drag-col,::ng-deep .fs-list tfoot tr .fs-list-col.drag-col,::ng-deep .fs-list tfoot .fs-list-row td.drag-col,::ng-deep .fs-list tfoot .fs-list-row th.drag-col,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-head tr td.drag-col,::ng-deep .fs-list .fs-list-head tr th.drag-col,::ng-deep .fs-list .fs-list-head tr .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-head .fs-list-row td.drag-col,::ng-deep .fs-list .fs-list-head .fs-list-row th.drag-col,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-body tr td.drag-col,::ng-deep .fs-list .fs-list-body tr th.drag-col,::ng-deep .fs-list .fs-list-body tr .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-body .fs-list-row td.drag-col,::ng-deep .fs-list .fs-list-body .fs-list-row th.drag-col,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-footer tr td.drag-col,::ng-deep .fs-list .fs-list-footer tr th.drag-col,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.drag-col,::ng-deep .fs-list .fs-list-footer .fs-list-row td.drag-col,::ng-deep .fs-list .fs-list-footer .fs-list-row th.drag-col,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.drag-col{width:24px;text-align:center;cursor:grab}::ng-deep .fs-list thead tr td.drag-col.drag-disabled,::ng-deep .fs-list thead tr th.drag-col.drag-disabled,::ng-deep .fs-list thead tr .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list thead .fs-list-row td.drag-col.drag-disabled,::ng-deep .fs-list thead .fs-list-row th.drag-col.drag-disabled,::ng-deep .fs-list thead .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list tbody tr td.drag-col.drag-disabled,::ng-deep .fs-list tbody tr th.drag-col.drag-disabled,::ng-deep .fs-list tbody tr .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list tbody .fs-list-row td.drag-col.drag-disabled,::ng-deep .fs-list tbody .fs-list-row th.drag-col.drag-disabled,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list tfoot tr td.drag-col.drag-disabled,::ng-deep .fs-list tfoot tr th.drag-col.drag-disabled,::ng-deep .fs-list tfoot tr .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list tfoot .fs-list-row td.drag-col.drag-disabled,::ng-deep .fs-list tfoot .fs-list-row th.drag-col.drag-disabled,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-head tr td.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-head tr th.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-head tr .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-head .fs-list-row td.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-head .fs-list-row th.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-body tr td.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-body tr th.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-body tr .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-body .fs-list-row td.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-body .fs-list-row th.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-footer tr td.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-footer tr th.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-footer .fs-list-row td.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-footer .fs-list-row th.drag-col.drag-disabled,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.drag-col.drag-disabled{opacity:.4;cursor:no-drop}::ng-deep .fs-list thead tr td.drag-col mat-icon,::ng-deep .fs-list thead tr th.drag-col mat-icon,::ng-deep .fs-list thead tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list thead .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list thead .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list thead .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tbody tr td.drag-col mat-icon,::ng-deep .fs-list tbody tr th.drag-col mat-icon,::ng-deep .fs-list tbody tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tbody .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list tbody .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tfoot tr td.drag-col mat-icon,::ng-deep .fs-list tfoot tr th.drag-col mat-icon,::ng-deep .fs-list tfoot tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list tfoot .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list tfoot .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-head tr td.drag-col mat-icon,::ng-deep .fs-list .fs-list-head tr th.drag-col mat-icon,::ng-deep .fs-list .fs-list-head tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-body tr td.drag-col mat-icon,::ng-deep .fs-list .fs-list-body tr th.drag-col mat-icon,::ng-deep .fs-list .fs-list-body tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-body .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list .fs-list-body .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer tr td.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer tr th.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row td.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row th.drag-col mat-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.drag-col mat-icon{display:flex}::ng-deep .fs-list thead tr td.row-actions,::ng-deep .fs-list thead tr th.row-actions,::ng-deep .fs-list thead tr .fs-list-col.row-actions,::ng-deep .fs-list thead .fs-list-row td.row-actions,::ng-deep .fs-list thead .fs-list-row th.row-actions,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list tbody tr td.row-actions,::ng-deep .fs-list tbody tr th.row-actions,::ng-deep .fs-list tbody tr .fs-list-col.row-actions,::ng-deep .fs-list tbody .fs-list-row td.row-actions,::ng-deep .fs-list tbody .fs-list-row th.row-actions,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list tfoot tr td.row-actions,::ng-deep .fs-list tfoot tr th.row-actions,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions,::ng-deep .fs-list tfoot .fs-list-row td.row-actions,::ng-deep .fs-list tfoot .fs-list-row th.row-actions,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-head tr td.row-actions,::ng-deep .fs-list .fs-list-head tr th.row-actions,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-body tr td.row-actions,::ng-deep .fs-list .fs-list-body tr th.row-actions,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-footer tr td.row-actions,::ng-deep .fs-list .fs-list-footer tr th.row-actions,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions{width:1%;white-space:nowrap;padding-right:10px;overflow:hidden}::ng-deep .fs-list thead tr td.row-actions .row-inline-action,::ng-deep .fs-list thead tr th.row-actions .row-inline-action,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action{margin-left:12px;display:inline-block}::ng-deep .fs-list thead tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action:first-child,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child{margin-left:0}::ng-deep .fs-list thead tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list thead tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list thead tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead tr td.row-actions .row-menu-action,::ng-deep .fs-list thead tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list thead tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list thead tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead tr th.row-actions .row-menu-action,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list thead .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody tr td.row-actions .row-menu-action,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody tr th.row-actions .row-menu-action,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot tr td.row-actions .row-menu-action,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot tr th.row-actions .row-menu-action,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head tr td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body tr td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer tr td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row td.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row th.row-actions .row-menu-action,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-menu-action{width:35px;justify-content:center;align-items:center}::ng-deep .fs-list thead tr td.left,::ng-deep .fs-list thead tr th.left,::ng-deep .fs-list thead tr .fs-list-col.left,::ng-deep .fs-list thead .fs-list-row td.left,::ng-deep .fs-list thead .fs-list-row th.left,::ng-deep .fs-list thead .fs-list-row .fs-list-col.left,::ng-deep .fs-list tbody tr td.left,::ng-deep .fs-list tbody tr th.left,::ng-deep .fs-list tbody tr .fs-list-col.left,::ng-deep .fs-list tbody .fs-list-row td.left,::ng-deep .fs-list tbody .fs-list-row th.left,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.left,::ng-deep .fs-list tfoot tr td.left,::ng-deep .fs-list tfoot tr th.left,::ng-deep .fs-list tfoot tr .fs-list-col.left,::ng-deep .fs-list tfoot .fs-list-row td.left,::ng-deep .fs-list tfoot .fs-list-row th.left,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.left,::ng-deep .fs-list .fs-list-head tr td.left,::ng-deep .fs-list .fs-list-head tr th.left,::ng-deep .fs-list .fs-list-head tr .fs-list-col.left,::ng-deep .fs-list .fs-list-head .fs-list-row td.left,::ng-deep .fs-list .fs-list-head .fs-list-row th.left,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.left,::ng-deep .fs-list .fs-list-body tr td.left,::ng-deep .fs-list .fs-list-body tr th.left,::ng-deep .fs-list .fs-list-body tr .fs-list-col.left,::ng-deep .fs-list .fs-list-body .fs-list-row td.left,::ng-deep .fs-list .fs-list-body .fs-list-row th.left,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.left,::ng-deep .fs-list .fs-list-footer tr td.left,::ng-deep .fs-list .fs-list-footer tr th.left,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.left,::ng-deep .fs-list .fs-list-footer .fs-list-row td.left,::ng-deep .fs-list .fs-list-footer .fs-list-row th.left,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.left{text-align:left}::ng-deep .fs-list thead tr td.center,::ng-deep .fs-list thead tr th.center,::ng-deep .fs-list thead tr .fs-list-col.center,::ng-deep .fs-list thead .fs-list-row td.center,::ng-deep .fs-list thead .fs-list-row th.center,::ng-deep .fs-list thead .fs-list-row .fs-list-col.center,::ng-deep .fs-list tbody tr td.center,::ng-deep .fs-list tbody tr th.center,::ng-deep .fs-list tbody tr .fs-list-col.center,::ng-deep .fs-list tbody .fs-list-row td.center,::ng-deep .fs-list tbody .fs-list-row th.center,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.center,::ng-deep .fs-list tfoot tr td.center,::ng-deep .fs-list tfoot tr th.center,::ng-deep .fs-list tfoot tr .fs-list-col.center,::ng-deep .fs-list tfoot .fs-list-row td.center,::ng-deep .fs-list tfoot .fs-list-row th.center,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.center,::ng-deep .fs-list .fs-list-head tr td.center,::ng-deep .fs-list .fs-list-head tr th.center,::ng-deep .fs-list .fs-list-head tr .fs-list-col.center,::ng-deep .fs-list .fs-list-head .fs-list-row td.center,::ng-deep .fs-list .fs-list-head .fs-list-row th.center,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.center,::ng-deep .fs-list .fs-list-body tr td.center,::ng-deep .fs-list .fs-list-body tr th.center,::ng-deep .fs-list .fs-list-body tr .fs-list-col.center,::ng-deep .fs-list .fs-list-body .fs-list-row td.center,::ng-deep .fs-list .fs-list-body .fs-list-row th.center,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.center,::ng-deep .fs-list .fs-list-footer tr td.center,::ng-deep .fs-list .fs-list-footer tr th.center,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.center,::ng-deep .fs-list .fs-list-footer .fs-list-row td.center,::ng-deep .fs-list .fs-list-footer .fs-list-row th.center,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.center{text-align:center}::ng-deep .fs-list thead tr td.right,::ng-deep .fs-list thead tr th.right,::ng-deep .fs-list thead tr .fs-list-col.right,::ng-deep .fs-list thead .fs-list-row td.right,::ng-deep .fs-list thead .fs-list-row th.right,::ng-deep .fs-list thead .fs-list-row .fs-list-col.right,::ng-deep .fs-list tbody tr td.right,::ng-deep .fs-list tbody tr th.right,::ng-deep .fs-list tbody tr .fs-list-col.right,::ng-deep .fs-list tbody .fs-list-row td.right,::ng-deep .fs-list tbody .fs-list-row th.right,::ng-deep .fs-list tbody .fs-list-row .fs-list-col.right,::ng-deep .fs-list tfoot tr td.right,::ng-deep .fs-list tfoot tr th.right,::ng-deep .fs-list tfoot tr .fs-list-col.right,::ng-deep .fs-list tfoot .fs-list-row td.right,::ng-deep .fs-list tfoot .fs-list-row th.right,::ng-deep .fs-list tfoot .fs-list-row .fs-list-col.right,::ng-deep .fs-list .fs-list-head tr td.right,::ng-deep .fs-list .fs-list-head tr th.right,::ng-deep .fs-list .fs-list-head tr .fs-list-col.right,::ng-deep .fs-list .fs-list-head .fs-list-row td.right,::ng-deep .fs-list .fs-list-head .fs-list-row th.right,::ng-deep .fs-list .fs-list-head .fs-list-row .fs-list-col.right,::ng-deep .fs-list .fs-list-body tr td.right,::ng-deep .fs-list .fs-list-body tr th.right,::ng-deep .fs-list .fs-list-body tr .fs-list-col.right,::ng-deep .fs-list .fs-list-body .fs-list-row td.right,::ng-deep .fs-list .fs-list-body .fs-list-row th.right,::ng-deep .fs-list .fs-list-body .fs-list-row .fs-list-col.right,::ng-deep .fs-list .fs-list-footer tr td.right,::ng-deep .fs-list .fs-list-footer tr th.right,::ng-deep .fs-list .fs-list-footer tr .fs-list-col.right,::ng-deep .fs-list .fs-list-footer .fs-list-row td.right,::ng-deep .fs-list .fs-list-footer .fs-list-row th.right,::ng-deep .fs-list .fs-list-footer .fs-list-row .fs-list-col.right{text-align:right}::ng-deep .fs-list thead tr.draggable,::ng-deep .fs-list thead .fs-list-row.draggable,::ng-deep .fs-list tbody tr.draggable,::ng-deep .fs-list tbody .fs-list-row.draggable,::ng-deep .fs-list tfoot tr.draggable,::ng-deep .fs-list tfoot .fs-list-row.draggable,::ng-deep .fs-list .fs-list-head tr.draggable,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable,::ng-deep .fs-list .fs-list-body tr.draggable,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable,::ng-deep .fs-list .fs-list-footer tr.draggable,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable{position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px;background-color:#f6f6f6}::ng-deep .fs-list thead tr.draggable td,::ng-deep .fs-list thead tr.draggable .fs-list-col,::ng-deep .fs-list thead .fs-list-row.draggable td,::ng-deep .fs-list thead .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list tbody tr.draggable td,::ng-deep .fs-list tbody tr.draggable .fs-list-col,::ng-deep .fs-list tbody .fs-list-row.draggable td,::ng-deep .fs-list tbody .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list tfoot tr.draggable td,::ng-deep .fs-list tfoot tr.draggable .fs-list-col,::ng-deep .fs-list tfoot .fs-list-row.draggable td,::ng-deep .fs-list tfoot .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-head tr.draggable td,::ng-deep .fs-list .fs-list-head tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-body tr.draggable td,::ng-deep .fs-list .fs-list-body tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-footer tr.draggable td,::ng-deep .fs-list .fs-list-footer tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable .fs-list-col{border:none}::ng-deep .fs-list .fs-list-container.has-dragging thead th{border-bottom:2px solid #ddd}::ng-deep .fs-list .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list tfoot td{padding:8px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}::ng-deep .draggable-elem td{opacity:.2}::ng-deep .hidden-mobile-menu-action{display:none!important}::ng-deep .hidden-mobile{display:none!important}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}\n"], components: [{ type: i2$2.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "scrollable", "firstLoad"] }, { type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection"] }, { type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved"] }, { type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection"] }, { type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fs-list',
                     templateUrl: 'list.component.html',
-                    styleUrls: [
-                        './list.component.scss',
-                    ],
+                    styleUrls: ['./list.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         GroupExpandNotifierService,
@@ -5239,18 +5417,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         ReorderController,
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: ReorderController }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: ReorderController }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [FS_LIST_DEFAULT_CONFIG]
                 }] }, { type: i2$4.FsScrollService, decorators: [{
                     type: Optional
-                }] }, { type: i3$3.SelectionDialog }, { type: i4.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i6$1.Router }, { type: i6$1.ActivatedRoute }, { type: PersistanceController }, { type: i3$1.Location }, { type: i4.MatDialogRef, decorators: [{
+                }] }, { type: i1.MatDialogRef, decorators: [{
                     type: Optional
-                }] }, { type: i9.DrawerRef, decorators: [{
+                }] }, { type: i4$2.DrawerRef, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { classFsList: [{
+                }] }, { type: i0.ElementRef }, { type: i5.SelectionDialog }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i7.Router }, { type: i7.ActivatedRoute }, { type: PersistanceController }, { type: i3$1.Location }]; }, propDecorators: { classFsList: [{
                 type: HostBinding,
                 args: ['class.fs-list']
             }], config: [{
@@ -5269,6 +5447,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], _emptyStateTemplate: [{
                 type: ContentChild,
                 args: [FsListEmptyStateDirective, { read: TemplateRef }]
+            }], headingTemplate: [{
+                type: ContentChild,
+                args: [FsListHeadingDirective, { read: TemplateRef }]
+            }], subheadingTemplate: [{
+                type: ContentChild,
+                args: [FsListSubheadingDirective, { read: TemplateRef }]
             }] } });
 
 class FsListManageSavedFiltersComponent {
@@ -5289,7 +5473,6 @@ class FsListManageSavedFiltersComponent {
             paging: false,
             reorder: {
                 position: ReorderPosition.Left,
-                strategy: ReorderStrategy.Always,
                 moveDrop: () => {
                     return this._reorderReady;
                 },
@@ -5331,7 +5514,7 @@ class FsListManageSavedFiltersComponent {
     }
 }
 FsListManageSavedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListManageSavedFiltersComponent, deps: [{ token: i2$2.ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
-FsListManageSavedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsListManageSavedFiltersComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage Saved Filters\n</h1>\n<div mat-dialog-content>\n  <fs-list [config]=\"config\">\n    <fs-list-column name=\"name\" title=\"Name\">\n      <ng-template fs-list-cell let-row=\"row\">\n        {{ row.name }}\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n</div>\n<div mat-dialog-actions>\n  <button mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\"\n          color=\"primary\">\n    Done\n  </button>\n</div>\n", components: [{ type: FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+FsListManageSavedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsListManageSavedFiltersComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage Saved Filters\n</h1>\n<div mat-dialog-content>\n  <fs-list [config]=\"config\">\n    <fs-list-column name=\"name\" title=\"Name\">\n      <ng-template fs-list-cell let-row=\"row\">\n        {{ row.name }}\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n</div>\n<div mat-dialog-actions>\n  <button mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\"\n          color=\"primary\">\n    Done\n  </button>\n</div>\n", components: [{ type: FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListManageSavedFiltersComponent, decorators: [{
             type: Component,
             args: [{
@@ -5399,8 +5582,12 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsListEmptyStateDirective,
         FsListContentDirective,
         FsListContentInitDirective,
+        FsListSubheadingDirective,
+        FsListHeadingDirective,
         // Dialog
-        CustomizeColsDialogComponent], imports: [CommonModule,
+        CustomizeColsDialogComponent,
+        //Pipes
+        ActionLabelPipe], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
@@ -5410,7 +5597,6 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         MatRippleModule,
         FsFilterModule,
         FsMenuModule,
-        FlexLayoutModule,
         FsScrollModule,
         FsPromptModule,
         MatDialogModule,
@@ -5428,8 +5614,10 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsListGroupFooterDirective,
         FsListGroupExpandTriggerDirective,
         FsListEmptyStateDirective,
-        FsListContentDirective] });
-FsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, providers: [], imports: [[
+        FsListContentDirective,
+        FsListSubheadingDirective,
+        FsListHeadingDirective] });
+FsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, imports: [[
             CommonModule,
             RouterModule,
             MatButtonModule,
@@ -5440,7 +5628,6 @@ FsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             MatRippleModule,
             FsFilterModule,
             FsMenuModule,
-            FlexLayoutModule,
             FsScrollModule,
             FsPromptModule,
             MatDialogModule,
@@ -5462,7 +5649,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         MatRippleModule,
                         FsFilterModule,
                         FsMenuModule,
-                        FlexLayoutModule,
                         FsScrollModule,
                         FsPromptModule,
                         MatDialogModule,
@@ -5503,10 +5689,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsListEmptyStateDirective,
                         FsListContentDirective,
                         FsListContentInitDirective,
+                        FsListSubheadingDirective,
+                        FsListHeadingDirective,
                         // Dialog
                         CustomizeColsDialogComponent,
+                        //Pipes
+                        ActionLabelPipe,
                     ],
-                    providers: [],
                     exports: [
                         FsListComponent,
                         FsRowComponent,
@@ -5521,6 +5710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsListGroupExpandTriggerDirective,
                         FsListEmptyStateDirective,
                         FsListContentDirective,
+                        FsListSubheadingDirective,
+                        FsListHeadingDirective,
                     ],
                 }]
         }] });
@@ -5536,5 +5727,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, FsListContentDirective, FsListEmptyStateDirective, FsListFooterDirective, FsListGroupExpandTriggerDirective, FsListGroupFooterDirective, FsListGroupHeaderDirective, FsListHeaderDirective, FsListLoaderComponent, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig };
+export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListContentDirective, FsListEmptyStateDirective, FsListFooterDirective, FsListGroupExpandTriggerDirective, FsListGroupFooterDirective, FsListGroupHeaderDirective, FsListHeaderDirective, FsListHeadingDirective, FsListLoaderComponent, FsListModule, FsListState, FsListSubheadingDirective, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig };
 //# sourceMappingURL=firestitch-list.js.map