@firestitch/list 9.12.5 → 12.1.0

package/fesm2015/firestitch-list.js

@@ -1,29 +1,46 @@
-import { __decorate, __metadata, __param } from 'tslib';
-import { TemplateRef, Injectable, Input, Directive, HostListener, ContentChild, ContentChildren, QueryList, InjectionToken, Inject, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Optional, ChangeDetectorRef, HostBinding, Output, ViewChild, NgZone, KeyValueDiffers, Renderer2, ViewChildren, IterableDiffers, ViewContainerRef, NgModule } from '@angular/core';
-import { Location, CommonModule } from '@angular/common';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+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 * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6$1 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 { MatRippleModule } from '@angular/material/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import * as i4 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';
 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 { ItemType, FilterComponent, ExternalParamsController as ExternalParamsController$1, FsFilterModule } from '@firestitch/filter';
-import { FsScrollService, FsScrollModule } from '@firestitch/scroll';
+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 { FsPrompt, FsPromptModule } from '@firestitch/prompt';
+import * as i1$1 from '@firestitch/prompt';
+import { FsPromptModule } from '@firestitch/prompt';
+import * as i4$1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
-import { isString, isObject, isBoolean, isNumber, isFunction, get, cloneDeep, mergeWith, random, merge as merge$1 } from 'lodash-es';
-import { Subject, BehaviorSubject, Observable, merge, from, combineLatest, of } from 'rxjs';
-import { takeUntil, tap, distinctUntilChanged, take, map, debounceTime, switchMap, mapTo, catchError, shareReplay, skip, filter } from 'rxjs/operators';
-import { SelectionDialog } from '@firestitch/selection';
+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 { getNormalizedPath } from '@firestitch/common';
-import { DrawerRef } from '@firestitch/drawer';
+import * as i9 from '@firestitch/drawer';
+import { __decorate, __metadata } from 'tslib';
 import { Model, Alias } from 'tsmodels';
-import { FsPersistanceStore, FsStore } from '@firestitch/store';
+import * as i1 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 extends Model {
     constructor(config = {}) {
@@ -119,9 +136,8 @@ const ALLOWED_DEFAULTS = [
     'align',
     'class'
 ];
-class Column extends Model {
-    constructor(colConfig = {}, colDefaults = false) {
-        super();
+class Column {
+    constructor(colConfig, colDefaults = false) {
         this.headerConfigs = new StyleConfig();
         this.groupCellConfigs = new StyleConfig();
         this.cellConfigs = new StyleConfig();
@@ -131,10 +147,46 @@ class Column extends Model {
         this.cellColspanned = false;
         this.footerColspanned = false;
         this._ordered = false;
-        this._fromJSON(colConfig);
+        this._parseConfig(colConfig);
         this.colStyles = new StyleConfig(colConfig);
         this.mergeWithColumnDefaults(colDefaults);
     }
+    set title(value) {
+        this._attributes.title = value;
+    }
+    get title() {
+        return this._attributes.title;
+    }
+    get name() {
+        return this._attributes.name;
+    }
+    get customize() {
+        return this._attributes.customize;
+    }
+    get width() {
+        return this._attributes.width;
+    }
+    set sortable(value) {
+        this._attributes.sortable = value;
+    }
+    get sortable() {
+        return this._attributes.sortable;
+    }
+    get sortableDefault() {
+        return this._attributes.sortableDefault;
+    }
+    set sortingDirection(value) {
+        this._attributes.direction = value;
+    }
+    get sortingDirection() {
+        return this._attributes.direction;
+    }
+    get visible() {
+        return this._attributes.visible;
+    }
+    get visible$() {
+        return this._attributes.visible$;
+    }
     get direction() {
         return (this.sortingDirection === SortingDirection.asc) ? 'asc' : 'desc';
     }
@@ -150,12 +202,6 @@ class Column extends Model {
             this.sortingDirection = SortingDirection.asc;
         }
     }
-    _fromJSON(value) {
-        super._fromJSON(value);
-        if (this.sortableDefault) {
-            this.sortable = true;
-        }
-    }
     /**
      * Merge with defaults with existing config
      * @param defaults
@@ -214,79 +260,22 @@ class Column extends Model {
             this.sortingDirection = SortingDirection.asc;
         }
     }
+    updateVisibility(value) {
+        this._attributes.visible = value;
+    }
+    _parseConfig(config) {
+        this._attributes = config.attributes;
+        this.headerTemplate = config.headerTemplate;
+        this.groupCellTemplate = config.groupCellTemplate;
+        this.cellTemplate = config.cellTemplate;
+        this.footerTemplate = config.footerTemplate;
+        this.headerConfigs = new StyleConfig(config.headerConfigs);
+        this.groupCellConfigs = new StyleConfig(config.groupCellConfigs);
+        this.cellConfigs = new StyleConfig(config.cellConfigs);
+        this.footerConfigs = new StyleConfig(config.footerConfigs);
+        this.expandTrigger = config.expandTrigger;
+    }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], Column.prototype, "title", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], Column.prototype, "name", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], Column.prototype, "show", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], Column.prototype, "customize", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], Column.prototype, "width", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], Column.prototype, "sortable", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], Column.prototype, "sortableDefault", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", TemplateRef)
-], Column.prototype, "headerTemplate", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", TemplateRef)
-], Column.prototype, "groupCellTemplate", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", TemplateRef)
-], Column.prototype, "cellTemplate", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", TemplateRef)
-], Column.prototype, "footerTemplate", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", TemplateRef)
-], Column.prototype, "expandTrigger", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", TemplateRef)
-], Column.prototype, "superTriger", void 0);
-__decorate([
-    Alias('headerConfigs', StyleConfig),
-    __metadata("design:type", StyleConfig)
-], Column.prototype, "headerConfigs", void 0);
-__decorate([
-    Alias('groupCellConfigs', StyleConfig),
-    __metadata("design:type", StyleConfig)
-], Column.prototype, "groupCellConfigs", void 0);
-__decorate([
-    Alias('cellConfigs', StyleConfig),
-    __metadata("design:type", StyleConfig)
-], Column.prototype, "cellConfigs", void 0);
-__decorate([
-    Alias('footerConfigs', StyleConfig),
-    __metadata("design:type", StyleConfig)
-], Column.prototype, "footerConfigs", void 0);
-__decorate([
-    Alias('direction'),
-    __metadata("design:type", String)
-], Column.prototype, "sortingDirection", void 0);
 
 var ActionType;
 (function (ActionType) {
@@ -438,7 +427,8 @@ __decorate([
 
 class ColumnsController {
     constructor() {
-        this.visibleColumns = [];
+        this._visibleColumns$ = new BehaviorSubject([]);
+        this._visibleColumnsShared$ = this._visibleColumns$.pipe();
         this._theadClass = '';
         this._isConfigured = false;
         this._loadFnConfigured = false;
@@ -447,11 +437,18 @@ class ColumnsController {
         this._hasHeader = false;
         this._hasFooter = false;
         this._columns = [];
+        this._columnsUpdated$ = new Subject();
         this._destroy$ = new Subject();
     }
     get columns() {
         return this._columns.slice();
     }
+    get visibleColumns() {
+        return this._visibleColumns$.getValue();
+    }
+    get visibleColumns$() {
+        return this._visibleColumnsShared$;
+    }
     get columnsForDialog() {
         const hasCustomTitle = !!this._customizeFieldTitleFn;
         const hasCustomDisabledStatus = !!this._customizeFieldDisabledFn;
@@ -466,12 +463,12 @@ class ColumnsController {
                 ? this._customizeFieldDisabledFn(column.name)
                 : false;
             const tooltip = hasCustomTooltip
-                ? this._columnTooltipFn(column.name, column.show, disabled)
+                ? this._columnTooltipFn(column.name, column.visible, disabled)
                 : void 0;
             return {
                 template: column.headerTemplate,
                 name: column.name,
-                show: column.show,
+                show: column.visible,
                 title: title,
                 disabled: disabled,
                 tooltip: tooltip,
@@ -558,6 +555,7 @@ class ColumnsController {
         this._updateColspans('cellConfigs', 'cellColspanned');
         this._updateColspans('footerConfigs', 'footerColspanned');
         this.updateVisibleColumns();
+        this._listenColumnVisibilityUpdates();
     }
     /**
      * Load visiblity config for columns from remote
@@ -573,8 +571,7 @@ class ColumnsController {
      * Set visible columns based on current columns show status
      */
     updateVisibleColumns() {
-        this.visibleColumns =
-            this._columns.filter((column) => column.show) || [];
+        this._visibleColumns$.next(this._columns.filter((column) => column.visible) || []);
     }
     /**
      * Update visibility based on passed config
@@ -585,7 +582,7 @@ class ColumnsController {
             const col = this._columns
                 .find((column) => column.name === columnConfig.name);
             if (col) {
-                col.show = columnConfig.show;
+                col.updateVisibility(columnConfig.show);
             }
         });
         this.updateVisibleColumns();
@@ -593,12 +590,24 @@ class ColumnsController {
     destroy() {
         this._destroy$.next();
         this._destroy$.complete();
+        this._columnsUpdated$.complete();
         this._columns = void 0;
-        this.visibleColumns = void 0;
+        this._visibleColumns$ = void 0;
         this._defaultConfigs = void 0;
         this._loadFn = void 0;
         this._changeFn = void 0;
     }
+    _listenColumnVisibilityUpdates() {
+        this._columnsUpdated$.next();
+        const columnsVisibility = this._columns.map((column) => {
+            return column.visible$.pipe(skip(1));
+        });
+        merge(...columnsVisibility)
+            .pipe(takeUntil(this._columnsUpdated$), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.updateVisibleColumns();
+        });
+    }
     _updateColspans(config, updateFlag) {
         this._columns.forEach((col, index) => {
             if (col[config].colspan !== void 0) {
@@ -923,7 +932,7 @@ class DataController {
         if (group) {
             this._groupByFn = group.groupBy;
             this._compareByFn = group.compareBy;
-            this._initialExpand = (_a = group.initialExpand, (_a !== null && _a !== void 0 ? _a : true));
+            this._initialExpand = (_a = group.initialExpand) !== null && _a !== void 0 ? _a : true;
             // group mode enabled by default
             this._groupEnabled = (group.enabled !== void 0)
                 ? group.enabled
@@ -1615,7 +1624,7 @@ class PaginationController {
     _fromParams(params) {
         var _a;
         if (!this.loadMoreEnabled) {
-            this.limit = (_a = params.limit, (_a !== null && _a !== void 0 ? _a : 25));
+            this.limit = (_a = params.limit) !== null && _a !== void 0 ? _a : 25;
         }
         this.records = params.records;
         this.manual = params.manual;
@@ -1763,6 +1772,7 @@ class SelectionController {
                 selectAll: this.selectAll,
                 allCount: this._totalRecordsCount,
                 actions: [...this.actions],
+                // selectAll: this.sele
             });
             this._subscribeToSelection();
         }
@@ -1829,11 +1839,11 @@ class SelectionController {
     }
     updateConfig({ actions, actionSelected, allSelected, cancelled, selectionChanged, selectAll }) {
         this.actions = actions ? [...actions] : this.actions;
-        this.actionSelectedFn = (actionSelected !== null && actionSelected !== void 0 ? actionSelected : this.actionSelectedFn);
-        this.allSelectedFn = (allSelected !== null && allSelected !== void 0 ? allSelected : this.allSelectedFn);
-        this.cancelledFn = (cancelled !== null && cancelled !== void 0 ? cancelled : this.cancelledFn);
-        this.selectionChangedFn = (selectionChanged !== null && selectionChanged !== void 0 ? selectionChanged : this.selectionChangedFn);
-        this.selectAll = (selectAll !== null && selectAll !== void 0 ? selectAll : this.selectAll);
+        this.actionSelectedFn = actionSelected !== null && actionSelected !== void 0 ? actionSelected : this.actionSelectedFn;
+        this.allSelectedFn = allSelected !== null && allSelected !== void 0 ? allSelected : this.allSelectedFn;
+        this.cancelledFn = cancelled !== null && cancelled !== void 0 ? cancelled : this.cancelledFn;
+        this.selectionChangedFn = selectionChanged !== null && selectionChanged !== void 0 ? selectionChanged : this.selectionChangedFn;
+        this.selectAll = selectAll !== null && selectAll !== void 0 ? selectAll : this.selectAll;
     }
     // Reset actions to default set
     resetActions() {
@@ -2076,6 +2086,130 @@ class SelectionController {
     }
 }
 
+class ColumnAsyncAttribute extends BehaviorSubject {
+    constructor(value) {
+        super(Object.freeze(value));
+    }
+    next(value) {
+        const newValue = value;
+        const oldValue = this.getValue();
+        if (newValue !== oldValue) {
+            super.next(Object.freeze(value));
+        }
+    }
+}
+
+class ColumnAttributes {
+    constructor(attrs = {}) {
+        this._customize = true;
+        this._visible$ = new ColumnAsyncAttribute(true);
+        this._init(attrs);
+    }
+    // title
+    set title(value) {
+        this._title = value;
+    }
+    get title() {
+        return this._title;
+    }
+    // name
+    set name(value) {
+        this._name = value;
+    }
+    get name() {
+        return this._name;
+    }
+    // customize
+    set customize(value) {
+        this._customize = value;
+    }
+    get customize() {
+        return this._customize;
+    }
+    // sortable
+    set sortable(value) {
+        this._sortable = value;
+    }
+    get sortable() {
+        return this._sortable;
+    }
+    // sortableDefault
+    set sortableDefault(value) {
+        this._sortableDefault = value;
+        if (this.sortableDefault) {
+            this.sortable = true;
+        }
+    }
+    get sortableDefault() {
+        return this._sortableDefault;
+    }
+    // direction
+    set direction(value) {
+        this._direction = value;
+    }
+    get direction() {
+        return this._direction;
+    }
+    // align
+    set align(value) {
+        this._align = value;
+    }
+    get align() {
+        return this._align;
+    }
+    // width
+    set width(value) {
+        this._width = value;
+    }
+    get width() {
+        return this._width;
+    }
+    // className
+    set className(value) {
+        this._className = value;
+    }
+    get className() {
+        return this._className;
+    }
+    // visibility
+    set visible(value) {
+        this._visible$.next(value);
+    }
+    get visible() {
+        return this._visible$.getValue();
+    }
+    get visible$() {
+        return this._visible$.asObservable();
+    }
+    _init(attrs) {
+        Object.keys(attrs)
+            .forEach((key) => {
+            switch (key) {
+                case 'title':
+                    {
+                        this.title = attrs[key];
+                    }
+                    break;
+                case 'name':
+                    {
+                        this.name = attrs[key];
+                    }
+                    break;
+                case 'align':
+                    {
+                        this.align = attrs[key];
+                    }
+                    break;
+                case 'direction':
+                    {
+                        this.direction = attrs[key];
+                    }
+                    break;
+            }
+        });
+    }
+}
+
 class SortingController {
     constructor() {
         this.sortingColumns = [];
@@ -2154,12 +2288,15 @@ class SortingController {
      */
     initFakeColumns(columns) {
         columns.forEach((column) => {
-            const fakeColumn = new Column({
+            const attributes = new ColumnAttributes({
                 title: column.name,
                 name: column.value,
                 sortable: true,
                 direction: column.direction,
             });
+            const fakeColumn = new Column({
+                attributes,
+            });
             this.fakeSortingColumns.push(fakeColumn);
         });
     }
@@ -2329,20 +2466,18 @@ class ExternalParamsController {
         this._destroy$.complete();
     }
     _restorePaginationParams(values) {
-        var _a, _b;
-        if ((_a = values) === null || _a === void 0 ? void 0 : _a.page) {
+        if (values === null || values === void 0 ? void 0 : values.page) {
             this._externalParams.page = +values.page;
         }
-        if ((_b = values) === null || _b === void 0 ? void 0 : _b.limit) {
+        if (values === null || values === void 0 ? void 0 : values.limit) {
             this._externalParams.limit = +values.limit;
         }
     }
     _restoreSortingParams(values) {
-        var _a, _b;
-        if ((_a = values) === null || _a === void 0 ? void 0 : _a.sortName) {
+        if (values === null || values === void 0 ? void 0 : values.sortName) {
             this._externalParams.sortName = values.sortName;
         }
-        if ((_b = values) === null || _b === void 0 ? void 0 : _b.sortDirection) {
+        if (values === null || values === void 0 ? void 0 : values.sortDirection) {
             this._externalParams.sortDirection = values.sortDirection;
         }
     }
@@ -2495,7 +2630,7 @@ class List extends Model {
         // Set sortBy default column
         this.sorting.clearSortableColumns();
         this.columns.columns
-            .filter((column) => column.sortable && column.show)
+            .filter((column) => column.sortable && column.visible)
             .forEach((column) => {
             this.sorting.addSortableColumn(column);
         });
@@ -2676,6 +2811,11 @@ class List extends Model {
         if (!config.trackBy) {
             this.trackBy = 'id';
         }
+        if (config.afterContentInit) {
+            this.afterContentInit = () => {
+                config.afterContentInit(this.paging.query, this.dataController.visibleRows);
+            };
+        }
     }
     /**
      * Init restore row action and append Show Deleted option into filters
@@ -3156,7 +3296,7 @@ var ReorderStrategy;
     ReorderStrategy["Manual"] = "manual";
     ReorderStrategy["Custom"] = "custom";
 })(ReorderStrategy || (ReorderStrategy = {}));
-let ReorderController = class ReorderController {
+class ReorderController {
     constructor() {
         this._enabled$ = new BehaviorSubject(false);
         this._manualReorderActivated$ = new BehaviorSubject(false);
@@ -3204,10 +3344,10 @@ let ReorderController = class ReorderController {
         if (!data) {
             return;
         }
-        this.menu = (_a = data.menu, (_a !== null && _a !== void 0 ? _a : true));
-        this.position = (_b = data.position, (_b !== null && _b !== void 0 ? _b : ReorderPosition.Left));
-        this.strategy = (_c = data.strategy, (_c !== null && _c !== void 0 ? _c : ReorderStrategy.Manual));
-        this.status = (_d = data.status, (_d !== null && _d !== void 0 ? _d : true));
+        this.menu = (_a = data.menu) !== null && _a !== void 0 ? _a : true;
+        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;
         this.label = data.label;
         this.startCallback = data.start;
         this.movedCallback = data.moved;
@@ -3304,75 +3444,73 @@ let ReorderController = class ReorderController {
         this._numberOfActiveFilters = activeFilters;
         this.enabled = this.enabled;
     }
-};
-ReorderController = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [])
-], ReorderController);
+}
+ReorderController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReorderController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ReorderController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReorderController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReorderController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
-let FsListHeaderDirective = class FsListHeaderDirective {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListHeaderDirective.prototype, "colspan", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListHeaderDirective.prototype, "align", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], FsListHeaderDirective.prototype, "className", void 0);
-FsListHeaderDirective = __decorate([
-    Directive({ selector: '[fs-list-header]' })
-], FsListHeaderDirective);
+class FsListHeaderDirective {
+}
+FsListHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListHeaderDirective, selector: "[fs-list-header]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[fs-list-header]' }]
+        }], propDecorators: { colspan: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], className: [{
+                type: Input,
+                args: ['class']
+            }] } });
 
-let FsListCellDirective = class FsListCellDirective {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListCellDirective.prototype, "colspan", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListCellDirective.prototype, "align", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], FsListCellDirective.prototype, "className", void 0);
-FsListCellDirective = __decorate([
-    Directive({ selector: '[fs-list-cell]' })
-], FsListCellDirective);
+class FsListCellDirective {
+}
+FsListCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListCellDirective, selector: "[fs-list-cell]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListCellDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[fs-list-cell]' }]
+        }], propDecorators: { colspan: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], className: [{
+                type: Input,
+                args: ['class']
+            }] } });
 
-let FsListFooterDirective = class FsListFooterDirective {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListFooterDirective.prototype, "colspan", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListFooterDirective.prototype, "align", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], FsListFooterDirective.prototype, "className", void 0);
-FsListFooterDirective = __decorate([
-    Directive({ selector: '[fs-list-footer]' })
-], FsListFooterDirective);
+class FsListFooterDirective {
+}
+FsListFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[fs-list-footer]' }]
+        }], propDecorators: { colspan: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], className: [{
+                type: Input,
+                args: ['class']
+            }] } });
 
-let FsListGroupCellDirective = class FsListGroupCellDirective extends FsListCellDirective {
-};
-FsListGroupCellDirective = __decorate([
-    Directive({
-        selector: '[fs-list-group-cell]'
-    })
-], FsListGroupCellDirective);
+class FsListGroupCellDirective extends FsListCellDirective {
+}
+FsListGroupCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsListGroupCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupCellDirective, selector: "[fs-list-group-cell]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs-list-group-cell]'
+                }]
+        }] });
 
-let GroupExpandNotifierService = class GroupExpandNotifierService {
+class GroupExpandNotifierService {
     constructor() {
         this._expandStatusChanged$ = new Subject();
         this._destroy$ = new Subject();
@@ -3387,12 +3525,14 @@ let GroupExpandNotifierService = class GroupExpandNotifierService {
         this._destroy$.next();
         this._destroy$.complete();
     }
-};
-GroupExpandNotifierService = __decorate([
-    Injectable()
-], GroupExpandNotifierService);
+}
+GroupExpandNotifierService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupExpandNotifierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GroupExpandNotifierService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupExpandNotifierService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupExpandNotifierService, decorators: [{
+            type: Injectable
+        }] });
 
-let FsListGroupExpandTriggerDirective = class FsListGroupExpandTriggerDirective {
+class FsListGroupExpandTriggerDirective {
     constructor(_expandNotifier) {
         this._expandNotifier = _expandNotifier;
     }
@@ -3401,125 +3541,130 @@ let FsListGroupExpandTriggerDirective = class FsListGroupExpandTriggerDirective
         event.stopPropagation();
         this._expandNotifier.toggleExpandStatus(this.row);
     }
-};
-FsListGroupExpandTriggerDirective.ctorParameters = () => [
-    { type: GroupExpandNotifierService }
-];
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], FsListGroupExpandTriggerDirective.prototype, "click", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListGroupExpandTriggerDirective.prototype, "row", void 0);
-FsListGroupExpandTriggerDirective = __decorate([
-    Directive({ selector: '[fsListGroupExpandTrigger]' }),
-    __metadata("design:paramtypes", [GroupExpandNotifierService])
-], FsListGroupExpandTriggerDirective);
+}
+FsListGroupExpandTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupExpandTriggerDirective, deps: [{ token: GroupExpandNotifierService }], target: i0.ɵɵFactoryTarget.Directive });
+FsListGroupExpandTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupExpandTriggerDirective, selector: "[fsListGroupExpandTrigger]", inputs: { row: "row" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupExpandTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[fsListGroupExpandTrigger]' }]
+        }], ctorParameters: function () { return [{ type: GroupExpandNotifierService }]; }, propDecorators: { click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], row: [{
+                type: Input
+            }] } });
 
-let FsListColumnDirective = class FsListColumnDirective {
+class FsListColumnDirective {
     constructor() {
-        this.show = true;
-        this.customize = true;
+        this._columnAttributes = new ColumnAttributes();
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListColumnDirective.prototype, "title", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListColumnDirective.prototype, "name", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "show", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "customize", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FsListColumnDirective.prototype, "sortable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FsListColumnDirective.prototype, "sortableDefault", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListColumnDirective.prototype, "direction", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListColumnDirective.prototype, "align", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsListColumnDirective.prototype, "width", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "className", void 0);
-__decorate([
-    ContentChild(FsListHeaderDirective, { read: TemplateRef, static: true }),
-    __metadata("design:type", TemplateRef)
-], FsListColumnDirective.prototype, "headerTemplate", void 0);
-__decorate([
-    ContentChild(FsListHeaderDirective, { static: true }),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "headerConfigs", void 0);
-__decorate([
-    ContentChild(FsListGroupCellDirective, { read: TemplateRef, static: true }),
-    __metadata("design:type", TemplateRef)
-], FsListColumnDirective.prototype, "groupCellTemplate", void 0);
-__decorate([
-    ContentChild(FsListGroupCellDirective, { static: true }),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "groupCellConfigs", void 0);
-__decorate([
-    ContentChildren(FsListGroupExpandTriggerDirective, { descendants: true }),
-    __metadata("design:type", QueryList)
-], FsListColumnDirective.prototype, "expandTrigger", void 0);
-__decorate([
-    ContentChild(FsListCellDirective, { read: TemplateRef, static: true }),
-    __metadata("design:type", TemplateRef)
-], FsListColumnDirective.prototype, "cellTemplate", void 0);
-__decorate([
-    ContentChild(FsListCellDirective, { static: true }),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "cellConfigs", void 0);
-__decorate([
-    ContentChild(FsListFooterDirective, { read: TemplateRef, static: true }),
-    __metadata("design:type", TemplateRef)
-], FsListColumnDirective.prototype, "footerTemplate", void 0);
-__decorate([
-    ContentChild(FsListFooterDirective, { static: true }),
-    __metadata("design:type", Object)
-], FsListColumnDirective.prototype, "footerConfigs", void 0);
-FsListColumnDirective = __decorate([
-    Directive({
-        selector: 'fs-list-column'
-    })
-], FsListColumnDirective);
+    get attributes() {
+        return this._columnAttributes;
+    }
+    set visible(value) {
+        this._columnAttributes.visible = value;
+    }
+    set title(value) {
+        this._columnAttributes.title = value;
+    }
+    set name(value) {
+        this._columnAttributes.name = value;
+    }
+    set customize(value) {
+        this._columnAttributes.customize = value;
+    }
+    set sortable(value) {
+        this._columnAttributes.sortable = value;
+    }
+    set sortableDefault(value) {
+        this._columnAttributes.sortableDefault = value;
+    }
+    set direction(value) {
+        this._columnAttributes.direction = value;
+    }
+    set align(value) {
+        this._columnAttributes.align = value;
+    }
+    set width(value) {
+        this._columnAttributes.width = value;
+    }
+    set className(value) {
+        this._columnAttributes.className = value;
+    }
+}
+FsListColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListColumnDirective, selector: "fs-list-column", inputs: { visible: ["show", "visible"], title: "title", name: "name", customize: "customize", sortable: "sortable", sortableDefault: "sortableDefault", direction: "direction", align: "align", width: "width", className: ["class", "className"] }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsListHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupCellTemplate", first: true, predicate: FsListGroupCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupCellConfigs", first: true, predicate: FsListGroupCellDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'fs-list-column'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { headerTemplate: [{
+                type: ContentChild,
+                args: [FsListHeaderDirective, { read: TemplateRef, static: true }]
+            }], headerConfigs: [{
+                type: ContentChild,
+                args: [FsListHeaderDirective, { static: true }]
+            }], groupCellTemplate: [{
+                type: ContentChild,
+                args: [FsListGroupCellDirective, { read: TemplateRef, static: true }]
+            }], groupCellConfigs: [{
+                type: ContentChild,
+                args: [FsListGroupCellDirective, { static: true }]
+            }], expandTrigger: [{
+                type: ContentChildren,
+                args: [FsListGroupExpandTriggerDirective, { descendants: true }]
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: [FsListCellDirective, { read: TemplateRef, static: true }]
+            }], cellConfigs: [{
+                type: ContentChild,
+                args: [FsListCellDirective, { static: true }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FsListFooterDirective, { read: TemplateRef, static: true }]
+            }], footerConfigs: [{
+                type: ContentChild,
+                args: [FsListFooterDirective, { static: true }]
+            }], visible: [{
+                type: Input,
+                args: ['show']
+            }], title: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], customize: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sortableDefault: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], className: [{
+                type: Input,
+                args: ['class']
+            }] } });
 
-let FsListEmptyStateDirective = class FsListEmptyStateDirective {
-};
-FsListEmptyStateDirective = __decorate([
-    Directive({
-        selector: '[fs-list-empty-state]',
-    })
-], FsListEmptyStateDirective);
+class FsListEmptyStateDirective {
+}
+FsListEmptyStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListEmptyStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListEmptyStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListEmptyStateDirective, selector: "[fs-list-empty-state]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListEmptyStateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs-list-empty-state]',
+                }]
+        }] });
 
 const FS_LIST_DEFAULT_CONFIG = new InjectionToken('fs-list.default-config');
 const FS_LIST_CONFIG = new InjectionToken('fs-list.config');
 
-let CustomizeColsDialogComponent = class CustomizeColsDialogComponent {
+class CustomizeColsDialogComponent {
     constructor(data, _dialog) {
         this._dialog = _dialog;
         this.columns = [];
@@ -3565,385 +3710,312 @@ let CustomizeColsDialogComponent = class CustomizeColsDialogComponent {
     cancel() {
         this._dialog.close();
     }
-};
-CustomizeColsDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
-    { type: MatDialogRef }
-];
-CustomizeColsDialogComponent = __decorate([
-    Component({
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}"]
-    }),
-    __param(0, Inject(MAT_DIALOG_DATA)),
-    __metadata("design:paramtypes", [Object, MatDialogRef])
-], CustomizeColsDialogComponent);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomizeColsDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: 'customize-cols.component.html',
+                    styleUrls: ['customize-cols.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i4.MatDialogRef }]; } });
 
 const FILTER_STORE_KEY = 'fs-list-persist';
-let PersistanceController = class PersistanceController extends FsPersistanceStore {
+class PersistanceController extends FsPersistanceStore {
     constructor(_store, _route) {
         super(_store, _route);
         this.STORE_KEY = FILTER_STORE_KEY;
     }
-};
-PersistanceController.ctorParameters = () => [
-    { type: FsStore },
-    { type: ActivatedRoute }
-];
-PersistanceController = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [FsStore,
-        ActivatedRoute])
-], PersistanceController);
+}
+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.ɵ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 }]; } });
 
-let FsListComponent = class FsListComponent {
-    constructor(reorderController, _el, _defaultOptions, fsScroll, selectionDialog, dialog, cdRef, _groupExpandNotifier, _router, _route, _persistance, _location, _dialogRef, _drawerRef) {
-        this.reorderController = reorderController;
-        this._el = _el;
-        this._defaultOptions = _defaultOptions;
-        this.fsScroll = fsScroll;
-        this.selectionDialog = selectionDialog;
-        this.dialog = dialog;
-        this.cdRef = cdRef;
-        this._groupExpandNotifier = _groupExpandNotifier;
-        this._router = _router;
-        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();
-        // Event will fired if action remove: true will clicked
-        this.rowRemoved = new EventEmitter();
-        this.firstLoad = true;
-        this._filterParamsReady = false;
-        this._inDialog = !!this._dialogRef || !!this._drawerRef;
-        this._destroy = new Subject();
-    }
-    set config(config) {
-        this._initWithConfig(config);
+// import { FsListManageSavedFiltersComponent } from '../manage-saved-filters/manage-saved-filters.component';
+class FsListSavedFiltersComponent {
+    constructor(_dialog, _externalParams, _vcRef) {
+        this._dialog = _dialog;
+        this._externalParams = _externalParams;
+        this._vcRef = _vcRef;
     }
-    set filterReference(component) {
-        this._filterRef = component;
-        this.list.actions.setFilterRef(component);
-        this._emitFiltersReadyEvent();
+    get savedFiltersEnabled$() {
+        return this._externalParams.savedFiltersController.enabled$;
     }
-    /**
-     * Set columns to config
-     * Create Column Model instances
-     *
-     */
-    set columnTemplates(listColumnDirectives) {
-        this.listColumnDirectives = listColumnDirectives;
-        if (this.list) {
-            this.list.tranformTemplatesToColumns(listColumnDirectives);
-        }
+    showManageDialog() {
+        // this._dialog.open(FsListManageSavedFiltersComponent, {
+        //   viewContainerRef: this._vcRef,
+        // });
     }
-    set _emptyStateTemplate(template) {
-        if (this.list) {
-            this.list.emptyStateTemplate = template;
-        }
-    }
-    /**
-     * Return reference for filter
-     */
-    get filterRef() {
-        return this._filterRef;
-    }
-    get groupEnabled() {
-        return this.list.dataController.groupEnabled;
-    }
-    get paginatorVisible() {
-        return this.list.paging.enabled
-            && !this.firstLoad
-            && !this.list.scrollable
-            && !this.list.emptyStateEnabled
-            && this.list.dataController.visibleRowsCount > 0
-            && this.list.paging.pages > 1;
-    }
-    set groupEnabled(value) {
-        this.list.groupEnabled(value);
+}
+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.ɵ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,
+            args: [{
+                    selector: 'fs-list-saved-filters',
+                    templateUrl: 'saved-filters.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: i4.MatDialog }, { type: i2$2.ExternalParamsController }, { type: i0.ViewContainerRef }]; } });
+
+class FsStatusComponent {
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
+        this._destroy$ = new Subject();
     }
     ngOnInit() {
-        this._subscribeToRemoveRow();
-        this._subscribeToGroupExpandStatusChange();
+        this.sorting.sortingChanged$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._cdRef.markForCheck();
+        });
     }
     ngOnDestroy() {
-        if (this.list) {
-            this.list.destroy();
-        }
-        this._destroy.next();
-        this._destroy.complete();
-    }
-    nextPage() {
-        this.list.paging.goNext();
-    }
-    prevPage() {
-        this.list.paging.goPrev();
-    }
-    firstPage() {
-        this.list.paging.goFirst();
-    }
-    lastPage() {
-        this.list.paging.goLast();
-    }
-    reload() {
-        this.list.reload();
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    getData(trackBy) {
-        return this.list.getData(trackBy);
+    toggleDirection() {
+        if (this.sorting.sortingColumn.direction === 'asc') {
+            this.sorting.sortDirection(SortingDirection.desc);
+        }
+        else {
+            this.sorting.sortDirection(SortingDirection.asc);
+        }
     }
-    hasData(trackBy) {
-        return this.list.hasData(trackBy);
+    setSortableColumn(column) {
+        if (this.sorting.sortingColumn !== column) {
+            this.sorting.sortBy(column);
+        }
     }
-    updateData(rows, trackBy) {
-        return this.list.dataController.updateData(rows, trackBy);
+    setLimit(limit) {
+        this.paging.setLimit(limit);
     }
-    replaceRow(row, trackBy) {
-        return this.list.dataController.replaceData(row, trackBy);
+}
+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 });
+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',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { paging: [{
+                type: Input
+            }], sorting: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], firstLoad: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.first-load']
+            }, {
+                type: HostBinding,
+                args: ['class.fs-skeleton-placeholder']
+            }] } });
+
+class FsCellComponent {
+    constructor() {
+        this.isColl = true;
+        this.role = 'gridcell';
+        this.cellContext = {};
+        this._destroy$ = new Subject();
     }
-    updateSelectionConfig(config) {
-        this.list.selection.updateConfig(config);
+    ngOnInit() {
+        this._initCellContext();
+        this._initCellTemplate();
+        this._listenGroupOpen();
     }
-    resetSelectionActions() {
-        this.list.selection.resetActions();
+    ngOnChanges(changes) {
+        if (changes.rowIndex) {
+            this.cellContext.index = this.rowIndex;
+        }
     }
-    removeData(data) {
-        return this.list.dataController.removeData(data);
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    setHeading(heading) {
-        this.list.heading = heading;
+    _initCellContext() {
+        this.cellContext.index = this.rowIndex;
+        if (this.row) {
+            if (this.row.isGroup) {
+                this.cellContext.groupIndex = this.row.index;
+            }
+            else if (this.row.isChild) {
+                this.cellContext.groupChildIndex = this.row.index;
+            }
+        }
+        this.cellContext.column = this.column;
+        if (this.row) {
+            this.cellContext.$implicit = this.row.data;
+            this.cellContext.row = this.row.data;
+            this.cellContext.value = this.row.data[this.column.name];
+            this.cellContext.expanded = this.row.expanded;
+        }
     }
-    setSubheading(subheading) {
-        this.list.subheading = subheading;
+    _initCellTemplate() {
+        if (this.row && this.row.isGroup) {
+            this.cellTemplate = this.column.groupCellTemplate || this.column.cellTemplate;
+        }
+        else {
+            this.cellTemplate = this.column.cellTemplate;
+        }
     }
-    reorderStart() {
-        this.reorderController.enableReorder();
+    _listenGroupOpen() {
+        if (this.row && this.row.isGroup) {
+            this.row.expanded$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((status) => {
+                this.cellContext.expanded = status;
+            });
+        }
     }
-    reorderFinish() {
-        this.reorderController.disableReorder();
+}
+FsCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsCellComponent, selector: "[fs-cell]", inputs: { column: "column", row: "row", rowIndex: "rowIndex" }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n", directives: [{ type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-cell]',
+                    templateUrl: 'cell.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isColl: [{
+                type: HostBinding,
+                args: ['class.fs-list-col']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], column: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }] } });
+
+class FsHeadCellComponent extends FsCellComponent {
+    constructor(cdRef, differs) {
+        super();
+        this.cdRef = cdRef;
+        this.differs = differs;
+        this.cellContext = {};
+        this._columnDiffer = differs.find({}).create();
     }
-    setActions(actions) {
-        if (actions) {
-            this.list.actions.clearActions();
-            this.list.actions.setActions(actions);
+    ngDoCheck() {
+        if (this._columnDiffer.diff(this.column)) {
+            this.cdRef.markForCheck();
         }
     }
-    filterReady() {
-        this.list.filtersReady$.next();
-        this._filterParamsReady = true;
-        this._emitFiltersReadyEvent();
+    initCellContext() {
+        this.cellContext.value = this.column.title;
     }
-    /**
-     * Update visibility for specific column
-     */
-    columnVisibility(name, show) {
-        this.columnsVisibility([{ name, show }]);
+}
+FsHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHeadCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
+FsHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadCellComponent, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0, template: "<div class=\"wrap\">\n    <span class=\"title\">\n      <ng-template [ngIf]=\"!column.headerTemplate\">{{column.title}}</ng-template>\n      <ng-template\n        [ngIf]=\"column.headerTemplate\"\n        [ngTemplateOutlet]=\"column.headerTemplate\"\n        [ngTemplateOutletContext]=\"cellContext\">\n      </ng-template>\n    </span>\n  <div class=\"direction\" *ngIf=\"column.ordered\" [ngSwitch]=\"column.sortingDirection\">\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_downward\" *ngSwitchCase=\"'asc'\">arrow_downward</mat-icon>\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_upward\" *ngSwitchCase=\"'desc'\">arrow_upward</mat-icon>\n  </div>\n</div>\n", components: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHeadCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-head-cell]',
+                    templateUrl: 'head-cell.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }]; } });
+
+class FsHeadComponent {
+    constructor(reorderController, cdRef) {
+        this.reorderController = reorderController;
+        this.cdRef = cdRef;
+        this.selectedAll = false;
+        this.ReorderPosition = ReorderPosition;
+        this.ReorderStrategy = ReorderStrategy;
+        this._destroy$ = new Subject();
     }
-    /**
-     * Update visibility for list of specific columns
-     */
-    columnsVisibility(columns) {
-        this.list.columns.updateVisibilityForCols(columns);
+    ngOnInit() {
+        this.initSorting();
+        this.initSelection();
     }
-    _emitFiltersReadyEvent() {
-        if (!!this.filterRef && this._filterParamsReady) {
-            this.filtersReady.emit();
-        }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
     /**
-     * Initialize config for list
-     * @param config
+     * Select All Visible Rows
+     * @param event
      */
-    _initWithConfig(config) {
-        if (this.list) {
-            this.list.destroy();
-        }
-        const defaultOpts = this._defaultOptions
-            ? cloneDeep(this._defaultOptions)
-            : {};
-        const listConfig = mergeWith(defaultOpts, config, this._configMergeCustomizer);
-        if (listConfig.persist !== false) {
-            this._restorePersistance(listConfig.persist);
-        }
-        this._updateCustomizeAction(listConfig.actions);
-        this.list = new List(this._el, listConfig, this.fsScroll, this.selectionDialog, this._router, this._route, this._persistance, this._inDialog);
-        this._waitFirstLoad();
-        this._listenFiltersQueryChange();
-        this.reorderController.initWithConfig(config.reorder, this.list.dataController, this.list.actions);
-        if (this.listColumnDirectives) {
-            this.list.tranformTemplatesToColumns(this.listColumnDirectives);
-        }
-        this._listenSortingChange();
+    selectAll(event) {
+        this.selection.selectAllVisibleRows(event.checked);
     }
     /**
-     * Find action with customize flag and re-declare click function for CustomizeColsDialog
-     * @param actions
+     * Track By for improve change detection
+     * @param index
      */
-    _updateCustomizeAction(actions) {
-        var _a;
-        const customizeAction = (_a = actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.customize);
-        if (customizeAction) {
-            const actionClickFn = customizeAction.click;
-            customizeAction.click = () => {
-                if (actionClickFn) {
-                    actionClickFn(null);
-                }
-                const dialogRef = this.dialog.open(CustomizeColsDialogComponent, {
-                    data: {
-                        columns: this.list.columns.columnsForDialog,
-                        changeFn: this.list.columns.changeFn,
-                    },
-                });
-                dialogRef
-                    .afterClosed()
-                    .pipe(takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
-                    .subscribe((data) => {
-                    if (data) {
-                        this.list.columns.updateVisibilityForCols(data);
-                        this.cdRef.markForCheck();
-                    }
-                });
-            };
-        }
+    trackByFn(index) {
+        return index;
     }
     /**
-     * Update sorting in filter
+     * Subscribe to sorting change
      */
-    _listenSortingChange() {
-        this.list.sorting
-            .sortingChanged$
-            .pipe(takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
-            .subscribe((sort) => {
-            this._filterRef.updateSort(sort);
-        });
-    }
-    _subscribeToRemoveRow() {
-        this.rowRemoved
-            .pipe(takeUntil(this._destroy))
-            .subscribe((row) => {
-            this.list.dataController.removeData(row);
-        });
-    }
-    _subscribeToGroupExpandStatusChange() {
-        if (this.list.dataController.hasGroups) {
-            this._groupExpandNotifier.expandStatusChange$
-                .pipe(takeUntil(this._destroy))
-                .subscribe((row) => {
-                this.list.dataController.toggleRowGroup(row);
-            });
-        }
-    }
-    _waitFirstLoad() {
-        this.list.loading$
-            .pipe(skip(1), filter((value) => value === false), take(1), takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
+    initSorting() {
+        this.sorting.sortingChanged$
+            .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.firstLoad = false;
-            this.cdRef.markForCheck();
-        });
-    }
-    _listenFiltersQueryChange() {
-        this.list.filtersQuery$
-            .pipe(takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
-            .subscribe((value) => {
-            if (value) {
-                const activeFilters = Object.keys(value).length;
-                this.reorderController.setNunberOfActiveFilters(activeFilters);
-            }
+            this.cdRef.detectChanges();
         });
     }
-    _configMergeCustomizer(objValue, srcValue) {
-        if (Array.isArray(objValue)) {
-            return objValue;
+    /**
+     * Subscribe to selection change
+     */
+    initSelection() {
+        if (this.selection) {
+            this.selection.selectionChange$
+                .pipe(filter(({ type }) => (type === SelectionChangeType.AllVisibleSelectionChange
+                || type === SelectionChangeType.SelectedAll
+                || type === SelectionChangeType.RowSelectionChange)), takeUntil(this._destroy$))
+                .subscribe(({ type, payload: status }) => {
+                this.selectedAll = status;
+                this.cdRef.markForCheck();
+            });
         }
     }
-    _restorePersistance(persistConfig) {
-        const namespace = getNormalizedPath(this._location);
-        this._persistance.setConfig(persistConfig, namespace, this._inDialog);
-    }
-};
-FsListComponent.ctorParameters = () => [
-    { type: ReorderController },
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FS_LIST_DEFAULT_CONFIG,] }] },
-    { type: FsScrollService, decorators: [{ type: Optional }] },
-    { type: SelectionDialog },
-    { type: MatDialog },
-    { type: ChangeDetectorRef },
-    { type: GroupExpandNotifierService },
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: PersistanceController },
-    { type: Location },
-    { type: MatDialogRef, decorators: [{ type: Optional }] },
-    { type: DrawerRef, decorators: [{ type: Optional }] }
-];
-__decorate([
-    HostBinding('class.fs-list'),
-    __metadata("design:type", Object)
-], FsListComponent.prototype, "classFsList", void 0);
-__decorate([
-    Input('config'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FsListComponent.prototype, "config", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListComponent.prototype, "loaderLines", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsListComponent.prototype, "filtersReady", void 0);
-__decorate([
-    ViewChild(FilterComponent),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FsListComponent.prototype, "filterReference", null);
-__decorate([
-    ContentChildren(FsListColumnDirective),
-    __metadata("design:type", QueryList),
-    __metadata("design:paramtypes", [QueryList])
-], FsListComponent.prototype, "columnTemplates", null);
-__decorate([
-    ContentChild(FsListEmptyStateDirective, { read: TemplateRef }),
-    __metadata("design:type", TemplateRef),
-    __metadata("design:paramtypes", [TemplateRef])
-], FsListComponent.prototype, "_emptyStateTemplate", null);
-FsListComponent = __decorate([
-    Component({
-        selector: 'fs-list',
-        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      <table class=\"fs-list-table\" role=\"grid\" *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\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\"\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\"\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\"\n               [selection]=\"list.selection\"\n               [hasRowActions]=\"list.hasRowActions\">\n        </tfoot>\n      </table>\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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            GroupExpandNotifierService,
-            PersistanceController,
-            ReorderController,
-        ],
-        styles: ["::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.first-load .filter-chips,::ng-deep .fs-list .fs-list-container.first-load .fs-list-body,::ng-deep .fs-list .fs-list-container.first-load .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-pagination,::ng-deep .fs-list .fs-list-container.loading .filter-chips,::ng-deep .fs-list .fs-list-container.loading .fs-list-body,::ng-deep .fs-list .fs-list-container.loading .fs-list-no-results-container,::ng-deep .fs-list .fs-list-container.loading .fs-list-status,::ng-deep .fs-list .fs-list-container.loading fs-list-pagination{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 .fs-list-table,::ng-deep .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 .fs-list-head,::ng-deep .fs-list thead{display:table-header-group}::ng-deep .fs-list .fs-list-head .fs-list-col,::ng-deep .fs-list .fs-list-head th,::ng-deep .fs-list thead .fs-list-col,::ng-deep .fs-list thead th{padding:8px;font-weight:400;font-size:13px;color:#8f8f8f}::ng-deep .fs-list .fs-list-head .fs-list-col.fs-list-col-selection,::ng-deep .fs-list .fs-list-head th.fs-list-col-selection,::ng-deep .fs-list thead .fs-list-col.fs-list-col-selection,::ng-deep .fs-list thead th.fs-list-col-selection{width:1%;text-align:left}::ng-deep .fs-list .fs-list-head .fs-list-col.sorting,::ng-deep .fs-list .fs-list-head th.sorting,::ng-deep .fs-list thead .fs-list-col.sorting,::ng-deep .fs-list thead th.sorting{cursor:pointer;background-image:none}::ng-deep .fs-list .fs-list-head .fs-list-col.sorting:hover,::ng-deep .fs-list .fs-list-head th.sorting:hover,::ng-deep .fs-list thead .fs-list-col.sorting:hover,::ng-deep .fs-list thead th.sorting:hover{background-color:#f6f6f6}::ng-deep .fs-list .fs-list-head .fs-list-col .wrap,::ng-deep .fs-list .fs-list-head th .wrap,::ng-deep .fs-list thead .fs-list-col .wrap,::ng-deep .fs-list thead th .wrap{display:inline-flex;vertical-align:middle;white-space:nowrap}::ng-deep .fs-list .fs-list-head .fs-list-col .wrap mat-icon,::ng-deep .fs-list .fs-list-head th .wrap mat-icon,::ng-deep .fs-list thead .fs-list-col .wrap mat-icon,::ng-deep .fs-list thead th .wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}::ng-deep .fs-list .fs-list-head .fs-list-col .wrap .direction,::ng-deep .fs-list .fs-list-head th .wrap .direction,::ng-deep .fs-list thead .fs-list-col .wrap .direction,::ng-deep .fs-list thead th .wrap .direction{margin-left:5px}::ng-deep .fs-list .fs-list-body,::ng-deep .fs-list tbody{display:table-row-group;position:relative}::ng-deep .fs-list .fs-list-body.disabled,::ng-deep .fs-list tbody.disabled{opacity:.4;pointer-events:none}::ng-deep .fs-list .fs-list-body .fs-list-col,::ng-deep .fs-list .fs-list-body td,::ng-deep .fs-list tbody .fs-list-col,::ng-deep .fs-list tbody td{box-sizing:border-box}::ng-deep .fs-list .fs-list-body .fs-list-row:hover .fs-list-col,::ng-deep .fs-list .fs-list-body tr:hover td,::ng-deep .fs-list tbody .fs-list-row:hover .fs-list-col,::ng-deep .fs-list tbody tr:hover td{background-color:#f6f6f6}::ng-deep .fs-list .fs-list-body .fs-list-row:hover .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row:hover td,::ng-deep .fs-list .fs-list-body tr:hover .fs-list-col,::ng-deep .fs-list .fs-list-body tr:hover td,::ng-deep .fs-list tbody .fs-list-row:hover .fs-list-col,::ng-deep .fs-list tbody .fs-list-row:hover td,::ng-deep .fs-list tbody tr:hover .fs-list-col,::ng-deep .fs-list tbody tr:hover td{background-color:#f6f6f6}::ng-deep .fs-list .fs-list-body tr:first-child td,::ng-deep .fs-list tbody tr:first-child td{border-top:2px solid #ddd}::ng-deep .fs-list .fs-list-body tr:last-child td,::ng-deep .fs-list tbody tr:last-child td{border-bottom:2px solid #ddd}::ng-deep .fs-list .fs-list-body td,::ng-deep .fs-list tbody td{border-top:1px solid #ddd}::ng-deep .fs-list .fs-list-body .fs-list-row,::ng-deep .fs-list .fs-list-body tr,::ng-deep .fs-list .fs-list-footer .fs-list-row,::ng-deep .fs-list .fs-list-footer tr,::ng-deep .fs-list .fs-list-head .fs-list-row,::ng-deep .fs-list .fs-list-head tr,::ng-deep .fs-list tbody .fs-list-row,::ng-deep .fs-list tbody tr,::ng-deep .fs-list tfoot .fs-list-row,::ng-deep .fs-list tfoot tr,::ng-deep .fs-list thead .fs-list-row,::ng-deep .fs-list thead tr{display:table-row}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .fs-list-col,::ng-deep .fs-list tbody tr td,::ng-deep .fs-list tbody tr th,::ng-deep .fs-list tfoot .fs-list-row .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 tr .fs-list-col,::ng-deep .fs-list tfoot tr td,::ng-deep .fs-list tfoot tr th,::ng-deep .fs-list thead .fs-list-row .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 tr .fs-list-col,::ng-deep .fs-list thead tr td,::ng-deep .fs-list thead tr th{display:table-cell;padding:8px;vertical-align:middle;outline:0}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .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 tfoot .fs-list-row .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 tr .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 thead .fs-list-row .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 tr .fs-list-col.drag-col,::ng-deep .fs-list thead tr td.drag-col,::ng-deep .fs-list thead tr th.drag-col{width:24px;text-align:center;cursor:-webkit-grab;cursor:grab}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .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 tfoot .fs-list-row .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 tr .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 thead .fs-list-row .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 tr .fs-list-col.drag-col mat-icon,::ng-deep .fs-list thead tr td.drag-col mat-icon,::ng-deep .fs-list thead tr th.drag-col mat-icon{display:flex}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .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 tfoot .fs-list-row .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 tr .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 thead .fs-list-row .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 tr .fs-list-col.row-actions,::ng-deep .fs-list thead tr td.row-actions,::ng-deep .fs-list thead tr th.row-actions{width:1%;white-space:nowrap;padding-right:10px;overflow:hidden}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .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 tfoot .fs-list-row .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 tr .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 thead .fs-list-row .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 tr .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list thead tr td.row-actions .row-inline-action,::ng-deep .fs-list thead tr th.row-actions .row-inline-action{margin-left:12px;display:inline-block}::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-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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .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 tfoot .fs-list-row .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 tr .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 thead .fs-list-row .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 tr .fs-list-col.row-actions .row-inline-action:first-child,::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{margin-left:0}::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-icon,::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-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-icon,::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-fab,::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-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 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-icon,::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 tr td.row-actions .row-inline-action-fab,::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-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-fab,::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-mini-fab,::ng-deep .fs-list .fs-list-body tr th.row-actions .row-menu-action,::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-icon,::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,::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-icon,::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-fab,::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-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 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-icon,::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 tr td.row-actions .row-inline-action-fab,::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-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-fab,::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-mini-fab,::ng-deep .fs-list .fs-list-footer tr th.row-actions .row-menu-action,::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-icon,::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-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-icon,::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-fab,::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-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 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-icon,::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 tr td.row-actions .row-inline-action-fab,::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-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-fab,::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-mini-fab,::ng-deep .fs-list .fs-list-head tr th.row-actions .row-menu-action,::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-icon,::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 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-icon,::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-fab,::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-mini-fab,::ng-deep .fs-list tbody .fs-list-row th.row-actions .row-menu-action,::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-icon,::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 tr td.row-actions .row-inline-action-fab,::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-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-fab,::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-mini-fab,::ng-deep .fs-list tbody tr th.row-actions .row-menu-action,::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-icon,::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 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-icon,::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-fab,::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-mini-fab,::ng-deep .fs-list tfoot .fs-list-row th.row-actions .row-menu-action,::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-icon,::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 tr td.row-actions .row-inline-action-fab,::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-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-fab,::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-mini-fab,::ng-deep .fs-list tfoot tr th.row-actions .row-menu-action,::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-icon,::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 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-icon,::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-fab,::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-mini-fab,::ng-deep .fs-list thead .fs-list-row th.row-actions .row-menu-action,::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-icon,::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 tr td.row-actions .row-inline-action-fab,::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-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-fab,::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-mini-fab,::ng-deep .fs-list thead tr th.row-actions .row-menu-action{width:35px;justify-content:center;align-items:center}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .fs-list-col.left,::ng-deep .fs-list tbody tr td.left,::ng-deep .fs-list tbody tr th.left,::ng-deep .fs-list tfoot .fs-list-row .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 tr .fs-list-col.left,::ng-deep .fs-list tfoot tr td.left,::ng-deep .fs-list tfoot tr th.left,::ng-deep .fs-list thead .fs-list-row .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 tr .fs-list-col.left,::ng-deep .fs-list thead tr td.left,::ng-deep .fs-list thead tr th.left{text-align:left}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .fs-list-col.center,::ng-deep .fs-list tbody tr td.center,::ng-deep .fs-list tbody tr th.center,::ng-deep .fs-list tfoot .fs-list-row .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 tr .fs-list-col.center,::ng-deep .fs-list tfoot tr td.center,::ng-deep .fs-list tfoot tr th.center,::ng-deep .fs-list thead .fs-list-row .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 tr .fs-list-col.center,::ng-deep .fs-list thead tr td.center,::ng-deep .fs-list thead tr th.center{text-align:center}::ng-deep .fs-list .fs-list-body .fs-list-row .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 tr .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-footer .fs-list-row .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 tr .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-head .fs-list-row .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 tr .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 tbody .fs-list-row .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 tr .fs-list-col.right,::ng-deep .fs-list tbody tr td.right,::ng-deep .fs-list tbody tr th.right,::ng-deep .fs-list tfoot .fs-list-row .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 tr .fs-list-col.right,::ng-deep .fs-list tfoot tr td.right,::ng-deep .fs-list tfoot tr th.right,::ng-deep .fs-list thead .fs-list-row .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 tr .fs-list-col.right,::ng-deep .fs-list thead tr td.right,::ng-deep .fs-list thead tr th.right{text-align:right}::ng-deep .fs-list .fs-list-body .fs-list-row.draggable,::ng-deep .fs-list .fs-list-body tr.draggable,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable,::ng-deep .fs-list .fs-list-footer tr.draggable,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable,::ng-deep .fs-list .fs-list-head tr.draggable,::ng-deep .fs-list tbody .fs-list-row.draggable,::ng-deep .fs-list tbody tr.draggable,::ng-deep .fs-list tfoot .fs-list-row.draggable,::ng-deep .fs-list tfoot tr.draggable,::ng-deep .fs-list thead .fs-list-row.draggable,::ng-deep .fs-list thead tr.draggable{position:fixed;z-index:9999;box-shadow:2px 2px 2px 0 rgba(158,158,158,.65);border-radius:5px}::ng-deep .fs-list .fs-list-body .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-body .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-body tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-body tr.draggable td,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-footer .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-footer tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-footer tr.draggable td,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list .fs-list-head .fs-list-row.draggable td,::ng-deep .fs-list .fs-list-head tr.draggable .fs-list-col,::ng-deep .fs-list .fs-list-head tr.draggable td,::ng-deep .fs-list tbody .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list tbody .fs-list-row.draggable td,::ng-deep .fs-list tbody tr.draggable .fs-list-col,::ng-deep .fs-list tbody tr.draggable td,::ng-deep .fs-list tfoot .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list tfoot .fs-list-row.draggable td,::ng-deep .fs-list tfoot tr.draggable .fs-list-col,::ng-deep .fs-list tfoot tr.draggable td,::ng-deep .fs-list thead .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list thead .fs-list-row.draggable td,::ng-deep .fs-list thead tr.draggable .fs-list-col,::ng-deep .fs-list thead tr.draggable td{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;-moz-user-select:none;-ms-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}}"]
-    }),
-    __param(2, Optional()), __param(2, Inject(FS_LIST_DEFAULT_CONFIG)),
-    __param(3, Optional()),
-    __param(12, Optional()),
-    __param(13, Optional()),
-    __metadata("design:paramtypes", [ReorderController,
-        ElementRef, Object, FsScrollService,
-        SelectionDialog,
-        MatDialog,
-        ChangeDetectorRef,
-        GroupExpandNotifierService,
-        Router,
-        ActivatedRoute,
-        PersistanceController,
-        Location,
-        MatDialogRef,
-        DrawerRef])
-], FsListComponent);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsHeadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-list-head]',
+                    templateUrl: 'head.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: ReorderController }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sorting: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], hasRowActions: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], rowsContainer: [{
+                type: ViewChild,
+                args: ['rowsContainer', { read: ViewContainerRef, static: true }]
+            }] } });
 
-let FsListDraggableListDirective = class FsListDraggableListDirective {
+class FsListDraggableListDirective {
     constructor(_cdRef, _zone, _containerElement, _reorderController) {
         this._cdRef = _cdRef;
         this._zone = _zone;
@@ -4161,47 +4233,183 @@ let FsListDraggableListDirective = class FsListDraggableListDirective {
             doneResult
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(() => {
-                console.log('enable');
-                this._reorderController.enableReorderAction();
+                console.log('enable');
+                this._reorderController.enableReorderAction();
+            });
+        }
+    }
+    /**
+     * Fix background when mobile
+     * @param e
+     */
+    touchFix(e) {
+        if (!('clientX' in e) && !('clientY' in e)) {
+            const touches = e.touches || e.originalEvent.touches;
+            if (touches && touches.length) {
+                e.clientX = touches[0].clientX;
+                e.clientY = touches[0].clientY;
+            }
+            e.preventDefault();
+        }
+    }
+}
+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.ɵ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: [{
+                type: Input,
+                args: ['rows']
+            }] } });
+
+class FsRowInlineActionComponent {
+    constructor(_fsPrompt) {
+        this._fsPrompt = _fsPrompt;
+        this.clicked = new EventEmitter();
+        this.fileSelect = new EventEmitter();
+    }
+    actionClick(event) {
+        this.clicked.emit(event);
+    }
+    fileSelected(event) {
+        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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-list-row-inline-action',
+                    templateUrl: './inline-action.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FsPrompt }]; }, propDecorators: { action: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], fileSelect: [{
+                type: Output
+            }] } });
+
+class FsRowMenuActionComponent {
+    constructor() {
+        this.fileSelect = new EventEmitter();
+        this.fileError = new EventEmitter();
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowMenuActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-list-row-menu-action',
+                    templateUrl: './menu-action.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], fileSelect: [{
+                type: Output
+            }], fileError: [{
+                type: Output
+            }] } });
+
+class FsRowActionsComponent {
+    constructor(_fsPrompt) {
+        this._fsPrompt = _fsPrompt;
+        this.restoreMode = false;
+        this.rowActions = [];
+        this.menuRowActions = [];
+        this.inlineRowActions = [];
+        this._destroy$ = new Subject();
+    }
+    actionClick(action, row, event, menuRef) {
+        if (action.remove) {
+            if (typeof action.remove === 'boolean') {
+                this.removeAction(action, row.data, event, this.index);
+            }
+            else {
+                this._fsPrompt.confirm({
+                    title: action.remove.title,
+                    template: action.remove.template,
+                }).pipe(take(1), takeUntil(this._destroy$)).subscribe({
+                    next: () => {
+                        this.removeAction(action, row.data, event, this.index);
+                    },
+                    error: () => { },
+                });
+            }
+        }
+        else {
+            action.click(row.data, event, this.index, menuRef);
+        }
+    }
+    /**
+     * Track By for improve change detection
+     * @param index
+     */
+    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
+     * @param row
+     * @param event
+     * @param index
+     */
+    removeAction(action, row, event, index) {
+        const removeObservable = action.click(row, event, index);
+        if (removeObservable && removeObservable instanceof Observable) {
+            removeObservable
+                .pipe(take(1), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.rowRemoved.emit(row);
             });
         }
     }
-    /**
-     * Fix background when mobile
-     * @param e
-     */
-    touchFix(e) {
-        if (!('clientX' in e) && !('clientY' in e)) {
-            const touches = e.touches || e.originalEvent.touches;
-            if (touches && touches.length) {
-                e.clientX = touches[0].clientX;
-                e.clientY = touches[0].clientY;
-            }
-            e.preventDefault();
-        }
-    }
-};
-FsListDraggableListDirective.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: NgZone },
-    { type: ElementRef },
-    { type: ReorderController }
-];
-__decorate([
-    Input('rows'),
-    __metadata("design:type", Array)
-], FsListDraggableListDirective.prototype, "_rows", void 0);
-FsListDraggableListDirective = __decorate([
-    Directive({
-        selector: '[fsListDraggableList]',
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef,
-        NgZone,
-        ElementRef,
-        ReorderController])
-], FsListDraggableListDirective);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-list-row-actions',
+                    templateUrl: './actions.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FsPrompt }]; }, propDecorators: { row: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], restoreMode: [{
+                type: Input
+            }], rowActions: [{
+                type: Input
+            }], rowRemoved: [{
+                type: Input
+            }], menuRowActions: [{
+                type: Input
+            }], inlineRowActions: [{
+                type: Input
+            }], restoreAction: [{
+                type: Input
+            }] } });
 
-let FsRowComponent = class FsRowComponent {
+class FsRowComponent {
     constructor(el, reorderController, _cdRef, _differs, _renderer, _draggableList) {
         this.el = el;
         this.reorderController = reorderController;
@@ -4378,530 +4586,279 @@ let FsRowComponent = class FsRowComponent {
             }
         });
     }
-};
-FsRowComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ReorderController },
-    { type: ChangeDetectorRef },
-    { type: KeyValueDiffers },
-    { type: Renderer2 },
-    { type: FsListDraggableListDirective }
-];
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", Object)
-], FsRowComponent.prototype, "role", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Row)
-], FsRowComponent.prototype, "row", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsRowComponent.prototype, "rowActionsRaw", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsRowComponent.prototype, "groupActionsRaw", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsRowComponent.prototype, "hasRowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsRowComponent.prototype, "rowEvents", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsRowComponent.prototype, "rowClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsRowComponent.prototype, "restoreMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FsRowComponent.prototype, "rowIndex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsRowComponent.prototype, "columns", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", SelectionController)
-], FsRowComponent.prototype, "selection", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", EventEmitter)
-], FsRowComponent.prototype, "rowRemoved", void 0);
-__decorate([
-    ViewChildren('td'),
-    __metadata("design:type", Object)
-], FsRowComponent.prototype, "cellRefs", void 0);
-__decorate([
-    HostBinding('class'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], FsRowComponent.prototype, "rowCssClass", null);
-FsRowComponent = __decorate([
-    Component({
-        selector: '[fs-list-row]',
-        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    <mat-checkbox (change)=\"selectRow($event)\"\n                  [checked]=\"selected\"\n                  [indeterminate]=\"indeterminateSelected\">\n    </mat-checkbox>\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=\"(row.isGroup && !column.groupCellColspanned) || (!row.isGroup && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"column.cellConfigs.classesString\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(row.isGroup && column.groupCellConfigs.colspan) || 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  <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</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible; 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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        ReorderController,
-        ChangeDetectorRef,
-        KeyValueDiffers,
-        Renderer2,
-        FsListDraggableListDirective])
-], FsRowComponent);
-
-let FsBodyComponent = class FsBodyComponent {
-    constructor(reorderContoller, el, cdRef, differs) {
-        this.reorderContoller = reorderContoller;
-        this.el = el;
-        this.cdRef = cdRef;
-        this.differs = differs;
-        this.columns = [];
-        this.hasFooter = false;
-        this.rowActionsRaw = [];
-        this.groupActionsRaw = [];
-        this.rowEvents = {};
-        this.hasRowActions = false;
-        this.restoreMode = false;
-        this._destroy$ = new Subject();
-        this._rowsDiffer = differs.find([]).create(null);
-    }
-    ngDoCheck() {
-        if (this._rowsDiffer.diff(this.rows)) {
-            this.cdRef.markForCheck();
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-};
-FsBodyComponent.ctorParameters = () => [
-    { type: ReorderController },
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: IterableDiffers }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsBodyComponent.prototype, "rows", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsBodyComponent.prototype, "columns", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsBodyComponent.prototype, "hasFooter", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsBodyComponent.prototype, "rowActionsRaw", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsBodyComponent.prototype, "groupActionsRaw", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsBodyComponent.prototype, "rowEvents", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsBodyComponent.prototype, "rowClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsBodyComponent.prototype, "hasRowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", SelectionController)
-], FsBodyComponent.prototype, "selection", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsBodyComponent.prototype, "restoreMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", EventEmitter)
-], FsBodyComponent.prototype, "rowRemoved", void 0);
-__decorate([
-    ViewChild('rowsContainer', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", Object)
-], FsBodyComponent.prototype, "rowsContainer", void 0);
-__decorate([
-    ContentChild(FsRowComponent, { read: TemplateRef, static: true }),
-    __metadata("design:type", TemplateRef)
-], FsBodyComponent.prototype, "headerTemplate", void 0);
-FsBodyComponent = __decorate([
-    Component({
-        selector: '[fs-list-body]',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ReorderController,
-        ElementRef,
-        ChangeDetectorRef,
-        IterableDiffers])
-], FsBodyComponent);
+}
+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    <mat-checkbox (change)=\"selectRow($event)\"\n                  [checked]=\"selected\"\n                  [indeterminate]=\"indeterminateSelected\">\n    </mat-checkbox>\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=\"(row.isGroup && !column.groupCellColspanned) || (!row.isGroup && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"column.cellConfigs.classesString\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(row.isGroup && column.groupCellConfigs.colspan) || 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  <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</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible; 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-list-row]',
+                    templateUrl: 'row.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ReorderController }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: FsListDraggableListDirective }]; }, propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], row: [{
+                type: Input
+            }], rowActionsRaw: [{
+                type: Input
+            }], groupActionsRaw: [{
+                type: Input
+            }], hasRowActions: [{
+                type: Input
+            }], rowEvents: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], restoreMode: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], rowRemoved: [{
+                type: Input
+            }], cellRefs: [{
+                type: ViewChildren,
+                args: ['td']
+            }], rowCssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-let FsCellComponent = class FsCellComponent {
-    constructor() {
-        this.isColl = true;
-        this.role = 'gridcell';
-        this.cellContext = {};
+class FsListDraggableRowDirective {
+    constructor(_el, _renderer, _reorderController, _draggableList) {
+        this._el = _el;
+        this._renderer = _renderer;
+        this._reorderController = _reorderController;
+        this._draggableList = _draggableList;
         this._destroy$ = new Subject();
     }
     ngOnInit() {
-        this._initCellContext();
-        this._initCellTemplate();
-        this._listenGroupOpen();
-    }
-    ngOnChanges(changes) {
-        if (changes.rowIndex) {
-            this.cellContext.index = this.rowIndex;
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _initCellContext() {
-        this.cellContext.index = this.rowIndex;
-        if (this.row) {
-            if (this.row.isGroup) {
-                this.cellContext.groupIndex = this.row.index;
-            }
-            else if (this.row.isChild) {
-                this.cellContext.groupChildIndex = this.row.index;
-            }
-        }
-        this.cellContext.column = this.column;
-        if (this.row) {
-            this.cellContext.$implicit = this.row.data;
-            this.cellContext.row = this.row.data;
-            this.cellContext.value = this.row.data[this.column.name];
-            this.cellContext.expanded = this.row.expanded;
-        }
-    }
-    _initCellTemplate() {
-        if (this.row && this.row.isGroup) {
-            this.cellTemplate = this.column.groupCellTemplate || this.column.cellTemplate;
-        }
-        else {
-            this.cellTemplate = this.column.cellTemplate;
-        }
-    }
-    _listenGroupOpen() {
-        if (this.row && this.row.isGroup) {
-            this.row.expanded$
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((status) => {
-                this.cellContext.expanded = status;
-            });
+        if (this._reorderController.moveDropCallback) {
+            this._listenDragEvents();
         }
     }
-};
-__decorate([
-    HostBinding('class.fs-list-col'),
-    __metadata("design:type", Object)
-], FsCellComponent.prototype, "isColl", void 0);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", Object)
-], FsCellComponent.prototype, "role", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Column)
-], FsCellComponent.prototype, "column", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Row)
-], FsCellComponent.prototype, "row", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FsCellComponent.prototype, "rowIndex", void 0);
-FsCellComponent = __decorate([
-    Component({
-        selector: '[fs-cell]',
-        template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [])
-], FsCellComponent);
-
-let FsHeadComponent = class FsHeadComponent {
-    constructor(reorderController, cdRef) {
-        this.reorderController = reorderController;
-        this.cdRef = cdRef;
-        this.selectedAll = false;
-        this.ReorderPosition = ReorderPosition;
-        this.ReorderStrategy = ReorderStrategy;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.initSorting();
-        this.initSelection();
-    }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    /**
-     * Select All Visible Rows
-     * @param event
-     */
-    selectAll(event) {
-        this.selection.selectAllVisibleRows(event.checked);
-    }
-    /**
-     * Track By for improve change detection
-     * @param index
-     */
-    trackByFn(index) {
-        return index;
-    }
-    /**
-     * Subscribe to sorting change
-     */
-    initSorting() {
-        this.sorting.sortingChanged$
+    _listenDragEvents() {
+        this._draggableList
+            .dragStart$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.cdRef.detectChanges();
+            this._markReadyToSwapRows();
+        });
+        this._draggableList
+            .dragEnd$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._unmarkRows();
         });
     }
-    /**
-     * Subscribe to selection change
-     */
-    initSelection() {
-        if (this.selection) {
-            this.selection.selectionChange$
-                .pipe(filter(({ type }) => (type === SelectionChangeType.AllVisibleSelectionChange
-                || type === SelectionChangeType.SelectedAll
-                || type === SelectionChangeType.RowSelectionChange)), takeUntil(this._destroy$))
-                .subscribe(({ type, payload: status }) => {
-                this.selectedAll = status;
-                this.cdRef.markForCheck();
-            });
+    _markReadyToSwapRows() {
+        var _a, _b;
+        const currentEl = this.row;
+        const targetEl = this._draggableList.draggableItem;
+        const currentElGroup = (currentEl.isChild && currentEl.parent) || currentEl;
+        const targetElGroup = (targetEl.isChild && targetEl.parent) || targetEl;
+        this.row.readyToSwap = this._reorderController.moveDropCallback({
+            row1: currentEl === null || currentEl === void 0 ? void 0 : currentEl.data,
+            row2: targetEl === null || targetEl === void 0 ? void 0 : targetEl.data,
+            group1: (_a = currentEl === null || currentEl === void 0 ? void 0 : currentEl.parent) === null || _a === void 0 ? void 0 : _a.data,
+            group2: (_b = targetEl === null || targetEl === void 0 ? void 0 : targetEl.parent) === null || _b === void 0 ? void 0 : _b.data
+        });
+        if (!this.row.readyToSwap) {
+            this._renderer.addClass(this._el.nativeElement, 'fs-list-swap-restricted');
         }
     }
-};
-FsHeadComponent.ctorParameters = () => [
-    { type: ReorderController },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", SortingController)
-], FsHeadComponent.prototype, "sorting", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsHeadComponent.prototype, "columns", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FsHeadComponent.prototype, "hasRowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", SelectionController)
-], FsHeadComponent.prototype, "selection", void 0);
-__decorate([
-    ViewChild('rowsContainer', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", Object)
-], FsHeadComponent.prototype, "rowsContainer", void 0);
-FsHeadComponent = __decorate([
-    Component({
-        selector: '[fs-list-head]',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ReorderController,
-        ChangeDetectorRef])
-], FsHeadComponent);
+    _unmarkRows() {
+        if (!this.row.readyToSwap) {
+            this._renderer.removeClass(this._el.nativeElement, 'fs-list-swap-restricted');
+        }
+    }
+}
+FsListDraggableRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListDraggableRowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ReorderController }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Directive });
+FsListDraggableRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: { row: "row" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListDraggableRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsListDraggableRow]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ReorderController }, { type: FsListDraggableListDirective }]; }, propDecorators: { row: [{
+                type: Input
+            }] } });
 
-let FsHeadCellComponent = class FsHeadCellComponent extends FsCellComponent {
-    constructor(cdRef, differs) {
-        super();
+class FsBodyComponent {
+    constructor(reorderContoller, el, cdRef, differs) {
+        this.reorderContoller = reorderContoller;
+        this.el = el;
         this.cdRef = cdRef;
         this.differs = differs;
-        this.cellContext = {};
-        this._columnDiffer = differs.find({}).create();
+        this.columns = [];
+        this.hasFooter = false;
+        this.rowActionsRaw = [];
+        this.groupActionsRaw = [];
+        this.rowEvents = {};
+        this.hasRowActions = false;
+        this.restoreMode = false;
+        this._destroy$ = new Subject();
+        this._rowsDiffer = differs.find([]).create(null);
     }
     ngDoCheck() {
-        if (this._columnDiffer.diff(this.column)) {
+        if (this._rowsDiffer.diff(this.rows)) {
             this.cdRef.markForCheck();
         }
     }
-    initCellContext() {
-        this.cellContext.value = this.column.title;
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-};
-FsHeadCellComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: KeyValueDiffers }
-];
-FsHeadCellComponent = __decorate([
-    Component({
-        selector: '[fs-head-cell]',
-        template: "<div class=\"wrap\">\n    <span class=\"title\">\n      <ng-template [ngIf]=\"!column.headerTemplate\">{{column.title}}</ng-template>\n      <ng-template\n        [ngIf]=\"column.headerTemplate\"\n        [ngTemplateOutlet]=\"column.headerTemplate\"\n        [ngTemplateOutletContext]=\"cellContext\">\n      </ng-template>\n    </span>\n  <div class=\"direction\" *ngIf=\"column.ordered\" [ngSwitch]=\"column.sortingDirection\">\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_downward\" *ngSwitchCase=\"'asc'\">arrow_downward</mat-icon>\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_upward\" *ngSwitchCase=\"'desc'\">arrow_upward</mat-icon>\n  </div>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef,
-        KeyValueDiffers])
-], FsHeadCellComponent);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-list-body]',
+                    templateUrl: 'body.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: ReorderController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }]; }, propDecorators: { rows: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], hasFooter: [{
+                type: Input
+            }], rowActionsRaw: [{
+                type: Input
+            }], groupActionsRaw: [{
+                type: Input
+            }], rowEvents: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], hasRowActions: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], restoreMode: [{
+                type: Input
+            }], rowRemoved: [{
+                type: Input
+            }], rowsContainer: [{
+                type: ViewChild,
+                args: ['rowsContainer', { read: ViewContainerRef, static: true }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [FsRowComponent, { read: TemplateRef, static: true }]
+            }] } });
 
-let FsFooterComponent = class FsFooterComponent {
+class FsFooterCellComponent extends FsCellComponent {
     constructor() {
-        this.columns = [];
+        super();
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FsFooterComponent.prototype, "hasRowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsFooterComponent.prototype, "columns", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", SelectionController)
-], FsFooterComponent.prototype, "selection", void 0);
-FsFooterComponent = __decorate([
-    Component({
-        selector: '[fs-list-footer]',
-        template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n></tr>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [])
-], FsFooterComponent);
+}
+FsFooterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsFooterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n", directives: [{ type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-list-footer-cell]',
+                    templateUrl: 'footer-cell.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; } });
 
-let FsFooterRowComponent = class FsFooterRowComponent extends FsRowComponent {
+class FsFooterRowComponent extends FsRowComponent {
     constructor(el, reorderController, cdRef, differs, renderer) {
         super(el, reorderController, cdRef, differs, renderer, null);
         this.ReorderPosition = ReorderPosition;
     }
-};
-FsFooterRowComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ReorderController },
-    { type: ChangeDetectorRef },
-    { type: KeyValueDiffers },
-    { type: Renderer2 }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FsFooterRowComponent.prototype, "hasRowActions", void 0);
-FsFooterRowComponent = __decorate([
-    Component({
-        selector: '[fs-list-footer-row]',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        ReorderController,
-        ChangeDetectorRef,
-        KeyValueDiffers,
-        Renderer2])
-], FsFooterRowComponent);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-list-footer-row]',
+                    templateUrl: 'footer-row.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ReorderController }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }]; }, propDecorators: { hasRowActions: [{
+                type: Input
+            }] } });
 
-let FsFooterCellComponent = class FsFooterCellComponent extends FsCellComponent {
+class FsFooterComponent {
     constructor() {
-        super();
+        this.columns = [];
     }
-};
-FsFooterCellComponent = __decorate([
-    Component({
-        selector: '[fs-list-footer-cell]',
-        template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [])
-], FsFooterCellComponent);
+}
+FsFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: { hasRowActions: "hasRowActions", columns: "columns", selection: "selection" }, ngImport: i0, template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n></tr>\n", components: [{ type: FsFooterRowComponent, selector: "[fs-list-footer-row]", inputs: ["hasRowActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[fs-list-footer]',
+                    templateUrl: 'footer.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hasRowActions: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }] } });
 
-let FsStatusComponent = class FsStatusComponent {
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        this._destroy$ = new Subject();
+class FsListLoaderComponent {
+    constructor() {
+        this.placeholderWidths = [[], [], []];
+        this.widths = [];
+        this.cols = [];
+        this.rows = [];
     }
     ngOnInit() {
-        this.sorting.sortingChanged$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._cdRef.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    toggleDirection() {
-        if (this.sorting.sortingColumn.direction === 'asc') {
-            this.sorting.sortDirection(SortingDirection.desc);
+        this.cols = this.columns > 5 ? this.columns.splice(0, 5) : this.columns;
+        const length = this.cols.length;
+        for (let w = length; w >= 0; w--) {
+            this.widths[w] = w ? random(15, 100 / length, false) : 0;
         }
-        else {
-            this.sorting.sortDirection(SortingDirection.asc);
+        for (let r = 0; r < 3; r++) {
+            for (let c = 0; c < length; c++) {
+                this.placeholderWidths[r].push(random(50, 90));
+            }
         }
     }
-    setSortableColumn(column) {
-        if (this.sorting.sortingColumn !== column) {
-            this.sorting.sortBy(column);
+    ngOnChanges(changes) {
+        if (changes.loaderLines) {
+            this.rows = new Array(this.loaderLines);
         }
     }
-    setLimit(limit) {
-        this.paging.setLimit(limit);
-    }
-};
-FsStatusComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", PaginationController)
-], FsStatusComponent.prototype, "paging", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", SortingController)
-], FsStatusComponent.prototype, "sorting", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsStatusComponent.prototype, "rows", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsStatusComponent.prototype, "scrollable", void 0);
-__decorate([
-    Input(),
-    HostBinding('class.first-load'),
-    HostBinding('class.fs-skeleton-placeholder'),
-    __metadata("design:type", Boolean)
-], FsStatusComponent.prototype, "firstLoad", void 0);
-FsStatusComponent = __decorate([
-    Component({
-        selector: 'fs-list-status',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        preserveWhitespaces: true,
-        styles: [":host{display:inline-block}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}"]
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], FsStatusComponent);
+}
+FsListLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsListLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-list-loader',
+                    templateUrl: './loader.component.html',
+                    styleUrls: [
+                        './loader.component.scss',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], loaderLines: [{
+                type: Input
+            }] } });
 
-let FsPaginationComponent = class FsPaginationComponent {
+class FsPaginationComponent {
     constructor(cdRef) {
         this.cdRef = cdRef;
         this._destroy$ = new Subject();
@@ -4917,246 +4874,366 @@ let FsPaginationComponent = class FsPaginationComponent {
         this._destroy$.next();
         this._destroy$.complete();
     }
-};
-FsPaginationComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", PaginationController)
-], FsPaginationComponent.prototype, "pagination", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsPaginationComponent.prototype, "rows", void 0);
-FsPaginationComponent = __decorate([
-    Component({
-        selector: 'fs-list-pagination',
-        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 }} of {{ pagination.pages }}\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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{display:block}.paging{display:flex}.paging .pages{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.paging .pages a{text-align:center;color:rgba(0,0,0,.87);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}"]
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], 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 }} of {{ pagination.pages }}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-list-pagination',
+                    templateUrl: 'pagination.component.html',
+                    styleUrls: [
+                        './pagination.component.scss'
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pagination: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
 
-let FsListLoaderComponent = class FsListLoaderComponent {
-    constructor() {
-        this.placeholderWidths = [[], [], []];
-        this.widths = [];
-        this.cols = [];
-        this.rows = [];
+class FsListContentInitDirective {
+    constructor() { }
+    ngAfterViewInit() {
+        if (this.contentInitCallback) {
+            this.contentInitCallback();
+        }
+    }
+}
+FsListContentInitDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListContentInitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListContentInitDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: { contentInitCallback: ["fsListContentInit", "contentInitCallback"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListContentInitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsListContentInit]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { contentInitCallback: [{
+                type: Input,
+                args: ['fsListContentInit']
+            }] } });
+
+class FsListComponent {
+    constructor(reorderController, _el, _defaultOptions, fsScroll, selectionDialog, dialog, cdRef, _groupExpandNotifier, _router, _route, _persistance, _location, _dialogRef, _drawerRef) {
+        this.reorderController = reorderController;
+        this._el = _el;
+        this._defaultOptions = _defaultOptions;
+        this.fsScroll = fsScroll;
+        this.selectionDialog = selectionDialog;
+        this.dialog = dialog;
+        this.cdRef = cdRef;
+        this._groupExpandNotifier = _groupExpandNotifier;
+        this._router = _router;
+        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();
+        // Event will fired if action remove: true will clicked
+        this.rowRemoved = new EventEmitter();
+        this.firstLoad = true;
+        this._filterParamsReady = false;
+        this._inDialog = !!this._dialogRef || !!this._drawerRef;
+        this._destroy = new Subject();
+    }
+    set config(config) {
+        this._initWithConfig(config);
+    }
+    set filterReference(component) {
+        this._filterRef = component;
+        this.list.actions.setFilterRef(component);
+        this._emitFiltersReadyEvent();
+    }
+    /**
+     * Set columns to config
+     * Create Column Model instances
+     *
+     */
+    set columnTemplates(listColumnDirectives) {
+        this.listColumnDirectives = listColumnDirectives;
+        if (this.list) {
+            this.list.tranformTemplatesToColumns(listColumnDirectives);
+        }
+    }
+    set _emptyStateTemplate(template) {
+        if (this.list) {
+            this.list.emptyStateTemplate = template;
+        }
+    }
+    /**
+     * Return reference for filter
+     */
+    get filterRef() {
+        return this._filterRef;
+    }
+    get groupEnabled() {
+        return this.list.dataController.groupEnabled;
+    }
+    get paginatorVisible() {
+        return this.list.paging.enabled
+            && !this.firstLoad
+            && !this.list.scrollable
+            && !this.list.emptyStateEnabled
+            && this.list.dataController.visibleRowsCount > 0
+            && this.list.paging.pages > 1;
+    }
+    set groupEnabled(value) {
+        this.list.groupEnabled(value);
     }
     ngOnInit() {
-        this.cols = this.columns > 5 ? this.columns.splice(0, 5) : this.columns;
-        const length = this.cols.length;
-        for (let w = length; w >= 0; w--) {
-            this.widths[w] = w ? random(15, 100 / length, false) : 0;
+        this._subscribeToRemoveRow();
+        this._subscribeToGroupExpandStatusChange();
+    }
+    ngOnDestroy() {
+        if (this.list) {
+            this.list.destroy();
+        }
+        this._destroy.next();
+        this._destroy.complete();
+    }
+    nextPage() {
+        this.list.paging.goNext();
+    }
+    prevPage() {
+        this.list.paging.goPrev();
+    }
+    firstPage() {
+        this.list.paging.goFirst();
+    }
+    lastPage() {
+        this.list.paging.goLast();
+    }
+    reload() {
+        this.list.reload();
+    }
+    getData(trackBy) {
+        return this.list.getData(trackBy);
+    }
+    hasData(trackBy) {
+        return this.list.hasData(trackBy);
+    }
+    updateData(rows, trackBy) {
+        return this.list.dataController.updateData(rows, trackBy);
+    }
+    replaceRow(row, trackBy) {
+        return this.list.dataController.replaceData(row, trackBy);
+    }
+    updateSelectionConfig(config) {
+        this.list.selection.updateConfig(config);
+    }
+    resetSelectionActions() {
+        this.list.selection.resetActions();
+    }
+    removeData(data) {
+        return this.list.dataController.removeData(data);
+    }
+    setHeading(heading) {
+        this.list.heading = heading;
+    }
+    setSubheading(subheading) {
+        this.list.subheading = subheading;
+    }
+    reorderStart() {
+        this.reorderController.enableReorder();
+    }
+    reorderFinish() {
+        this.reorderController.disableReorder();
+    }
+    setActions(actions) {
+        if (actions) {
+            this.list.actions.clearActions();
+            this.list.actions.setActions(actions);
+        }
+    }
+    filterReady() {
+        this.list.filtersReady$.next();
+        this._filterParamsReady = true;
+        this._emitFiltersReadyEvent();
+    }
+    /**
+     * Update visibility for specific column
+     */
+    columnVisibility(name, show) {
+        this.columnsVisibility([{ name, show }]);
+    }
+    /**
+     * Update visibility for list of specific columns
+     */
+    columnsVisibility(columns) {
+        this.list.columns.updateVisibilityForCols(columns);
+    }
+    _emitFiltersReadyEvent() {
+        if (!!this.filterRef && this._filterParamsReady) {
+            this.filtersReady.emit();
+        }
+    }
+    /**
+     * Initialize config for list
+     * @param config
+     */
+    _initWithConfig(config) {
+        if (this.list) {
+            this.list.destroy();
         }
-        for (let r = 0; r < 3; r++) {
-            for (let c = 0; c < length; c++) {
-                this.placeholderWidths[r].push(random(50, 90));
-            }
+        const defaultOpts = this._defaultOptions
+            ? cloneDeep(this._defaultOptions)
+            : {};
+        const listConfig = mergeWith(defaultOpts, config, this._configMergeCustomizer);
+        if (listConfig.persist !== false) {
+            this._restorePersistance(listConfig.persist);
         }
-    }
-    ngOnChanges(changes) {
-        if (changes.loaderLines) {
-            this.rows = new Array(this.loaderLines);
+        this._updateCustomizeAction(listConfig.actions);
+        this.list = new List(this._el, listConfig, this.fsScroll, this.selectionDialog, this._router, this._route, this._persistance, this._inDialog);
+        this._waitFirstLoad();
+        this._listenFiltersQueryChange();
+        this.reorderController.initWithConfig(config.reorder, this.list.dataController, this.list.actions);
+        if (this.listColumnDirectives) {
+            this.list.tranformTemplatesToColumns(this.listColumnDirectives);
         }
+        this._listenSortingChange();
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsListLoaderComponent.prototype, "columns", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FsListLoaderComponent.prototype, "loaderLines", void 0);
-FsListLoaderComponent = __decorate([
-    Component({
-        selector: 'fs-list-loader',
-        template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:0 0}"]
-    })
-], FsListLoaderComponent);
-
-let FsRowActionsComponent = class FsRowActionsComponent {
-    constructor(_fsPrompt) {
-        this._fsPrompt = _fsPrompt;
-        this.restoreMode = false;
-        this.rowActions = [];
-        this.menuRowActions = [];
-        this.inlineRowActions = [];
-        this._destroy$ = new Subject();
-    }
-    actionClick(action, row, event, menuRef) {
-        if (action.remove) {
-            if (typeof action.remove === 'boolean') {
-                this.removeAction(action, row.data, event, this.index);
-            }
-            else {
-                this._fsPrompt.confirm({
-                    title: action.remove.title,
-                    template: action.remove.template,
-                }).pipe(take(1), takeUntil(this._destroy$)).subscribe({
-                    next: () => {
-                        this.removeAction(action, row.data, event, this.index);
+    /**
+     * Find action with customize flag and re-declare click function for CustomizeColsDialog
+     * @param actions
+     */
+    _updateCustomizeAction(actions) {
+        const customizeAction = actions === null || actions === void 0 ? void 0 : actions.find((action) => action.customize);
+        if (customizeAction) {
+            const actionClickFn = customizeAction.click;
+            customizeAction.click = () => {
+                if (actionClickFn) {
+                    actionClickFn(null);
+                }
+                const dialogRef = this.dialog.open(CustomizeColsDialogComponent, {
+                    data: {
+                        columns: this.list.columns.columnsForDialog,
+                        changeFn: this.list.columns.changeFn,
                     },
-                    error: () => { },
                 });
-            }
-        }
-        else {
-            action.click(row.data, event, this.index, menuRef);
+                dialogRef
+                    .afterClosed()
+                    .pipe(takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
+                    .subscribe((data) => {
+                    if (data) {
+                        this.list.columns.updateVisibilityForCols(data);
+                        this.cdRef.markForCheck();
+                    }
+                });
+            };
         }
     }
     /**
-     * Track By for improve change detection
-     * @param index
+     * Update sorting in filter
      */
-    trackByFn(index) {
-        return index;
+    _listenSortingChange() {
+        this.list.sorting
+            .sortingChanged$
+            .pipe(takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
+            .subscribe((sort) => {
+            this._filterRef.updateSort(sort);
+        });
     }
-    clickOnTrigger(event) {
-        event.stopPropagation();
-        this.rowActions
-            .forEach((action) => action.updateLabel(this.row.data));
+    _subscribeToRemoveRow() {
+        this.rowRemoved
+            .pipe(takeUntil(this._destroy))
+            .subscribe((row) => {
+            this.list.dataController.removeData(row);
+        });
     }
-    /**
-     * Emit that some row must be removed
-     * @param action
-     * @param row
-     * @param event
-     * @param index
-     */
-    removeAction(action, row, event, index) {
-        const removeObservable = action.click(row, event, index);
-        if (removeObservable && removeObservable instanceof Observable) {
-            removeObservable
-                .pipe(take(1), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.rowRemoved.emit(row);
+    _subscribeToGroupExpandStatusChange() {
+        if (this.list.dataController.hasGroups) {
+            this._groupExpandNotifier.expandStatusChange$
+                .pipe(takeUntil(this._destroy))
+                .subscribe((row) => {
+                this.list.dataController.toggleRowGroup(row);
             });
         }
     }
-};
-FsRowActionsComponent.ctorParameters = () => [
-    { type: FsPrompt }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Row)
-], FsRowActionsComponent.prototype, "row", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FsRowActionsComponent.prototype, "index", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsRowActionsComponent.prototype, "restoreMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsRowActionsComponent.prototype, "rowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", EventEmitter)
-], FsRowActionsComponent.prototype, "rowRemoved", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsRowActionsComponent.prototype, "menuRowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsRowActionsComponent.prototype, "inlineRowActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", RowAction)
-], FsRowActionsComponent.prototype, "restoreAction", void 0);
-FsRowActionsComponent = __decorate([
-    Component({
-        selector: 'fs-list-row-actions',
-        template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action class=\"row-inline-action row-inline-action-{{action.type}}\"\n                               [action]=\"action\"\n                               [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n                               (clicked)=\"actionClick(action, row, $event)\"\n                               (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu class=\"row-menu-action\"\n         *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n         (click)=\"clickOnTrigger($event)\"\n         #menuRef\n>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template class=\"hidden-mobile-menu-action\"\n                   fs-menu-item\n                   [link]=\"action.routerLink?.link\"\n                   [queryParams]=\"action.routerLink?.queryParams\"\n                   [target]=\"action.routerLink?.target\"\n                   [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template fs-menu-item\n                         [link]=\"subAction.routerLink?.link\"\n                         [queryParams]=\"subAction.routerLink?.queryParams\"\n                         [target]=\"subAction.routerLink?.target\"\n                         [hidden]=\"!subAction.isShown\"\n                         (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template fs-menu-item\n                     [link]=\"action.routerLink?.link\"\n                     [queryParams]=\"action.routerLink?.queryParams\"\n                     [target]=\"action.routerLink?.target\"\n                     [hidden]=\"!action.isShown\"\n                     (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [FsPrompt])
-], FsRowActionsComponent);
-
-let FsRowInlineActionComponent = class FsRowInlineActionComponent {
-    constructor(_fsPrompt) {
-        this._fsPrompt = _fsPrompt;
-        this.clicked = new EventEmitter();
-        this.fileSelect = new EventEmitter();
+    _waitFirstLoad() {
+        this.list.loading$
+            .pipe(skip(1), filter((value) => value === false), take(1), takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
+            .subscribe(() => {
+            this.firstLoad = false;
+            this.cdRef.markForCheck();
+        });
     }
-    actionClick(event) {
-        this.clicked.emit(event);
+    _listenFiltersQueryChange() {
+        this.list.filtersQuery$
+            .pipe(takeUntil(this.list.onDestroy$), takeUntil(this._destroy))
+            .subscribe((value) => {
+            if (value) {
+                const activeFilters = Object.keys(value).length;
+                this.reorderController.setNunberOfActiveFilters(activeFilters);
+            }
+        });
     }
-    fileSelected(event) {
-        this.fileSelect.emit(event);
+    _configMergeCustomizer(objValue, srcValue) {
+        if (Array.isArray(objValue)) {
+            return objValue;
+        }
     }
-};
-FsRowInlineActionComponent.ctorParameters = () => [
-    { type: FsPrompt }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", RowAction)
-], FsRowInlineActionComponent.prototype, "action", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsRowInlineActionComponent.prototype, "clicked", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsRowInlineActionComponent.prototype, "fileSelect", void 0);
-FsRowInlineActionComponent = __decorate([
-    Component({
-        selector: 'fs-list-row-inline-action',
-        template: "<ng-container *ngIf=\"action.isShown\" [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-raised-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-raised-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-icon-button\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-icon-button\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-fab\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-fab\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button type=\"button\"\n              mat-mini-fab\n              (click)=\"actionClick($event)\"\n              [ngClass]=\"action.classArray\"\n      >\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a mat-mini-fab\n         [routerLink]=\"action.routerLink.link\"\n         [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #uploadFileBtn>\n      <fs-file\n        class=\"action-button\"\n        [accept]=\"action.fileConfig.accept || '*'\"\n        [multiple]=\"action.fileConfig.multiple\"\n        [minWidth]=\"action.fileConfig.minWidth\"\n        [minHeight]=\"action.fileConfig.minHeight\"\n        [imageWidth]=\"action.fileConfig.maxWidth\"\n        [imageHeight]=\"action.fileConfig.maxHeight\"\n        (select)=\"fileSelected($event)\"\n        (error)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n        {{action.label}}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [FsPrompt])
-], FsRowInlineActionComponent);
-
-let FsRowMenuActionComponent = class FsRowMenuActionComponent {
-    constructor() {
-        this.fileSelect = new EventEmitter();
-        this.fileError = new EventEmitter();
+    _restorePersistance(persistConfig) {
+        const namespace = getNormalizedPath(this._location);
+        this._persistance.setConfig(persistConfig, namespace, this._inDialog);
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsRowMenuActionComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsRowMenuActionComponent.prototype, "label", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsRowMenuActionComponent.prototype, "file", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsRowMenuActionComponent.prototype, "fileSelect", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsRowMenuActionComponent.prototype, "fileError", void 0);
-FsRowMenuActionComponent = __decorate([
-    Component({
-        selector: 'fs-list-row-menu-action',
-        template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n  {{label}}\n</ng-container>\n\n<ng-template #withFile>\n  <fs-file\n    class=\"action-button\"\n    [accept]=\"file.accept || '*'\"\n    [multiple]=\"file.multiple\"\n    [minWidth]=\"file.minWidth\"\n    [minHeight]=\"file.minHeight\"\n    [imageWidth]=\"file.maxWidth\"\n    [imageHeight]=\"file.maxHeight\"\n    (select)=\"fileSelect.emit($event)\"\n    (error)=\"fileError.emit($event)\">\n    <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n    {{label}}\n  </fs-file>\n</ng-template>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], FsRowMenuActionComponent);
+}
+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.ɵ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: ["::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 });
+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',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        GroupExpandNotifierService,
+                        PersistanceController,
+                        ReorderController,
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: ReorderController }, { type: i0.ElementRef }, { 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: Optional
+                }] }, { type: i9.DrawerRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { classFsList: [{
+                type: HostBinding,
+                args: ['class.fs-list']
+            }], config: [{
+                type: Input,
+                args: ['config']
+            }], loaderLines: [{
+                type: Input
+            }], filtersReady: [{
+                type: Output
+            }], filterReference: [{
+                type: ViewChild,
+                args: [FilterComponent]
+            }], columnTemplates: [{
+                type: ContentChildren,
+                args: [FsListColumnDirective]
+            }], _emptyStateTemplate: [{
+                type: ContentChild,
+                args: [FsListEmptyStateDirective, { read: TemplateRef }]
+            }] } });
 
-let FsListManageSavedFiltersComponent = class FsListManageSavedFiltersComponent {
+class FsListManageSavedFiltersComponent {
     constructor(_externalParams) {
         this._externalParams = _externalParams;
         this._reorderReady = true;
@@ -5214,133 +5291,31 @@ let FsListManageSavedFiltersComponent = class FsListManageSavedFiltersComponent
             }
         };
     }
-};
-FsListManageSavedFiltersComponent.ctorParameters = () => [
-    { type: ExternalParamsController$1 }
-];
-FsListManageSavedFiltersComponent = __decorate([
-    Component({
-        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"
-    }),
-    __metadata("design:paramtypes", [ExternalParamsController$1])
-], FsListManageSavedFiltersComponent);
-
-let FsListSavedFiltersComponent = class FsListSavedFiltersComponent {
-    constructor(_dialog, _externalParams, _vcRef) {
-        this._dialog = _dialog;
-        this._externalParams = _externalParams;
-        this._vcRef = _vcRef;
-    }
-    get savedFiltersEnabled$() {
-        return this._externalParams.savedFiltersController.enabled$;
-    }
-    showManageDialog() {
-        this._dialog.open(FsListManageSavedFiltersComponent, {
-            viewContainerRef: this._vcRef,
-        });
-    }
-};
-FsListSavedFiltersComponent.ctorParameters = () => [
-    { type: MatDialog },
-    { type: ExternalParamsController$1 },
-    { type: ViewContainerRef }
-];
-FsListSavedFiltersComponent = __decorate([
-    Component({
-        selector: 'fs-list-saved-filters',
-        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"
-    }),
-    __metadata("design:paramtypes", [MatDialog,
-        ExternalParamsController$1,
-        ViewContainerRef])
-], FsListSavedFiltersComponent);
-
-let FsListDraggableRowDirective = class FsListDraggableRowDirective {
-    constructor(_el, _renderer, _reorderController, _draggableList) {
-        this._el = _el;
-        this._renderer = _renderer;
-        this._reorderController = _reorderController;
-        this._draggableList = _draggableList;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        if (this._reorderController.moveDropCallback) {
-            this._listenDragEvents();
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _listenDragEvents() {
-        this._draggableList
-            .dragStart$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._markReadyToSwapRows();
-        });
-        this._draggableList
-            .dragEnd$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._unmarkRows();
-        });
-    }
-    _markReadyToSwapRows() {
-        var _a, _b, _c, _d, _e, _f;
-        const currentEl = this.row;
-        const targetEl = this._draggableList.draggableItem;
-        const currentElGroup = (currentEl.isChild && currentEl.parent) || currentEl;
-        const targetElGroup = (targetEl.isChild && targetEl.parent) || targetEl;
-        this.row.readyToSwap = this._reorderController.moveDropCallback({
-            row1: (_a = currentEl) === null || _a === void 0 ? void 0 : _a.data,
-            row2: (_b = targetEl) === null || _b === void 0 ? void 0 : _b.data,
-            group1: (_d = (_c = currentEl) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d.data,
-            group2: (_f = (_e = targetEl) === null || _e === void 0 ? void 0 : _e.parent) === null || _f === void 0 ? void 0 : _f.data
-        });
-        if (!this.row.readyToSwap) {
-            this._renderer.addClass(this._el.nativeElement, 'fs-list-swap-restricted');
-        }
-    }
-    _unmarkRows() {
-        if (!this.row.readyToSwap) {
-            this._renderer.removeClass(this._el.nativeElement, 'fs-list-swap-restricted');
-        }
-    }
-};
-FsListDraggableRowDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: ReorderController },
-    { type: FsListDraggableListDirective }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Row)
-], FsListDraggableRowDirective.prototype, "row", void 0);
-FsListDraggableRowDirective = __decorate([
-    Directive({
-        selector: '[fsListDraggableRow]',
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        ReorderController,
-        FsListDraggableListDirective])
-], FsListDraggableRowDirective);
+}
+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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListManageSavedFiltersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: 'manage-saved-filters.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: i2$2.ExternalParamsController }]; } });
 
-let FsListContentDirective = class FsListContentDirective {
-};
-FsListContentDirective = __decorate([
-    Directive({
-        selector: '[fs-list-content]',
-    })
-], FsListContentDirective);
+class FsListContentDirective {
+}
+FsListContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsListContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListContentDirective, selector: "[fs-list-content]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs-list-content]',
+                }]
+        }] });
 
-var FsListModule_1;
-let FsListModule = FsListModule_1 = class FsListModule {
+class FsListModule {
     static forRoot(config = {}) {
         return {
-            ngModule: FsListModule_1,
+            ngModule: FsListModule,
             providers: [
                 { provide: FS_LIST_CONFIG, useValue: config },
                 {
@@ -5351,10 +5326,69 @@ let FsListModule = FsListModule_1 = class FsListModule {
             ]
         };
     }
-};
-FsListModule = FsListModule_1 = __decorate([
-    NgModule({
-        imports: [
+}
+FsListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, declarations: [
+        // Components
+        FsListComponent,
+        FsRowComponent,
+        FsRowActionsComponent,
+        FsRowInlineActionComponent,
+        FsRowMenuActionComponent,
+        FsCellComponent,
+        FsFooterRowComponent,
+        FsFooterCellComponent,
+        FsStatusComponent,
+        FsListLoaderComponent,
+        FsListSavedFiltersComponent,
+        FsListManageSavedFiltersComponent,
+        // Internal Components
+        FsHeadComponent,
+        FsHeadCellComponent,
+        FsBodyComponent,
+        FsFooterComponent,
+        FsPaginationComponent,
+        // Directives
+        FsListColumnDirective,
+        FsListCellDirective,
+        FsListHeaderDirective,
+        FsListFooterDirective,
+        FsListGroupCellDirective,
+        FsListGroupExpandTriggerDirective,
+        FsListDraggableListDirective,
+        FsListDraggableRowDirective,
+        FsListEmptyStateDirective,
+        FsListContentDirective,
+        FsListContentInitDirective,
+        // Dialog
+        CustomizeColsDialogComponent], imports: [CommonModule,
+        RouterModule,
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatRippleModule,
+        FsFilterModule,
+        FsMenuModule,
+        FlexLayoutModule,
+        FsScrollModule,
+        FsPromptModule,
+        MatDialogModule,
+        MatTooltipModule,
+        FsFileModule], exports: [FsListComponent,
+        FsRowComponent,
+        FsCellComponent,
+        FsListLoaderComponent,
+        FsListColumnDirective,
+        FsListCellDirective,
+        FsListHeaderDirective,
+        FsListFooterDirective,
+        FsListGroupCellDirective,
+        FsListGroupExpandTriggerDirective,
+        FsListEmptyStateDirective,
+        FsListContentDirective] });
+FsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, providers: [], imports: [[
             CommonModule,
             RouterModule,
             MatButtonModule,
@@ -5371,62 +5405,80 @@ FsListModule = FsListModule_1 = __decorate([
             MatDialogModule,
             MatTooltipModule,
             FsFileModule,
-        ],
-        declarations: [
-            // Components
-            FsListComponent,
-            FsRowComponent,
-            FsRowActionsComponent,
-            FsRowInlineActionComponent,
-            FsRowMenuActionComponent,
-            FsCellComponent,
-            FsFooterRowComponent,
-            FsFooterCellComponent,
-            FsStatusComponent,
-            FsListLoaderComponent,
-            FsListSavedFiltersComponent,
-            FsListManageSavedFiltersComponent,
-            // Internal Components
-            FsHeadComponent,
-            FsHeadCellComponent,
-            FsBodyComponent,
-            FsFooterComponent,
-            FsPaginationComponent,
-            // Directives
-            FsListColumnDirective,
-            FsListCellDirective,
-            FsListHeaderDirective,
-            FsListFooterDirective,
-            FsListGroupCellDirective,
-            FsListGroupExpandTriggerDirective,
-            FsListDraggableListDirective,
-            FsListDraggableRowDirective,
-            FsListEmptyStateDirective,
-            FsListContentDirective,
-            // Dialog
-            CustomizeColsDialogComponent,
-        ],
-        entryComponents: [
-            // Dialog
-            CustomizeColsDialogComponent,
-        ],
-        providers: [],
-        exports: [
-            FsListComponent,
-            FsRowComponent,
-            FsCellComponent,
-            FsListLoaderComponent,
-            FsListColumnDirective,
-            FsListCellDirective,
-            FsListHeaderDirective,
-            FsListFooterDirective,
-            FsListGroupCellDirective,
-            FsListGroupExpandTriggerDirective,
-            FsListEmptyStateDirective,
-            FsListContentDirective,
-        ],
-    })
-], FsListModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatProgressSpinnerModule,
+                        MatCheckboxModule,
+                        MatRippleModule,
+                        FsFilterModule,
+                        FsMenuModule,
+                        FlexLayoutModule,
+                        FsScrollModule,
+                        FsPromptModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        FsFileModule,
+                    ],
+                    declarations: [
+                        // Components
+                        FsListComponent,
+                        FsRowComponent,
+                        FsRowActionsComponent,
+                        FsRowInlineActionComponent,
+                        FsRowMenuActionComponent,
+                        FsCellComponent,
+                        FsFooterRowComponent,
+                        FsFooterCellComponent,
+                        FsStatusComponent,
+                        FsListLoaderComponent,
+                        FsListSavedFiltersComponent,
+                        FsListManageSavedFiltersComponent,
+                        // Internal Components
+                        FsHeadComponent,
+                        FsHeadCellComponent,
+                        FsBodyComponent,
+                        FsFooterComponent,
+                        FsPaginationComponent,
+                        // Directives
+                        FsListColumnDirective,
+                        FsListCellDirective,
+                        FsListHeaderDirective,
+                        FsListFooterDirective,
+                        FsListGroupCellDirective,
+                        FsListGroupExpandTriggerDirective,
+                        FsListDraggableListDirective,
+                        FsListDraggableRowDirective,
+                        FsListEmptyStateDirective,
+                        FsListContentDirective,
+                        FsListContentInitDirective,
+                        // Dialog
+                        CustomizeColsDialogComponent,
+                    ],
+                    providers: [],
+                    exports: [
+                        FsListComponent,
+                        FsRowComponent,
+                        FsCellComponent,
+                        FsListLoaderComponent,
+                        FsListColumnDirective,
+                        FsListCellDirective,
+                        FsListHeaderDirective,
+                        FsListFooterDirective,
+                        FsListGroupCellDirective,
+                        FsListGroupExpandTriggerDirective,
+                        FsListEmptyStateDirective,
+                        FsListContentDirective,
+                    ],
+                }]
+        }] });
 function FsListConfigFactory(config) {
     return merge$1({ noResults: { message: 'No Results Found' } }, config);
 }
@@ -5439,5 +5491,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, FsListHeaderDirective, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig, FsListConfigFactory as ɵa, GroupExpandNotifierService as ɵb, PersistanceController as ɵc, FsListGroupCellDirective as ɵd, FsListGroupExpandTriggerDirective as ɵe, FsListDraggableListDirective as ɵf, FsRowActionsComponent as ɵg, FsRowInlineActionComponent as ɵh, FsRowMenuActionComponent as ɵi, FsListLoaderComponent as ɵj, FsListSavedFiltersComponent as ɵk, FsListManageSavedFiltersComponent as ɵl, FsListDraggableRowDirective as ɵm, CustomizeColsDialogComponent as ɵn };
+export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListContentDirective, FsListEmptyStateDirective, FsListFooterDirective, FsListGroupCellDirective, FsListGroupExpandTriggerDirective, FsListHeaderDirective, FsListLoaderComponent, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig };
 //# sourceMappingURL=firestitch-list.js.map