@firestitch/list 9.12.3 → 12.0.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 { TemplateRef, Injectable, Directive, Input, HostListener, 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 { isString, isObject, isBoolean, isNumber, isFunction, get, cloneDeep, random, mergeWith, merge as merge$1 } from 'lodash-es';
 import { Subject, BehaviorSubject, Observable, merge, from, combineLatest, of } from 'rxjs';
-import { takeUntil, tap, take, map, debounceTime, switchMap, mapTo, catchError, distinctUntilChanged, shareReplay, skip, filter } from 'rxjs/operators';
-import { SelectionDialog } from '@firestitch/selection';
+import { takeUntil, tap, distinctUntilChanged, take, map, debounceTime, switchMap, mapTo, catchError, shareReplay, filter, skip } 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 = {}) {
@@ -923,7 +940,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
@@ -1179,9 +1196,8 @@ var PaginationStrategy;
     PaginationStrategy["None"] = "none";
 })(PaginationStrategy || (PaginationStrategy = {}));
 
-class PaginationController extends Model {
+class PaginationController {
     constructor() {
-        super();
         this.limit = 25;
         this.manual = false;
         this.page = 1; // Active page
@@ -1207,7 +1223,8 @@ class PaginationController extends Model {
         return this._pages$.getValue();
     }
     get pages$() {
-        return this._pages$.asObservable();
+        return this._pages$
+            .pipe(distinctUntilChanged());
     }
     /**
      * Fire if page was changed
@@ -1255,6 +1272,18 @@ class PaginationController extends Model {
         }
         return {};
     }
+    get loadMoreQuery() {
+        switch (this.strategy) {
+            case PaginationStrategy.Page:
+                return this.query;
+            case PaginationStrategy.Offset:
+                const query = this.queryOffsetStrategy;
+                query.limit = query.offset + query.limit;
+                query.offset = 0;
+                return query;
+        }
+        return {};
+    }
     /**
      * Query for Page Strategy
      */
@@ -1361,12 +1390,6 @@ class PaginationController extends Model {
         const to = Math.min(this.records, current + this.limit);
         return `${from}-${to}`;
     }
-    _fromJSON(value) {
-        super._fromJSON(value);
-        if (!value.limit) {
-            this.limit = 25;
-        }
-    }
     initWithConfig(config, loadMore, infinityScrollEnabled = false) {
         if (config) {
             if (config.limits) {
@@ -1375,12 +1398,12 @@ class PaginationController extends Model {
             if (config.limit) {
                 this.limit = config.limit;
             }
-            if (loadMore) {
-                this.setLoadMore(loadMore);
-            }
-            this._infinityScrollEnabled = infinityScrollEnabled;
             this.strategy = config.strategy;
         }
+        if (loadMore) {
+            this.setLoadMore(loadMore);
+        }
+        this._infinityScrollEnabled = infinityScrollEnabled;
     }
     /**
      * If pagination has prev page when Page Strategy
@@ -1409,13 +1432,13 @@ class PaginationController extends Model {
     /**
      * Update paging config and all related fields
      * @param config
-     * @param displayed
-     * @param loadMore
+     * @param displayedRecords
+     * @param loadMoreOperation
      */
-    updatePaging(config, displayed = 0, loadMore = false) {
-        if (!loadMore) {
-            this._fromJSON(config);
-            this.displayed = displayed;
+    updatePaging(config, displayedRecords = 0, loadMoreOperation = false) {
+        if (!loadMoreOperation) {
+            this._fromParams(config);
+            this.displayed = displayedRecords;
         }
         else {
             this.records = config.records;
@@ -1602,6 +1625,19 @@ class PaginationController extends Model {
         this._onDestroy$.next();
         this._onDestroy$.complete();
     }
+    /**
+     * Update paging state
+     * @param params
+     */
+    _fromParams(params) {
+        var _a;
+        if (!this.loadMoreEnabled) {
+            this.limit = (_a = params.limit) !== null && _a !== void 0 ? _a : 25;
+        }
+        this.records = params.records;
+        this.manual = params.manual;
+        this.pages = params.pages || 0;
+    }
     /**
      * Calc and update offset
      */
@@ -1615,23 +1651,6 @@ class PaginationController extends Model {
         this.pages = Math.ceil(this.records / this.limit);
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], PaginationController.prototype, "limit", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Number)
-], PaginationController.prototype, "records", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], PaginationController.prototype, "manual", void 0);
-__decorate([
-    Alias('pages'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], PaginationController.prototype, "pages", null);
 
 var SelectionChangeType;
 (function (SelectionChangeType) {
@@ -1761,6 +1780,7 @@ class SelectionController {
                 selectAll: this.selectAll,
                 allCount: this._totalRecordsCount,
                 actions: [...this.actions],
+                // selectAll: this.sele
             });
             this._subscribeToSelection();
         }
@@ -1827,11 +1847,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() {
@@ -2327,20 +2347,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;
         }
     }
@@ -2759,9 +2777,20 @@ class List extends Model {
             var _a;
             (_a = this.selection) === null || _a === void 0 ? void 0 : _a.closeSelectionDialog();
         }), map((params) => {
-            const query = this.paging.hasOffsetStrategy && params && params.loadOffset
-                ? Object.assign({}, this.filtersQuery, this.paging.loadDeletedOffsetQuery)
-                : Object.assign({}, this.filtersQuery, this.paging.query);
+            let query = Object.assign({}, this.filtersQuery);
+            if (this.paging.hasOffsetStrategy && params && params.loadOffset) {
+                query = Object.assign(query, this.paging.loadDeletedOffsetQuery);
+            }
+            else {
+                const allRecordsRangeNeeded = (this.initialFetch
+                    || this.dataController.operation === FsListState.Reload) && this.paging.loadMoreEnabled;
+                if (allRecordsRangeNeeded) {
+                    query = Object.assign(query, this.paging.loadMoreQuery);
+                }
+                else {
+                    query = Object.assign(query, this.paging.query);
+                }
+            }
             if (this.sorting.sortingColumn) {
                 Object.assign(query, {
                     order: `${this.sorting.sortingColumn.name},${this.sorting.sortingColumn.direction}`
@@ -2788,6 +2817,7 @@ class List extends Model {
             return source$;
         }), takeUntil(this.onDestroy$))
             .subscribe((response) => {
+            this.initialFetch = false;
             this.completeFetch(response);
         });
     }
@@ -3142,7 +3172,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);
@@ -3190,10 +3220,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;
@@ -3290,75 +3320,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();
@@ -3373,12 +3401,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;
     }
@@ -3387,125 +3417,97 @@ 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;
     }
-};
-__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);
+}
+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: { title: "title", name: "name", show: "show", 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'
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], show: [{
+                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']
+            }], 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 }]
+            }] } });
 
-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 = [];
@@ -3551,385 +3553,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);
-    }
-    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;
+// 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;
     }
-    get groupEnabled() {
-        return this.list.dataController.groupEnabled;
+    get savedFiltersEnabled$() {
+        return this._externalParams.savedFiltersController.enabled$;
     }
-    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;
+    showManageDialog() {
+        // this._dialog.open(FsListManageSavedFiltersComponent, {
+        //   viewContainerRef: this._vcRef,
+        // });
     }
-    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();
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    lastPage() {
-        this.list.paging.goLast();
+    toggleDirection() {
+        if (this.sorting.sortingColumn.direction === 'asc') {
+            this.sorting.sortDirection(SortingDirection.desc);
+        }
+        else {
+            this.sorting.sortDirection(SortingDirection.asc);
+        }
     }
-    reload() {
-        this.list.reload();
+    setSortableColumn(column) {
+        if (this.sorting.sortingColumn !== column) {
+            this.sorting.sortBy(column);
+        }
     }
-    getData(trackBy) {
-        return this.list.getData(trackBy);
+    setLimit(limit) {
+        this.paging.setLimit(limit);
     }
-    hasData(trackBy) {
-        return this.list.hasData(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();
     }
-    updateData(rows, trackBy) {
-        return this.list.dataController.updateData(rows, trackBy);
+    ngOnInit() {
+        this._initCellContext();
+        this._initCellTemplate();
+        this._listenGroupOpen();
     }
-    replaceRow(row, trackBy) {
-        return this.list.dataController.replaceData(row, trackBy);
+    ngOnChanges(changes) {
+        if (changes.rowIndex) {
+            this.cellContext.index = this.rowIndex;
+        }
     }
-    updateSelectionConfig(config) {
-        this.list.selection.updateConfig(config);
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    resetSelectionActions() {
-        this.list.selection.resetActions();
-    }
-    removeData(data) {
-        return this.list.dataController.removeData(data);
-    }
-    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\"\r\n     [ngClass]=\"{ 'has-filter-input': list.filterInput,\r\n                  'has-filters': list.filterConfig?.items.length,\r\n                  'has-heading': list.heading,\r\n                  'has-status': list.status,\r\n                  'has-chips': list.chips,\r\n                  'has-actions': list.actions.hasActions,\r\n                  'first-load': firstLoad,\r\n                  'loading': list.loading$ | async }\">\r\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\r\n</div>\r\n\r\n<ng-template #listContainerContent>\r\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\r\n    <!-- Header -->\r\n    <div class=\"fs-list-header-container\">\r\n\r\n      <div class=\"fs-list-header\"\r\n        [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated$ || !list.filterConfig?.items.length }\">\r\n        <div class=\"heading-container\">\r\n          <h2 class=\"heading\" *ngIf=\"list.heading\">{{list.heading}}</h2>\r\n          <span class=\"subheading\" *ngIf=\"list.subheading\">{{list.subheading}}</span>\r\n        </div>\r\n        <fs-filter\r\n          class=\"fs-list-filter\"\r\n          *ngIf=\"list.filterConfig\"\r\n          [filter]=\"list.filterConfig\"\r\n          [showSortBy]=\"!list.status\"\r\n          [showFilterInput]=\"list.filterInput\"\r\n          (ready)=\"filterReady()\">\r\n\r\n          <ng-template fsFilterStatusBar>\r\n            <ng-container *ngIf=\"\r\n              list.paging &&\r\n              !(reorderController.manualReorderActivated$ | async) &&\r\n              (!reorderController.enabled || reorderController.status) &&\r\n              ((list.scrollable && list.scrollable.status) || !list.scrollable)\">\r\n              <!-- Status -->\r\n              <fs-list-status\r\n                class=\"fs-list-status\"\r\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\r\n                [rows]=\"listData\"\r\n                [sorting]=\"list.sorting\"\r\n                [paging]=\"list.paging\"\r\n                [firstLoad]=\"firstLoad\"\r\n                [scrollable]=\"list.scrollable\">\r\n              </fs-list-status>\r\n            </ng-container>\r\n          </ng-template>\r\n        </fs-filter>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Table implementation -->\r\n    <div class=\"fs-list-table-container\">\r\n      <table class=\"fs-list-table\" role=\"grid\" *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\r\n        <thead fs-list-head\r\n               class=\"fs-list-head\"\r\n               role=\"rowgroup\"\r\n               *ngIf=\"list.columns.hasHeader\"\r\n               [ngClass]=\"list.columns.theadClass\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [sorting]=\"list.sorting\"\r\n               [selection]=\"list.selection\"\r\n               [hasRowActions]=\"list.hasRowActions\"\r\n        >\r\n        </thead>\r\n\r\n        <tbody fs-list-body\r\n               fsListDraggableList\r\n               class=\"fs-list-body\"\r\n               role=\"rowgroup\"\r\n               [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\r\n               [rows]=\"listData\"\r\n               [rowActionsRaw]=\"list.rowActionsRaw\"\r\n               [groupActionsRaw]=\"list.groupActionsRaw\"\r\n               [hasRowActions]=\"list.hasRowActions\"\r\n               [rowEvents]=\"list.rowEvents\"\r\n               [rowClass]=\"list.rowClass\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [restoreMode]=\"list.restoreMode\"\r\n               [selection]=\"list.selection\"\r\n               [rowRemoved]=\"rowRemoved\"\r\n        >\r\n        </tbody>\r\n\r\n        <tfoot fs-list-footer\r\n               class=\"fs-list-footer\"\r\n               *ngIf=\"list.columns.hasFooter\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [selection]=\"list.selection\"\r\n               [hasRowActions]=\"list.hasRowActions\">\r\n        </tfoot>\r\n      </table>\r\n      <fs-list-loader\r\n        *ngIf=\"firstLoad\"\r\n        [columns]=\"list.columns.columns\"\r\n        [loaderLines]=\"loaderLines\">\r\n      </fs-list-loader>\r\n    </div>\r\n\r\n    <fs-list-pagination\r\n      *ngIf=\"paginatorVisible\"\r\n      class=\"fs-list-pagination\"\r\n      [rows]=\"listData\"\r\n      [pagination]=\"list.paging\">\r\n    </fs-list-pagination>\r\n\r\n\r\n    <ng-container *ngIf=\"!firstLoad\">\r\n      <div \r\n          *ngIf=\"listData.length === 0\" \r\n          class=\"fs-list-no-results-container\">\r\n        <div \r\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\r\n            class=\"fs-list-no-results\">\r\n          {{ list.noResults?.message }}\r\n        </div>\r\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\r\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\r\n        </ng-container>        \r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\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;
@@ -4166,50 +4095,186 @@ let FsListDraggableListDirective = class FsListDraggableListDirective {
             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);
+}
+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']
+            }] } });
 
-let FsRowComponent = class FsRowComponent {
-    constructor(el, reorderController, _cdRef, _differs, _renderer, _draggableList) {
-        this.el = el;
-        this.reorderController = reorderController;
-        this._cdRef = _cdRef;
-        this._differs = _differs;
-        this._renderer = _renderer;
-        this._draggableList = _draggableList;
-        this.role = 'row';
-        this.rowActionsRaw = [];
-        this.groupActionsRaw = [];
-        this.hasRowActions = false;
-        this.rowEvents = {};
-        this.restoreMode = false;
-        this.ReorderPosition = ReorderPosition;
-        this.ReorderStrategy = ReorderStrategy;
-        this.rowActions = [];
-        this.menuRowActions = [];
-        this.inlineRowActions = [];
-        this.selected = false;
-        this.indeterminateSelected = false;
-        this._eventListeners = [];
-        this._destroy$ = new Subject();
+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);
+            });
+        }
+    }
+}
+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
+            }] } });
+
+class FsRowComponent {
+    constructor(el, reorderController, _cdRef, _differs, _renderer, _draggableList) {
+        this.el = el;
+        this.reorderController = reorderController;
+        this._cdRef = _cdRef;
+        this._differs = _differs;
+        this._renderer = _renderer;
+        this._draggableList = _draggableList;
+        this.role = 'row';
+        this.rowActionsRaw = [];
+        this.groupActionsRaw = [];
+        this.hasRowActions = false;
+        this.rowEvents = {};
+        this.restoreMode = false;
+        this.ReorderPosition = ReorderPosition;
+        this.ReorderStrategy = ReorderStrategy;
+        this.rowActions = [];
+        this.menuRowActions = [];
+        this.inlineRowActions = [];
+        this.selected = false;
+        this.indeterminateSelected = false;
+        this._eventListeners = [];
+        this._destroy$ = new Subject();
         this._rowDiffer = _differs.find({}).create();
     }
     get rowCssClass() {
@@ -4364,87 +4429,114 @@ 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);
+}
+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']
+            }] } });
+
+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;
+        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');
+        }
+    }
+    _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 FsBodyComponent = class FsBodyComponent {
+class FsBodyComponent {
     constructor(reorderContoller, el, cdRef, differs) {
         this.reorderContoller = reorderContoller;
         this.el = el;
@@ -4469,680 +4561,502 @@ let FsBodyComponent = class FsBodyComponent {
         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);
+}
+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 FsCellComponent = class FsCellComponent {
+class FsFooterCellComponent extends FsCellComponent {
     constructor() {
-        this.isColl = true;
-        this.role = 'gridcell';
-        this.cellContext = {};
-        this._destroy$ = new Subject();
+        super();
+    }
+}
+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 []; } });
+
+class FsFooterRowComponent extends FsRowComponent {
+    constructor(el, reorderController, cdRef, differs, renderer) {
+        super(el, reorderController, cdRef, differs, renderer, null);
+        this.ReorderPosition = ReorderPosition;
+    }
+}
+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
+            }] } });
+
+class FsFooterComponent {
+    constructor() {
+        this.columns = [];
+    }
+}
+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
+            }] } });
+
+class FsListLoaderComponent {
+    constructor() {
+        this.placeholderWidths = [[], [], []];
+        this.widths = [];
+        this.cols = [];
+        this.rows = [];
     }
     ngOnInit() {
-        this._initCellContext();
-        this._initCellTemplate();
-        this._listenGroupOpen();
+        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;
+        }
+        for (let r = 0; r < 3; r++) {
+            for (let c = 0; c < length; c++) {
+                this.placeholderWidths[r].push(random(50, 90));
+            }
+        }
     }
     ngOnChanges(changes) {
-        if (changes.rowIndex) {
-            this.cellContext.index = this.rowIndex;
+        if (changes.loaderLines) {
+            this.rows = new Array(this.loaderLines);
         }
     }
+}
+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
+            }] } });
+
+class FsPaginationComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        merge(this.pagination.pageChanged$, this.pagination.pages$)
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.cdRef.markForCheck();
+        });
+    }
     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;
-            });
-        }
-    }
-};
-__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);
+}
+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 FsHeadComponent = class FsHeadComponent {
-    constructor(reorderController, cdRef) {
+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.selectedAll = false;
-        this.ReorderPosition = ReorderPosition;
-        this.ReorderStrategy = ReorderStrategy;
-        this._destroy$ = new Subject();
+        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();
     }
-    ngOnInit() {
-        this.initSorting();
-        this.initSelection();
+    set config(config) {
+        this._initWithConfig(config);
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    set filterReference(component) {
+        this._filterRef = component;
+        this.list.actions.setFilterRef(component);
+        this._emitFiltersReadyEvent();
     }
     /**
-     * Select All Visible Rows
-     * @param event
+     * Set columns to config
+     * Create Column Model instances
+     *
      */
-    selectAll(event) {
-        this.selection.selectAllVisibleRows(event.checked);
+    set columnTemplates(listColumnDirectives) {
+        this.listColumnDirectives = listColumnDirectives;
+        if (this.list) {
+            this.list.tranformTemplatesToColumns(listColumnDirectives);
+        }
     }
-    /**
-     * Track By for improve change detection
-     * @param index
-     */
-    trackByFn(index) {
-        return index;
+    set _emptyStateTemplate(template) {
+        if (this.list) {
+            this.list.emptyStateTemplate = template;
+        }
     }
     /**
-     * Subscribe to sorting change
+     * Return reference for filter
      */
-    initSorting() {
-        this.sorting.sortingChanged$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.cdRef.detectChanges();
-        });
+    get filterRef() {
+        return this._filterRef;
     }
-    /**
-     * 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();
-            });
-        }
+    get groupEnabled() {
+        return this.list.dataController.groupEnabled;
     }
-};
-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);
-
-let FsHeadCellComponent = class FsHeadCellComponent extends FsCellComponent {
-    constructor(cdRef, differs) {
-        super();
-        this.cdRef = cdRef;
-        this.differs = differs;
-        this.cellContext = {};
-        this._columnDiffer = differs.find({}).create();
+    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;
     }
-    ngDoCheck() {
-        if (this._columnDiffer.diff(this.column)) {
-            this.cdRef.markForCheck();
+    set groupEnabled(value) {
+        this.list.groupEnabled(value);
+    }
+    ngOnInit() {
+        this._subscribeToRemoveRow();
+        this._subscribeToGroupExpandStatusChange();
+    }
+    ngOnDestroy() {
+        if (this.list) {
+            this.list.destroy();
         }
+        this._destroy.next();
+        this._destroy.complete();
     }
-    initCellContext() {
-        this.cellContext.value = this.column.title;
+    nextPage() {
+        this.list.paging.goNext();
     }
-};
-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);
-
-let FsFooterComponent = class FsFooterComponent {
-    constructor() {
-        this.columns = [];
+    prevPage() {
+        this.list.paging.goPrev();
     }
-};
-__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);
-
-let FsFooterRowComponent = class FsFooterRowComponent extends FsRowComponent {
-    constructor(el, reorderController, cdRef, differs, renderer) {
-        super(el, reorderController, cdRef, differs, renderer, null);
-        this.ReorderPosition = ReorderPosition;
+    firstPage() {
+        this.list.paging.goFirst();
     }
-};
-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);
-
-let FsFooterCellComponent = class FsFooterCellComponent extends FsCellComponent {
-    constructor() {
-        super();
+    lastPage() {
+        this.list.paging.goLast();
     }
-};
-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);
-
-let FsStatusComponent = class FsStatusComponent {
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        this._destroy$ = new Subject();
+    reload() {
+        this.list.reload();
     }
-    ngOnInit() {
-        this.sorting.sortingChanged$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._cdRef.markForCheck();
-        });
+    getData(trackBy) {
+        return this.list.getData(trackBy);
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    hasData(trackBy) {
+        return this.list.hasData(trackBy);
     }
-    toggleDirection() {
-        if (this.sorting.sortingColumn.direction === 'asc') {
-            this.sorting.sortDirection(SortingDirection.desc);
-        }
-        else {
-            this.sorting.sortDirection(SortingDirection.asc);
-        }
+    updateData(rows, trackBy) {
+        return this.list.dataController.updateData(rows, trackBy);
     }
-    setSortableColumn(column) {
-        if (this.sorting.sortingColumn !== column) {
-            this.sorting.sortBy(column);
-        }
+    replaceRow(row, trackBy) {
+        return this.list.dataController.replaceData(row, trackBy);
     }
-    setLimit(limit) {
-        this.paging.setLimit(limit);
+    updateSelectionConfig(config) {
+        this.list.selection.updateConfig(config);
     }
-};
-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);
-
-let FsPaginationComponent = class FsPaginationComponent {
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-        this._destroy$ = new Subject();
+    resetSelectionActions() {
+        this.list.selection.resetActions();
     }
-    ngOnInit() {
-        merge(this.pagination.pageChanged$, this.pagination.pages$)
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.cdRef.markForCheck();
-        });
+    removeData(data) {
+        return this.list.dataController.removeData(data);
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    setHeading(heading) {
+        this.list.heading = heading;
     }
-};
-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);
-
-let FsListLoaderComponent = class FsListLoaderComponent {
-    constructor() {
-        this.placeholderWidths = [[], [], []];
-        this.widths = [];
-        this.cols = [];
-        this.rows = [];
+    setSubheading(subheading) {
+        this.list.subheading = subheading;
     }
-    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;
+    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      <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", 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: 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;
@@ -5200,125 +5114,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);
+}
+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: ["title", "name", "show", "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 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);
+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 },
                 {
@@ -5329,10 +5149,68 @@ 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,
+        // 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,
@@ -5349,60 +5227,79 @@ 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,
-            // Dialog
-            CustomizeColsDialogComponent,
-        ],
-        entryComponents: [
-            // Dialog
-            CustomizeColsDialogComponent,
-        ],
-        providers: [],
-        exports: [
-            FsListComponent,
-            FsRowComponent,
-            FsCellComponent,
-            FsListLoaderComponent,
-            FsListColumnDirective,
-            FsListCellDirective,
-            FsListHeaderDirective,
-            FsListFooterDirective,
-            FsListGroupCellDirective,
-            FsListGroupExpandTriggerDirective,
-            FsListEmptyStateDirective,
-        ],
-    })
-], 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,
+                        // 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);
 }
@@ -5415,5 +5312,5 @@ function FsListConfigFactory(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListEmptyStateDirective, FsListFooterDirective, FsListHeaderDirective, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig, FsListConfigFactory as ɵa, GroupExpandNotifierService as ɵb, PersistanceController as ɵc, FsListGroupCellDirective as ɵd, FsListGroupExpandTriggerDirective as ɵe, FsListDraggableListDirective as ɵf, FsRowActionsComponent as ɵg, FsRowInlineActionComponent as ɵh, 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