@firestitch/list 12.16.0 → 12.17.0

package/bundles/firestitch-list.umd.js

@@ -2469,6 +2469,7 @@
         };
         /**
          * Trigger when row was selected
+         *
          * @param row
          * @param checked
          */
@@ -2490,6 +2491,7 @@
         };
         /**
          * Do check or uncheck of visible rows
+         *
          * @param checked
          */
         SelectionController.prototype.selectAllVisibleRows = function (checked) {
@@ -2539,9 +2541,7 @@
                 && ((_a = row.children) === null || _a === void 0 ? void 0 : _a.length) > this.selectedGroups.get(identifier)) {
                 return 'indeterminate';
             }
-            else {
-                return this.selectedGroups.has(identifier) || this.selectedAll;
-            }
+            return this.selectedGroups.has(identifier) || this.selectedAll;
         };
         /**
          * Open selection dialog and create reference
@@ -2559,6 +2559,7 @@
         };
         /**
          * Update count of visible elements
+         *
          * @param count
          */
         SelectionController.prototype.updateVisibleRecordsCount = function (count) {
@@ -2566,6 +2567,7 @@
         };
         /**
          * Update count of total available elemenets
+         *
          * @param count
          */
         SelectionController.prototype.updateTotalRecordsCount = function (count) {
@@ -2605,6 +2607,7 @@
          * Method will be called from List for remove row if it was selected
          *
          * BUT methods for update visible and etc. will be called a bit later
+         *
          * @param row
          */
         SelectionController.prototype.removeRow = function (row) {
@@ -2614,6 +2617,7 @@
         };
         /**
          * Intersection of selected and passed rows to remove rows that we dont need more
+         *
          * @param rows
          */
         SelectionController.prototype.selectedRowsIntersection = function (rows) {
@@ -2676,6 +2680,7 @@
         };
         /**
          * If some action was clicked on selection ref dialog
+         *
          * @param data
          */
         SelectionController.prototype._onActionActions = function (data) {
@@ -2684,7 +2689,9 @@
                 return;
             }
             // Execute callback
-            var result = this.actionSelectedFn(Object.assign({ selected: Array.from(this.selectedRows.values()).map(function (row) { return Object.assign({}, row); }) }, data));
+            var result = this.actionSelectedFn(Object.assign({ selected: Array.from(this.selectedRows.values()).map(function (row) {
+                    return Object.assign({}, row);
+                }) }, data));
             // If result is observable
             if (result instanceof rxjs.Observable) {
                 // Subscribe and whait why it resolved
@@ -2695,7 +2702,7 @@
                         // Uncheck all visible rows
                         _this.selectAllVisibleRows(false);
                     },
-                    error: function () { }
+                    error: function () { },
                 });
             }
         };
@@ -2711,6 +2718,7 @@
         };
         /**
          * If "Select All" action was clicked on selection ref dialog
+         *
          * @param flag
          */
         SelectionController.prototype._onSelectAllActions = function (flag) {
@@ -2739,7 +2747,7 @@
                         result.pipe(operators.take(1), operators.takeUntil(this._destroy$)).subscribe({
                             next: function (actions) {
                                 _this._selectionDialogRef.updateActions(actions);
-                            }
+                            },
                         });
                     }
                     else if (Array.isArray(result)) {
@@ -2788,13 +2796,14 @@
         };
         /**
          * Method constructor for events
+         *
          * @param type
          * @param payload
          */
         SelectionController.prototype._selectionChangeEvent = function (type, payload) {
             this._selectionChange.next({
                 type: type,
-                payload: payload
+                payload: payload,
             });
         };
         /**
@@ -4926,7 +4935,7 @@
         return FsStatusComponent;
     }());
     FsStatusComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsStatusComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsStatusComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div class=\"status\">\r\n  <small>\r\n    <ng-container *ngIf=\"paging.enabled && !scrollable\">\r\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\r\n      </ng-container>\r\n      <ng-template #emptyResults>\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><ng-container *ngIf=\"(!paging.enabled || scrollable) && paging.displayed > 0\">\r\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\r\n      Showing\r\n      <span *ngIf=\"paging.displayed == 1\">{{ paging.displayed }} result </span>\r\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\r\n    </ng-container>\r\n\r\n    <ng-template #scrollable>\r\n      <span *ngIf=\"paging.records == 1\">{{ paging.records }} result </span>\r\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\r\n\r\n    <fs-menu [hidden]=\"!paging.enabled || scrollable\" #limitsMenu>\r\n      <ng-template\r\n        ngFor\r\n        let-limit\r\n        [ngForOf]=\"paging.limits\">\r\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\r\n          {{ limit }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\r\n      <!-- Real sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.sortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\r\n            {{ column.title }}\r\n          </ng-container>\r\n          <ng-template #sortByTemplate>\r\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\r\n          </ng-template>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <!-- Fake sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.fakeSortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          {{ column.title }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <ng-template #sortedBy>\r\n      <ng-container *ngIf=\"sorting.sortingColumn\">\r\n        sorted by\r\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\r\n        </ng-container>\r\n        <ng-template #sortByTemplate>\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\r\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\r\n          </a>,\r\n        </ng-template>\r\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\r\n    --></ng-container><!--\r\n  --></ng-template>\r\n  </small>  \r\n</div>\r\n", styles: [":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__namespace$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "number": i3__namespace$1.DecimalPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+    FsStatusComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div class=\"status\">\r\n  <small>\r\n    <ng-container *ngIf=\"paging.enabled && !scrollable\">\r\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\r\n      </ng-container>\r\n      <ng-template #emptyResults>\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><ng-container *ngIf=\"(!paging.enabled || scrollable) && paging.displayed > 0\">\r\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\r\n      Showing\r\n      <span *ngIf=\"paging.displayed == 1\">{{ paging.displayed }} result </span>\r\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\r\n    </ng-container>\r\n\r\n    <ng-template #scrollable>\r\n      <span *ngIf=\"paging.records == 1\">{{ paging.records }} result </span>\r\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\r\n\r\n    <fs-menu [hidden]=\"!paging.enabled || scrollable\" #limitsMenu>\r\n      <ng-template\r\n        ngFor\r\n        let-limit\r\n        [ngForOf]=\"paging.limits\">\r\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\r\n          {{ limit }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\r\n      <!-- Real sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.sortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\r\n            {{ column.title }}\r\n          </ng-container>\r\n          <ng-template #sortByTemplate>\r\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\r\n          </ng-template>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <!-- Fake sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.fakeSortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          {{ column.title }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <ng-template #sortedBy>\r\n      <ng-container *ngIf=\"sorting.sortingColumn\">\r\n        sorted by\r\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\r\n        </ng-container>\r\n        <ng-template #sortByTemplate>\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\r\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\r\n          </a>,\r\n        </ng-template>\r\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\r\n    --></ng-container><!--\r\n  --></ng-template>\r\n  </small>  \r\n</div>\r\n", styles: [":host.hidden-mobile{display:none!important}: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__namespace$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "number": i3__namespace$1.DecimalPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsStatusComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5058,17 +5067,17 @@
 
     var FsHeadCellComponent = /** @class */ (function (_super) {
         __extends(FsHeadCellComponent, _super);
-        function FsHeadCellComponent(cdRef, differs) {
+        function FsHeadCellComponent(_cdRef, _differs) {
             var _this = _super.call(this) || this;
-            _this.cdRef = cdRef;
-            _this.differs = differs;
+            _this._cdRef = _cdRef;
+            _this._differs = _differs;
             _this.cellContext = {};
-            _this._columnDiffer = differs.find({}).create();
+            _this._columnDiffer = _this._differs.find({}).create();
             return _this;
         }
         FsHeadCellComponent.prototype.ngDoCheck = function () {
             if (this._columnDiffer.diff(this.column)) {
-                this.cdRef.markForCheck();
+                this._cdRef.markForCheck();
             }
         };
         FsHeadCellComponent.prototype.initCellContext = function () {
@@ -5077,19 +5086,20 @@
         return FsHeadCellComponent;
     }(FsCellComponent));
     FsHeadCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHeadCellComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.KeyValueDiffers }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsHeadCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadCellComponent, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0__namespace, 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$ | async\">\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__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsHeadCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadCellComponent, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0__namespace, 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$ | async\">\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", styles: [".wrap{display:inline-flex;vertical-align:middle;white-space:nowrap}.wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}.wrap .direction{margin-left:5px}\n"], components: [{ type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHeadCellComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[fs-head-cell]',
-                        templateUrl: 'head-cell.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        templateUrl: './head-cell.component.html',
+                        styleUrls: ['./head-cell.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.KeyValueDiffers }]; } });
 
     var FsHeadComponent = /** @class */ (function () {
-        function FsHeadComponent(cdRef) {
-            this.cdRef = cdRef;
+        function FsHeadComponent(_cdRef) {
+            this._cdRef = _cdRef;
             this.selectedAll = false;
             this.ReorderStrategyEnum = ReorderStrategy;
             this._destroy$ = new rxjs.Subject();
@@ -5098,7 +5108,7 @@
             get: function () {
                 return this.reorderEnabled
                     && this.reorderPosition === exports.ReorderPosition.Left
-                    && this.activeFiltersCount == 0;
+                    && this.activeFiltersCount === 0;
             },
             enumerable: false,
             configurable: true
@@ -5107,14 +5117,14 @@
             get: function () {
                 return this.reorderEnabled
                     && this.reorderPosition === exports.ReorderPosition.Right
-                    && this.activeFiltersCount == 0;
+                    && this.activeFiltersCount === 0;
             },
             enumerable: false,
             configurable: true
         });
         FsHeadComponent.prototype.ngOnInit = function () {
-            this.initSorting();
-            this.initSelection();
+            this._initSorting();
+            this._initSelection();
         };
         FsHeadComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
@@ -5122,6 +5132,7 @@
         };
         /**
          * Select All Visible Rows
+         *
          * @param event
          */
         FsHeadComponent.prototype.selectAll = function (event) {
@@ -5129,6 +5140,7 @@
         };
         /**
          * Track By for improve change detection
+         *
          * @param index
          */
         FsHeadComponent.prototype.trackByFn = function (index) {
@@ -5137,18 +5149,18 @@
         /**
          * Subscribe to sorting change
          */
-        FsHeadComponent.prototype.initSorting = function () {
+        FsHeadComponent.prototype._initSorting = function () {
             var _this = this;
             this.sorting.sortingChanged$
                 .pipe(operators.takeUntil(this._destroy$))
                 .subscribe(function () {
-                _this.cdRef.detectChanges();
+                _this._cdRef.detectChanges();
             });
         };
         /**
          * Subscribe to selection change
          */
-        FsHeadComponent.prototype.initSelection = function () {
+        FsHeadComponent.prototype._initSelection = function () {
             var _this = this;
             if (this.selection) {
                 this.selection.selectionChange$
@@ -5161,20 +5173,21 @@
                     .subscribe(function (_a) {
                     var type = _a.type, status = _a.payload;
                     _this.selectedAll = status;
-                    _this.cdRef.markForCheck();
+                    _this._cdRef.markForCheck();
                 });
             }
         };
         return FsHeadComponent;
     }());
     FsHeadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHeadComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th *ngIf=\"leftDragDropEnabled\"\n      class=\"fs-list-col drag-col\">\n  </th>\n\n  <!-- Selection -->\n  <th *ngIf=\"selection && !(selection.disabled$ | async)\" class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox (change)=\"selectAll($event)\" [checked]=\"selectedAll\"></mat-checkbox>\n  </th>\n\n  <!-- Content -->\n  <th fs-head-cell *ngFor=\"let column of columns; trackBy: trackByFn\"\n      (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n      [column]=\"column\"\n      [class.sorting]=\"column.sortable\"\n      [ngClass]=\"column.headerConfigs.classesArray\"\n      [attr.colspan]=\"column.headerConfigs.colspan\"\n      [attr.width]=\"column.width\"></th>\n\n  <!-- Drag -->\n  <th *ngIf=\"rightDragDropEnabled\"\n      class=\"fs-list-col drag-col\">\n  </th>\n\n  <!-- Row Actions -->\n  <th *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\" class=\"fs-list-col row-actions\"></th>\n</tr>\n", components: [{ type: i2__namespace.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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsHeadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th *ngIf=\"leftDragDropEnabled\"\n      class=\"fs-list-col drag-col\">\n  </th>\n\n  <!-- Selection -->\n  <th *ngIf=\"selection && !(selection.disabled$ | async)\" class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox (change)=\"selectAll($event)\" [checked]=\"selectedAll\"></mat-checkbox>\n  </th>\n\n  <!-- Content -->\n  <th \n    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\">\n  </th>\n\n  <!-- Drag -->\n  <th *ngIf=\"rightDragDropEnabled\"\n      class=\"fs-list-col drag-col\">\n  </th>\n\n  <!-- Row Actions -->\n  <th *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\" class=\"fs-list-col row-actions\"></th>\n</tr>\n", styles: ["th.fs-list-col-selection{width:1%;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}\n"], components: [{ type: i2__namespace.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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHeadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[fs-list-head]',
-                        templateUrl: 'head.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        templateUrl: './head.component.html',
+                        styleUrls: ['./head.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { sorting: [{
                     type: i0.Input
@@ -5254,6 +5267,7 @@
         };
         /**
          * Prepare draggable elements and add events
+         *
          * @param draggableElement
          */
         FsListDraggableListDirective.prototype.dragStart = function (draggableElement) {
@@ -5285,6 +5299,7 @@
         };
         /**
          * Move draggable elements and swap items
+         *
          * @param event
          */
         FsListDraggableListDirective.prototype.dragTo = function (event) {
@@ -5292,8 +5307,8 @@
             var elemIndex = this.lookupElementUnder(event);
             var targetRow = this._rows[elemIndex];
             if (this._multipleDraggableElementPreview) {
-                this._multipleDraggableElementPreview.style.left = event.clientX + 'px';
-                this._multipleDraggableElementPreview.style.top = event.clientY + 'px';
+                this._multipleDraggableElementPreview.style.left = event.clientX + "px";
+                this._multipleDraggableElementPreview.style.top = event.clientY + "px";
             }
             // Can not drag before first group and after last group
             var swapWithBoundaryGroupElement = (elemIndex === 0 || elemIndex === this._rows.length - 1)
@@ -5316,7 +5331,7 @@
                 // FIXME
                 if (this._draggableElementPreview) {
                     var topOffset = (event.y || event.clientY) - (this._draggableElementHeight / 2);
-                    this._draggableElementPreview.style.top = topOffset + 'px';
+                    this._draggableElementPreview.style.top = topOffset + "px";
                 }
             }
         };
@@ -5408,9 +5423,9 @@
             var el = this._draggableElement.cloneNode(true);
             var data = this._draggableElement.getBoundingClientRect();
             if (!(this._isMultipleDrag)) {
-                el.style.width = data.width + 'px';
-                el.style.left = data.left + 'px';
-                el.style.top = data.top + 'px';
+                el.style.width = data.width + "px";
+                el.style.left = data.left + "px";
+                el.style.top = data.top + "px";
                 el.classList.add('draggable');
                 this._containerElement.nativeElement.insertAdjacentElement('afterbegin', el);
                 this._draggableElementPreview = el;
@@ -5422,17 +5437,18 @@
                 this._containerElement.nativeElement.classList.add('drag-hidden');
                 var selectedCount = (_a = this._selectedRowsDirectives) === null || _a === void 0 ? void 0 : _a.length;
                 var previewBlock = this._renderer.createElement('div');
-                previewBlock.style.left = data.left + 'px';
-                previewBlock.style.top = data.top + 'px';
+                previewBlock.style.left = data.left + "px";
+                previewBlock.style.top = data.top + "px";
                 var text = this._renderer.createText(selectedCount + " selected items");
                 this._renderer.appendChild(previewBlock, text);
-                this._renderer.addClass(previewBlock, 'preview-block');
+                this._renderer.addClass(previewBlock, 'fs-list-preview-block');
                 this._renderer.appendChild(document.body, previewBlock);
                 this._multipleDraggableElementPreview = previewBlock;
             }
         };
         /**
          * Looking by stored row elements for overlapped row
+         *
          * @param event
          */
         FsListDraggableListDirective.prototype.lookupElementUnder = function (event) {
@@ -5452,6 +5468,7 @@
         };
         /**
          * Swap rows
+         *
          * @param index
          */
         FsListDraggableListDirective.prototype.swapWithIndex = function (index) {
@@ -5484,7 +5501,7 @@
             var draggableCells = Array.from(this._draggableElementPreview.querySelectorAll('td'));
             Array.from(this._draggableElementPreview.querySelectorAll('td')).forEach(function (elem, index) {
                 var dims = elem.getBoundingClientRect();
-                draggableCells[index].style.width = dims.width + 'px';
+                draggableCells[index].style.width = dims.width + "px";
             });
         };
         FsListDraggableListDirective.prototype._waitUntilIsNotDone = function (doneResult) {
@@ -5511,6 +5528,7 @@
         };
         /**
          * Fix background when mobile
+         *
          * @param e
          */
         FsListDraggableListDirective.prototype.touchFix = function (e) {
@@ -5661,6 +5679,7 @@
         };
         /**
          * Track By for improve change detection
+         *
          * @param index
          */
         FsRowActionsComponent.prototype.trackByFn = function (index) {
@@ -5668,6 +5687,7 @@
         };
         /**
          * Emit that some row must be removed
+         *
          * @param action
          * @param row
          * @param event
@@ -5687,12 +5707,13 @@
         return FsRowActionsComponent;
     }());
     FsRowActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsRowActionsComponent, deps: [{ token: i1__namespace$2.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsRowActionsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action \n      class=\"row-inline-action row-inline-action-{{action.type}}\"\n      [action]=\"action\"\n      [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu \n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template \n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template \n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template \n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label | actionLabel:row}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n", components: [{ type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["action"], outputs: ["clicked", "fileSelect"] }, { type: i2__namespace$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "icon", "label", "file"], outputs: ["fileSelect", "fileError"] }, { type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "actionLabel": ActionLabelPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsRowActionsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action \n      class=\"row-inline-action row-inline-action-{{action.type}}\"\n      [action]=\"action\"\n      [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu \n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template \n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template \n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template \n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label | actionLabel:row}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n", styles: [":host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"], components: [{ type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["action"], outputs: ["clicked", "fileSelect"] }, { type: i2__namespace$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "icon", "label", "file"], outputs: ["fileSelect", "fileError"] }, { type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "actionLabel": ActionLabelPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsRowActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'fs-list-row-actions',
                         templateUrl: './actions.component.html',
+                        styleUrls: ['./actions.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$2.FsPrompt }]; }, propDecorators: { row: [{
@@ -5778,10 +5799,12 @@
                 var e_1, _d;
                 var _a, _b, _c;
                 var cls = 'fs-list-row';
-                if (this.rowIndex % 2 !== 0)
+                if (this.rowIndex % 2 !== 0) {
                     cls += ' fs-list-row-odd';
-                if (this.rowIndex % 2 === 0)
+                }
+                if (this.rowIndex % 2 === 0) {
                     cls += ' fs-list-row-even';
+                }
                 if ((_a = this.row) === null || _a === void 0 ? void 0 : _a.isGroup) {
                     cls += ' fs-list-row-group';
                 }
@@ -5814,8 +5837,9 @@
                         try {
                             for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
                                 var k = keys_1_1.value;
-                                if (resultClass[k] === true)
+                                if (resultClass[k] === true) {
                                     cls += " " + k;
+                                }
                             }
                         }
                         catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -5885,12 +5909,15 @@
             }
         };
         FsRowComponent.prototype.ngOnDestroy = function () {
-            this._eventListeners.forEach(function (listener) { listener(); });
+            this._eventListeners.forEach(function (listener) {
+                listener();
+            });
             this._destroy$.next();
             this._destroy$.complete();
         };
         /**
          * Select row by checkbox
+         *
          * @param event
          */
         FsRowComponent.prototype.selectRow = function (event) {
@@ -5899,6 +5926,7 @@
         };
         /**
          * Track By for improve change detection
+         *
          * @param index
          */
         FsRowComponent.prototype.trackByFn = function (index) {
@@ -5925,7 +5953,7 @@
                             _this.rowEvents[event]({
                                 event: evt,
                                 row: _this.row.data,
-                                rowIndex: _this.rowIndex
+                                rowIndex: _this.rowIndex,
                             });
                         }
                     });
@@ -5994,13 +6022,14 @@
         return FsRowComponent;
     }());
     FsRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsRowComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.Renderer2 }, { token: FsListDraggableListDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsRowComponent.ɵcmp = i0__namespace.ɵɵ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", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0__namespace, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox (change)=\"selectRow($event)\"\n                    [checked]=\"selected\"\n                    [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions [row]=\"row\"\n                         [index]=\"rowIndex\"\n                         [rowActions]=\"rowActions\"\n                         [menuRowActions]=\"menuRowActions\"\n                         [inlineRowActions]=\"inlineRowActions\"\n                         [restoreAction]=\"restoreAction\"\n                         [restoreMode]=\"restoreMode\"\n                         [rowRemoved]=\"rowRemoved\"\n    ></fs-list-row-actions>\n  </ng-container>\n</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", components: [{ type: i2__namespace.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__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsRowComponent.ɵcmp = i0__namespace.ɵɵ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", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0__namespace, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox \n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td \n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\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", styles: [":host.drag-hidden{display:none}:host.draggable{opacity:.8;position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}:host.draggable td{border:none;background-color:#fff}:host.draggable-elem td{background-color:#c3c3c3}td.drag-col{width:24px;text-align:center;cursor:grab}td.drag-col.drag-disabled{opacity:.4;cursor:no-drop}td.drag-col mat-icon{display:flex}td.fs-list-col-selection{padding:10px}td.row-actions{width:1%;white-space:nowrap;padding-right:10px;overflow:hidden}td.row-actions .row-inline-action{margin-left:12px;display:inline-block}td.row-actions .row-inline-action:first-child{margin-left:0}td.row-actions .row-inline-action-icon,td.row-actions .row-inline-action-fab,td.row-actions .row-inline-action-mini-fab,td.row-actions .row-menu-action{width:35px;justify-content:center;align-items:center}td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], components: [{ type: i2__namespace.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__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsRowComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[fs-list-row]',
-                        templateUrl: 'row.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        templateUrl: './row.component.html',
+                        styleUrls: ['./row.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.Renderer2 }, { type: FsListDraggableListDirective }]; }, propDecorators: { role: [{
                     type: i0.HostBinding,
@@ -6140,15 +6169,16 @@
         return FsBodyComponent;
     }());
     FsBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsBodyComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsBodyComponent.ɵcmp = i0__namespace.ɵɵ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", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsRowComponent, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, 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      [rowRemoved]=\"rowRemoved\"\n      [activeFiltersCount]=\"activeFiltersCount\"\n      [reorderEnabled]=\"reorderEnabled\"\n      [reorderPosition]=\"reorderPosition\"\n      [reorderStrategy]=\"reorderStrategy\"\n      [reorderMultiple]=\"reorderMultiple\"\n  >\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", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }], directives: [{ type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: ["row"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsBodyComponent.ɵcmp = i0__namespace.ɵɵ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", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsRowComponent, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr\n    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    [rowRemoved]=\"rowRemoved\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\"\n    [reorderMultiple]=\"reorderMultiple\">\n  </tr>\n</ng-container>\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"], components: [{ type: FsRowComponent, selector: "[fs-list-row]", inputs: ["row", "rowActionsRaw", "groupActionsRaw", "hasRowActions", "rowEvents", "rowClass", "restoreMode", "rowIndex", "columns", "selection", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }], directives: [{ type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: ["row"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsBodyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[fs-list-body]',
-                        templateUrl: 'body.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        templateUrl: './body.component.html',
+                        styleUrls: ['./body.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { rows: [{
+            }], propDecorators: { rows: [{
                     type: i0.Input
                 }], columns: [{
                     type: i0.Input
@@ -6241,15 +6271,16 @@
         return FsFooterComponent;
     }());
     FsFooterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFooterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: { hasRowActions: "hasRowActions", columns: "columns", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, ngImport: i0__namespace, template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\"\n></tr>\n", components: [{ type: FsFooterRowComponent, selector: "[fs-list-footer-row]", inputs: ["hasRowActions", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFooterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: { hasRowActions: "hasRowActions", columns: "columns", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, ngImport: i0__namespace, template: "<tr \n    fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\">\n</tr>\n", styles: [""], components: [{ type: FsFooterRowComponent, selector: "[fs-list-footer-row]", inputs: ["hasRowActions", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFooterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: '[fs-list-footer]',
-                        templateUrl: 'footer.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        templateUrl: './footer.component.html',
+                        styleUrls: ['./footer.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { hasRowActions: [{
+            }], propDecorators: { hasRowActions: [{
                     type: i0.Input
                 }], columns: [{
                     type: i0.Input
@@ -6701,7 +6732,7 @@
             GroupExpandNotifierService,
             PersistanceController,
             ReorderController,
-        ], queries: [{ propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "filterReference", first: true, predicate: i2.FilterComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\"\n                [scrollable]=\"list.scrollable || list.paging.loadMoreEnabled\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table \n            class=\"fs-list-table\" \n            role=\"grid\" \n            [fsListContentInit]=\"list.afterContentInit\" \n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-line': list.style ?? 'line' === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\"\n            [reorderMultiple]=\"reorderController.multiple\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n    <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n      <ng-container\n        [ngTemplateOutlet]=\"headingContainerTemplate\"\n        [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #headingContainer>\n      <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n        {{list.heading}}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n        {{list.subheading}}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-header .heading{margin:0}.fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-header .fs-list-actions{white-space:nowrap;float:right}.fs-list-header .fs-list-actions .menu-button{width:36px;height:36px;line-height:36px}.fs-list-header .action-button{margin-left:5px}.fs-list-header .action-button:first-child{margin-left:0}.fs-list-header .mat-button{margin-top:0;margin-bottom:0;margin-right:0}.fs-list-table-container{width:100%;overflow:auto}::ng-deep .preview-block{position:fixed;height:30px;width:200px;background:grey;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .fs-list{display:block;width:100%}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table .fs-list-head{display:table-header-group}::ng-deep .fs-list-table .fs-list-head .fs-list-col{color:#999;padding:8px;font-weight:normal;color:#8f8f8f;font-size:85%}::ng-deep .fs-list-table .fs-list-head .fs-list-col.fs-list-col-selection{width:1%;text-align:left}::ng-deep .fs-list-table .fs-list-head .fs-list-col.sorting{cursor:pointer}::ng-deep .fs-list-table .fs-list-head .fs-list-col.sorting:hover{background-color:#f6f6f6}::ng-deep .fs-list-table .fs-list-head .fs-list-col .wrap{display:inline-flex;vertical-align:middle;white-space:nowrap}::ng-deep .fs-list-table .fs-list-head .fs-list-col .wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}::ng-deep .fs-list-table .fs-list-head .fs-list-col .wrap .direction{margin-left:5px}::ng-deep .fs-list-table .fs-list-head .fs-list-col.sorting{background-image:none}::ng-deep .fs-list-table .fs-list-body{display:table-row-group;position:relative}::ng-deep .fs-list-table .fs-list-body.drag-hidden .drag-col{opacity:0!important;cursor:default}::ng-deep .fs-list-table .fs-list-body.disabled{opacity:.4;pointer-events:none}::ng-deep .fs-list-table .fs-list-body .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list-table .fs-list-head .fs-list-row,::ng-deep .fs-list-table .fs-list-body .fs-list-row,::ng-deep .fs-list-table .fs-list-footer .fs-list-row{display:table-row}::ng-deep .fs-list-table .fs-list-head .fs-list-row.drag-hidden,::ng-deep .fs-list-table .fs-list-body .fs-list-row.drag-hidden,::ng-deep .fs-list-table .fs-list-footer .fs-list-row.drag-hidden{display:none}::ng-deep .fs-list-table .fs-list-head .fs-list-row.multiple-selection,::ng-deep .fs-list-table .fs-list-body .fs-list-row.multiple-selection,::ng-deep .fs-list-table .fs-list-footer .fs-list-row.multiple-selection{background-color:#2196f380}::ng-deep .fs-list-table .fs-list-head .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list-table .fs-list-body .fs-list-row.multiple-selection .fs-list-col,::ng-deep .fs-list-table .fs-list-footer .fs-list-row.multiple-selection .fs-list-col{background-color:#2196f380}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.drag-col,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.drag-col{width:24px;text-align:center;cursor:grab}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.drag-col.drag-disabled,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.drag-col.drag-disabled{opacity:.4;cursor:no-drop}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.drag-col mat-icon,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.drag-col mat-icon{display:flex}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.fs-list-col-selection,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.fs-list-col-selection,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.fs-list-col-selection{padding:10px}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions,::ng-deep .fs-list-table .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-table .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action{margin-left:12px;display:inline-block}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action:first-child{margin-left:0}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.row-actions .row-menu-action,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-icon,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-fab,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.row-actions .row-inline-action-mini-fab,::ng-deep .fs-list-table .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-table .fs-list-head .fs-list-row .fs-list-col.left,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.left,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.left{text-align:left}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.center,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.center,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.center{text-align:center}::ng-deep .fs-list-table .fs-list-head .fs-list-row .fs-list-col.right,::ng-deep .fs-list-table .fs-list-body .fs-list-row .fs-list-col.right,::ng-deep .fs-list-table .fs-list-footer .fs-list-row .fs-list-col.right{text-align:right}::ng-deep .fs-list-table .fs-list-head .fs-list-row.draggable,::ng-deep .fs-list-table .fs-list-body .fs-list-row.draggable,::ng-deep .fs-list-table .fs-list-footer .fs-list-row.draggable{position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px;background-color:#f6f6f6}::ng-deep .fs-list-table .fs-list-head .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list-table .fs-list-body .fs-list-row.draggable .fs-list-col,::ng-deep .fs-list-table .fs-list-footer .fs-list-row.draggable .fs-list-col{border:none}::ng-deep .fs-list-table 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}}:host(.fs-list-no-highlight) ::ng-deep .fs-list-row:hover .fs-list-col{background-color:initial}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card) tbody .fs-list-row:first-child .fs-list-col{border-top:2px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card) tbody .fs-list-row:last-child .fs-list-col{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-row:hover .fs-list-col,::ng-deep .fs-list-table:not(.style-card) .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card) .fs-list-container.has-dragging thead th{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card{border-spacing:0 8px;border-collapse:separate}::ng-deep .fs-list-table.style-card tbody.fs-list-body tr.fs-list-row.fs-list-row-body{background-color:#fafafa;border-radius:10px}::ng-deep .fs-list-table.style-card tbody.fs-list-body tr.fs-list-row td.fs-list-col{border:none!important;padding:8px 16px}::ng-deep .fs-list-table.style-card tbody.fs-list-body tr.fs-list-row td.fs-list-col:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .fs-list-table.style-card tbody.fs-list-body tr.fs-list-row td.fs-list-col:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}\n"], components: [{ type: i2__namespace$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", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }], directives: [{ type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "filterReference", first: true, predicate: i2.FilterComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\"\n                [scrollable]=\"list.scrollable || list.paging.loadMoreEnabled\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table \n            class=\"fs-list-table\" \n            role=\"grid\" \n            [fsListContentInit]=\"list.afterContentInit\" \n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-line': list.style ?? 'line' === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\"\n            [reorderMultiple]=\"reorderController.multiple\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n    <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n      <ng-container\n        [ngTemplateOutlet]=\"headingContainerTemplate\"\n        [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #headingContainer>\n      <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n        {{list.heading}}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n        {{list.subheading}}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:normal;color:#8f8f8f;font-size:85%}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card) tbody .fs-list-row:first-child .fs-list-col{border-top:2px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card) tbody .fs-list-row:last-child .fs-list-col{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-row:hover .fs-list-col,::ng-deep .fs-list-table:not(.style-card) .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card) .fs-list-container.has-dragging thead th{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-line.style-card,::ng-deep .fs-list-table:not(.style-card).style-card{border-spacing:0 8px;border-collapse:separate}::ng-deep .fs-list-table.style-line.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group),::ng-deep .fs-list-table:not(.style-card).style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){background-color:#fafafa;border-radius:10px}::ng-deep .fs-list-table.style-line.style-card tbody tr td,::ng-deep .fs-list-table:not(.style-card).style-card tbody tr td{border:none!important;padding:8px 16px}::ng-deep .fs-list-table.style-line.style-card tbody tr td:first-child,::ng-deep .fs-list-table:not(.style-card).style-card tbody tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .fs-list-table.style-line.style-card tbody tr td:last-child,::ng-deep .fs-list-table:not(.style-card).style-card tbody tr td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:grey;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@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}}:host(.fs-list-no-highlight) ::ng-deep .fs-list-row:hover .fs-list-col{background-color:initial}\n"], components: [{ type: i2__namespace$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", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }], directives: [{ type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListComponent, decorators: [{
                 type: i0.Component,
                 args: [{