@firestitch/list 18.0.55 → 18.0.57

package/fesm2022/firestitch-list.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, ChangeDetectorRef, NgZone, ElementRef, Renderer2, Directive, Input, Pipe, EventEmitter, Component, ChangeDetectionStrategy, Output, input, effect, HostBinding, computed, KeyValueDiffers, TemplateRef, ViewContainerRef, ViewChild, ContentChild, HostListener, ContentChildren, InjectionToken, Injector, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, Observable, of, merge, from, combineLatest, EMPTY } from 'rxjs';
-import { takeUntil, take, filter, tap, skip, distinctUntilChanged, map, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
+import { takeUntil, map, take, skip, filter, tap, distinctUntilChanged, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
 import { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith } from 'lodash-es';
 import { NgIf, NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, AsyncPipe, Location, NgFor, DecimalPipe } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -13,11 +13,11 @@ import * as i1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import { MatButton, MatAnchor, MatIconButton, MatIconAnchor, MatFabButton, MatFabAnchor, MatMiniFabButton, MatMiniFabAnchor } from '@angular/material/button';
 import { RouterLink, ActivatedRoute } from '@angular/router';
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
 import * as i1$2 from '@firestitch/common';
 import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
 import { FsStore } from '@firestitch/store';
-import { CdkScrollable } from '@angular/cdk/scrolling';
 import { DrawerRef } from '@firestitch/drawer';
 import { ItemType, FilterComponent, FilterStatusBarDirective, FilterHeadingDirective } from '@firestitch/filter';
 import { SelectionDialog } from '@firestitch/selection';
@@ -225,12 +225,18 @@ class BaseRow {
     _index;
     _readyToSwap = true;
     _actionsUpdated$ = new Subject();
-    _data = {};
+    _data$ = new BehaviorSubject({});
     constructor(data = {}) {
-        this._data = data;
+        this._data$.next(data);
     }
     get data() {
-        return this._data;
+        return this._data$.getValue();
+    }
+    set data(value) {
+        this._data$.next(value);
+    }
+    get data$() {
+        return this._data$.asObservable();
     }
     get type() {
         return this._rowType;
@@ -442,6 +448,10 @@ class SelectionController {
     get disabled$() {
         return this._disabled$.asObservable();
     }
+    get enabled$() {
+        return this._disabled$.asObservable()
+            .pipe(map((disabled) => !disabled));
+    }
     get selectedAll() {
         return this._selectedAll;
     }
@@ -1195,12 +1205,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsListDraggableRowDirective {
+    row;
+    _destroy$ = new Subject();
     _el = inject(ElementRef);
     _renderer = inject(Renderer2);
     _reorderController = inject(ReorderController);
     _draggableList = inject(FsListDraggableListDirective);
-    row;
-    _destroy$ = new Subject();
     get elRef() {
         return this._el;
     }
@@ -1593,6 +1603,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
+class ColumnAsyncAttribute extends BehaviorSubject {
+    constructor(value) {
+        super(Object.freeze(value));
+    }
+    next(value) {
+        const newValue = value;
+        const oldValue = this.getValue();
+        if (newValue !== oldValue) {
+            super.next(Object.freeze(value));
+        }
+    }
+}
+
+class ColumnAttributes {
+    _title;
+    _name;
+    _customizable = true;
+    _sortable;
+    _sortableDefault;
+    _direction$ = new ColumnAsyncAttribute(null);
+    _align;
+    _width;
+    _className;
+    _visible$ = new ColumnAsyncAttribute(true);
+    constructor(attrs = {}) {
+        this._init(attrs);
+    }
+    // title
+    set title(value) {
+        this._title = value;
+    }
+    get title() {
+        return this._title;
+    }
+    // name
+    set name(value) {
+        this._name = value;
+    }
+    get name() {
+        return this._name;
+    }
+    // customize
+    set customizable(value) {
+        this._customizable = value;
+    }
+    get customizable() {
+        return this._customizable;
+    }
+    // sortable
+    set sortable(value) {
+        this._sortable = value;
+    }
+    get sortable() {
+        return this._sortable;
+    }
+    // sortableDefault
+    set sortableDefault(value) {
+        this._sortableDefault = value;
+        if (this.sortableDefault) {
+            this.sortable = true;
+        }
+    }
+    get sortableDefault() {
+        return this._sortableDefault;
+    }
+    // direction
+    set direction(value) {
+        this.sortable = true;
+        this._direction$.next(value);
+    }
+    get direction() {
+        return this._direction$.value;
+    }
+    get direction$() {
+        return this._direction$.asObservable();
+    }
+    // align
+    set align(value) {
+        this._align = value;
+    }
+    get align() {
+        return this._align;
+    }
+    // width
+    set width(value) {
+        this._width = value;
+    }
+    get width() {
+        return this._width;
+    }
+    // className
+    set className(value) {
+        this._className = value;
+    }
+    get className() {
+        return this._className;
+    }
+    // visibility
+    set visible(value) {
+        this._visible$.next(value);
+    }
+    get visible() {
+        return this._visible$.getValue();
+    }
+    get visible$() {
+        return this._visible$.asObservable();
+    }
+    _init(attrs) {
+        Object.keys(attrs)
+            .forEach((key) => {
+            switch (key) {
+                case 'title':
+                    {
+                        this.title = attrs[key];
+                    }
+                    break;
+                case 'name':
+                    {
+                        this.name = attrs[key];
+                    }
+                    break;
+                case 'align':
+                    {
+                        this.align = attrs[key];
+                    }
+                    break;
+                case 'direction':
+                    {
+                        this.direction = attrs[key];
+                    }
+                    break;
+                case 'sortable':
+                    {
+                        this.sortable = attrs[key];
+                    }
+                    break;
+                case 'show':
+                    {
+                        this.visible = attrs[key];
+                    }
+                    break;
+                case 'visible':
+                    {
+                        this.visible = attrs[key];
+                    }
+                    break;
+            }
+        });
+    }
+}
+
 class StyleConfig {
     colspan;
     align; // Can't be used in tempaltes!
@@ -1844,157 +2005,6 @@ class Column {
     }
 }
 
-class ColumnAsyncAttribute extends BehaviorSubject {
-    constructor(value) {
-        super(Object.freeze(value));
-    }
-    next(value) {
-        const newValue = value;
-        const oldValue = this.getValue();
-        if (newValue !== oldValue) {
-            super.next(Object.freeze(value));
-        }
-    }
-}
-
-class ColumnAttributes {
-    _title;
-    _name;
-    _customizable = true;
-    _sortable;
-    _sortableDefault;
-    _direction$ = new ColumnAsyncAttribute(null);
-    _align;
-    _width;
-    _className;
-    _visible$ = new ColumnAsyncAttribute(true);
-    constructor(attrs = {}) {
-        this._init(attrs);
-    }
-    // title
-    set title(value) {
-        this._title = value;
-    }
-    get title() {
-        return this._title;
-    }
-    // name
-    set name(value) {
-        this._name = value;
-    }
-    get name() {
-        return this._name;
-    }
-    // customize
-    set customizable(value) {
-        this._customizable = value;
-    }
-    get customizable() {
-        return this._customizable;
-    }
-    // sortable
-    set sortable(value) {
-        this._sortable = value;
-    }
-    get sortable() {
-        return this._sortable;
-    }
-    // sortableDefault
-    set sortableDefault(value) {
-        this._sortableDefault = value;
-        if (this.sortableDefault) {
-            this.sortable = true;
-        }
-    }
-    get sortableDefault() {
-        return this._sortableDefault;
-    }
-    // direction
-    set direction(value) {
-        this.sortable = true;
-        this._direction$.next(value);
-    }
-    get direction() {
-        return this._direction$.value;
-    }
-    get direction$() {
-        return this._direction$.asObservable();
-    }
-    // align
-    set align(value) {
-        this._align = value;
-    }
-    get align() {
-        return this._align;
-    }
-    // width
-    set width(value) {
-        this._width = value;
-    }
-    get width() {
-        return this._width;
-    }
-    // className
-    set className(value) {
-        this._className = value;
-    }
-    get className() {
-        return this._className;
-    }
-    // visibility
-    set visible(value) {
-        this._visible$.next(value);
-    }
-    get visible() {
-        return this._visible$.getValue();
-    }
-    get visible$() {
-        return this._visible$.asObservable();
-    }
-    _init(attrs) {
-        Object.keys(attrs)
-            .forEach((key) => {
-            switch (key) {
-                case 'title':
-                    {
-                        this.title = attrs[key];
-                    }
-                    break;
-                case 'name':
-                    {
-                        this.name = attrs[key];
-                    }
-                    break;
-                case 'align':
-                    {
-                        this.align = attrs[key];
-                    }
-                    break;
-                case 'direction':
-                    {
-                        this.direction = attrs[key];
-                    }
-                    break;
-                case 'sortable':
-                    {
-                        this.sortable = attrs[key];
-                    }
-                    break;
-                case 'show':
-                    {
-                        this.visible = attrs[key];
-                    }
-                    break;
-                case 'visible':
-                    {
-                        this.visible = attrs[key];
-                    }
-                    break;
-            }
-        });
-    }
-}
-
 class ColumnsColumn {
     template;
     name;
@@ -2021,6 +2031,7 @@ class FsCellComponent {
         });
     }
     ngOnInit() {
+        this._listenRowDataChange();
         this._listenGroupOpen();
     }
     ngOnChanges(changes) {
@@ -2071,6 +2082,16 @@ class FsCellComponent {
             }
         }
     }
+    _listenRowDataChange() {
+        const currentRow = this.row();
+        if (currentRow instanceof SimpleRow) {
+            currentRow.data$
+                .pipe(skip(1), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._initCellContext();
+            });
+        }
+    }
     _initCellTemplate() {
         const currentRow = this.row();
         if (currentRow && isGroupRow(currentRow)) {
@@ -2382,7 +2403,7 @@ class FsRowComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowActionsRaw: { classPropertyName: "rowActionsRaw", publicName: "rowActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, groupActionsRaw: { classPropertyName: "groupActionsRaw", publicName: "groupActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, hasRowActions: { classPropertyName: "hasRowActions", publicName: "hasRowActions", isSignal: false, isRequired: false, transformFunction: null }, rowEvents: { classPropertyName: "rowEvents", publicName: "rowEvents", isSignal: false, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: false, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: false, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, rowRemoved: { classPropertyName: "rowRemoved", publicName: "rowRemoved", isSignal: false, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: false, isRequired: false, transformFunction: null }, reorderEnabled: { classPropertyName: "reorderEnabled", publicName: "reorderEnabled", isSignal: false, isRequired: false, transformFunction: null }, reorderPosition: { classPropertyName: "reorderPosition", publicName: "reorderPosition", isSignal: false, isRequired: false, transformFunction: null }, reorderStrategy: { classPropertyName: "reorderStrategy", publicName: "reorderStrategy", isSignal: false, isRequired: false, transformFunction: null }, reorderMultiple: { classPropertyName: "reorderMultiple", publicName: "reorderMultiple", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.rowCustomClass()", "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection" } }, ngImport: i0, template: "<!-- Drag -->\n@if (leftDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Selection -->\n@if (selection && !(selection.disabled$ | async)) {\n  <td class=\"fs-list-col fs-list-col-selection\">\n    @if (!isGroupFooterRow()) {\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    }\n  </td>\n}\n<!-- Content -->\n@for (column of columns; track trackByFn($index); let isFirst = $first) {\n  @if ((isGroupRow() && !column.groupHeaderColspanned) || (isGroupFooterRow() && !column.groupFooterColspanned) || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)) {\n    <td\n      fs-cell\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    </td>\n  }\n}\n<!-- Drag -->\n@if (rightDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Row Actions -->\n@if (hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)) {\n  <td class=\"fs-list-col actions-col\">\n    @if (!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    }\n  </td>\n}\n<ng-template #dragCell>\n  @if (dragCellVisible() && !isGroupFooterRow()) {\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>\n        drag_handle\n      </mat-icon>\n    </td>\n  } @else {\n    <td class=\"fs-list-col drag-col\"></td>\n  }\n</ng-template>", 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}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;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;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "rowIndex", "row"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowActionsRaw: { classPropertyName: "rowActionsRaw", publicName: "rowActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, groupActionsRaw: { classPropertyName: "groupActionsRaw", publicName: "groupActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, hasRowActions: { classPropertyName: "hasRowActions", publicName: "hasRowActions", isSignal: false, isRequired: false, transformFunction: null }, rowEvents: { classPropertyName: "rowEvents", publicName: "rowEvents", isSignal: false, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: false, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: false, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, rowRemoved: { classPropertyName: "rowRemoved", publicName: "rowRemoved", isSignal: false, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: false, isRequired: false, transformFunction: null }, reorderEnabled: { classPropertyName: "reorderEnabled", publicName: "reorderEnabled", isSignal: false, isRequired: false, transformFunction: null }, reorderPosition: { classPropertyName: "reorderPosition", publicName: "reorderPosition", isSignal: false, isRequired: false, transformFunction: null }, reorderStrategy: { classPropertyName: "reorderStrategy", publicName: "reorderStrategy", isSignal: false, isRequired: false, transformFunction: null }, reorderMultiple: { classPropertyName: "reorderMultiple", publicName: "reorderMultiple", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.rowCustomClass()", "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection" } }, ngImport: i0, template: "<!-- Drag -->\n@if (leftDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Selection -->\n@if (selection && (selection.enabled$ | async)) {\n  <td class=\"fs-list-col fs-list-col-selection\">\n    @if (!isGroupFooterRow()) {\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    }\n  </td>\n}\n<!-- Content -->\n@for (column of columns; track trackByFn($index); let isFirst = $first) {\n  @if ((isGroupRow() && !column.groupHeaderColspanned) || (isGroupFooterRow() && !column.groupFooterColspanned) || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)) {\n    <td\n      fs-cell\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    </td>\n  }\n}\n<!-- Drag -->\n@if (rightDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Row Actions -->\n@if (hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)) {\n  <td class=\"fs-list-col actions-col\">\n    @if (!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    }\n  </td>\n}\n<ng-template #dragCell>\n  @if (dragCellVisible() && !isGroupFooterRow()) {\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>\n        drag_handle\n      </mat-icon>\n    </td>\n  } @else {\n    <td class=\"fs-list-col drag-col\"></td>\n  }\n</ng-template>", 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}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;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;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "rowIndex", "row"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, decorators: [{
             type: Component,
@@ -2396,7 +2417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsRowActionsComponent,
                         MatIcon,
                         AsyncPipe,
-                    ], template: "<!-- Drag -->\n@if (leftDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Selection -->\n@if (selection && !(selection.disabled$ | async)) {\n  <td class=\"fs-list-col fs-list-col-selection\">\n    @if (!isGroupFooterRow()) {\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    }\n  </td>\n}\n<!-- Content -->\n@for (column of columns; track trackByFn($index); let isFirst = $first) {\n  @if ((isGroupRow() && !column.groupHeaderColspanned) || (isGroupFooterRow() && !column.groupFooterColspanned) || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)) {\n    <td\n      fs-cell\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    </td>\n  }\n}\n<!-- Drag -->\n@if (rightDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Row Actions -->\n@if (hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)) {\n  <td class=\"fs-list-col actions-col\">\n    @if (!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    }\n  </td>\n}\n<ng-template #dragCell>\n  @if (dragCellVisible() && !isGroupFooterRow()) {\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>\n        drag_handle\n      </mat-icon>\n    </td>\n  } @else {\n    <td class=\"fs-list-col drag-col\"></td>\n  }\n</ng-template>", 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}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;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;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .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"] }]
+                    ], template: "<!-- Drag -->\n@if (leftDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Selection -->\n@if (selection && (selection.enabled$ | async)) {\n  <td class=\"fs-list-col fs-list-col-selection\">\n    @if (!isGroupFooterRow()) {\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    }\n  </td>\n}\n<!-- Content -->\n@for (column of columns; track trackByFn($index); let isFirst = $first) {\n  @if ((isGroupRow() && !column.groupHeaderColspanned) || (isGroupFooterRow() && !column.groupFooterColspanned) || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)) {\n    <td\n      fs-cell\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    </td>\n  }\n}\n<!-- Drag -->\n@if (rightDragDropEnabled) {\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Row Actions -->\n@if (hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)) {\n  <td class=\"fs-list-col actions-col\">\n    @if (!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    }\n  </td>\n}\n<ng-template #dragCell>\n  @if (dragCellVisible() && !isGroupFooterRow()) {\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>\n        drag_handle\n      </mat-icon>\n    </td>\n  } @else {\n    <td class=\"fs-list-col drag-col\"></td>\n  }\n</ng-template>", 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}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;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;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .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"] }]
         }], ctorParameters: () => [], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -2458,14 +2479,14 @@ class FsBodyComponent {
     rowsContainer;
     headerTemplate;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsBodyComponent, isStandalone: true, 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: TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "@for (row of rows; track row; 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}\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FsRowComponent, selector: "[fs-list-row]", inputs: ["row", "rowActionsRaw", "groupActionsRaw", "hasRowActions", "rowEvents", "rowClass", "restoreMode", "rowIndex", "columns", "selection", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "directive", type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: ["row"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsBodyComponent, isStandalone: true, 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: TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "@for (row of rows; track row; 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}", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FsRowComponent, selector: "[fs-list-row]", inputs: ["row", "rowActionsRaw", "groupActionsRaw", "hasRowActions", "rowEvents", "rowClass", "restoreMode", "rowIndex", "columns", "selection", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "directive", type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: ["row"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fs-list-body]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FsRowComponent,
                         FsListDraggableRowDirective,
-                    ], template: "@for (row of rows; track row; 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}\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"] }]
+                    ], template: "@for (row of rows; track row; 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}", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"] }]
         }], propDecorators: { rows: [{
                 type: Input
             }], columns: [{
@@ -2645,7 +2666,7 @@ class CustomizeColsDialogComponent {
         this._dialog.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CustomizeColsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CustomizeColsDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    @for (column of columns; track column) {\n      <div>\n        <mat-checkbox\n          [checked]=\"column.show\"\n          (change)=\"visibilityChange($event, column)\"\n          [disabled]=\"column.disabled\">\n          @if (column.title) {\n            {{ column.title }}\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n          }\n        </mat-checkbox>\n      </div>\n    }\n    @if (!columns.length) {\n      <div class=\"no-results\">\n        No results found\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  @if (columns.length) {\n    <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n      Save\n    </button>\n  }\n  <button\n    type=\"button\"\n    mat-button\n    [color]=\"columns.length ? null : 'primary'\"\n    (click)=\"cancel()\">\n    {{ columns.length ? 'Cancel' : 'Done' }}\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}.no-results{text-align:center;padding:15px 0;color:#999}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CustomizeColsDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    @for (column of columns; track column) {\n      <div>\n        <mat-checkbox\n            [checked]=\"column.show\"\n            (change)=\"visibilityChange($event, column)\"\n            [disabled]=\"column.disabled\">\n          @if (column.title) {\n            {{ column.title }}\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n          }\n        </mat-checkbox>\n      </div>\n    }\n    @if (!columns.length) {\n      <div class=\"no-results\">\n        No results found\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  @if (columns.length) {\n    <button\n        type=\"button\"\n        mat-button\n        color=\"primary\"\n        (click)=\"save()\"\n        [disabled]=\"saveDisabled\">\n      Save\n    </button>\n  }\n  <button\n      type=\"button\"\n      mat-button\n      [color]=\"columns.length ? null : 'primary'\"\n      (click)=\"cancel()\">\n    {{ columns.length ? 'Cancel' : 'Done' }}\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}.no-results{text-align:center;padding:15px 0;color:#999}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CustomizeColsDialogComponent, decorators: [{
             type: Component,
@@ -2656,8 +2677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatCheckbox,
                         NgTemplateOutlet,
                         MatDialogActions,
-                        MatButton
-                    ], template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    @for (column of columns; track column) {\n      <div>\n        <mat-checkbox\n          [checked]=\"column.show\"\n          (change)=\"visibilityChange($event, column)\"\n          [disabled]=\"column.disabled\">\n          @if (column.title) {\n            {{ column.title }}\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n          }\n        </mat-checkbox>\n      </div>\n    }\n    @if (!columns.length) {\n      <div class=\"no-results\">\n        No results found\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  @if (columns.length) {\n    <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n      Save\n    </button>\n  }\n  <button\n    type=\"button\"\n    mat-button\n    [color]=\"columns.length ? null : 'primary'\"\n    (click)=\"cancel()\">\n    {{ columns.length ? 'Cancel' : 'Done' }}\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}.no-results{text-align:center;padding:15px 0;color:#999}\n"] }]
+                        MatButton,
+                    ], template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    @for (column of columns; track column) {\n      <div>\n        <mat-checkbox\n            [checked]=\"column.show\"\n            (change)=\"visibilityChange($event, column)\"\n            [disabled]=\"column.disabled\">\n          @if (column.title) {\n            {{ column.title }}\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n          }\n        </mat-checkbox>\n      </div>\n    }\n    @if (!columns.length) {\n      <div class=\"no-results\">\n        No results found\n      </div>\n    }\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  @if (columns.length) {\n    <button\n        type=\"button\"\n        mat-button\n        color=\"primary\"\n        (click)=\"save()\"\n        [disabled]=\"saveDisabled\">\n      Save\n    </button>\n  }\n  <button\n      type=\"button\"\n      mat-button\n      [color]=\"columns.length ? null : 'primary'\"\n      (click)=\"cancel()\">\n    {{ columns.length ? 'Cancel' : 'Done' }}\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}.no-results{text-align:center;padding:15px 0;color:#999}\n"] }]
         }], ctorParameters: () => [] });
 
 class FsFooterCellComponent extends FsCellComponent {
@@ -3365,22 +3386,6 @@ class DataController {
     clearRows() {
         this.visibleRows = [];
     }
-    /**
-     * Replace data for specified row
-     * @param targetRow
-     * @param trackBy
-     */
-    replaceData(targetRow, trackBy) {
-        const rowIndex = this._rowsStack.findIndex((listRow) => {
-            return trackBy(listRow.data, targetRow);
-        });
-        if (rowIndex === -1) {
-            return false;
-        }
-        this._rowsStack[rowIndex] = makeRowFactory(targetRow, RowType.Simple);
-        this._updateVisibleRows();
-        return true;
-    }
     /**
      * Update data for specified row
      * @param rows
@@ -3394,12 +3399,9 @@ class DataController {
                     updateSuccess = true;
                 }
             });
-            this._updateVisibleRows();
             return updateSuccess;
         }
-        const updated = this._updateRow(rows, trackBy);
-        this._updateVisibleRows();
-        return updated;
+        return this._updateRow(rows, trackBy);
     }
     /**
      * Remove data for specified row
@@ -3515,20 +3517,18 @@ class DataController {
             return !isChildTypeRow(row) || row.visible;
         });
     }
-    _updateRow(targetRow, trackBy) {
+    _updateRow(updatedRow, trackBy) {
         if (trackBy === undefined) {
             trackBy = (row, target) => {
                 return row === target;
             };
         }
-        const targetIndex = this._rowsStack.findIndex((listRow) => trackBy(listRow.data, targetRow));
+        const targetIndex = this._rowsStack
+            .findIndex((listRow) => trackBy(listRow.data, updatedRow));
         if (targetIndex !== -1) {
-            const updateTarget = this._rowsStack[targetIndex];
-            const updatedData = { ...updateTarget.data, ...targetRow };
-            this._rowsStack[targetIndex] = makeRowFactory(updatedData, updateTarget.type, {
-                parent: updateTarget.parent,
-                initialExpand: updateTarget.expanded,
-            });
+            const targetRow = this._rowsStack[targetIndex];
+            const updatedData = { ...targetRow.data, ...updatedRow };
+            targetRow.data = updatedData;
             return true;
         }
         return false;
@@ -5097,7 +5097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             type: Directive,
             args: [{
                     selector: '[fs-list-cell]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], propDecorators: { colspan: [{
                 type: Input
@@ -5672,9 +5672,6 @@ class FsListComponent {
     updateData(rows, trackBy) {
         return this.list.dataController.updateData(rows, trackBy);
     }
-    replaceRow(row, trackBy) {
-        return this.list.dataController.replaceData(row, trackBy);
-    }
     updateSelectionConfig(config) {
         this.list.selection.updateConfig(config);
     }
@@ -5852,7 +5849,7 @@ class FsListComponent {
             GroupExpandNotifierService,
             PersistanceController,
             ReorderController,
-        ], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filters': list.filterConfig?.items.length,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n  @if (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        @if (list.filterConfig) {\n          <fs-filter\n            class=\"fs-list-filter\"\n            [config]=\"list.filterConfig\">\n            @if (hasStatus) {\n              <ng-template fsFilterStatusBar>\n                <fs-list-status\n                  class=\"fs-list-status\"\n                  [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                  [rows]=\"listData\"\n                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-template>\n            }\n            @if (headingTemplate) {\n              <ng-template fsFilterHeading>\n                <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n              </ng-template>\n            }\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      @if (!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-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          @if (list.columns.hasHeader) {\n            <thead\n              fs-list-head\n              class=\"fs-list-head\"\n              role=\"rowgroup\"\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          @if (list.columns.hasFooter) {\n            <tfoot\n              fs-list-footer\n              class=\"fs-list-footer\"\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          }\n        </table>\n      }\n      @if (firstLoad) {\n        <fs-list-loader\n          [columns]=\"list.columns.columns\"\n          [loaderLines]=\"loaderLines\">\n        </fs-list-loader>\n      }\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    @if (!firstLoad) {\n      @if (listData.length === 0) {\n        <div\n          class=\"fs-list-no-results-container\">\n          @if (list.noResults?.message && !list.emptyStateEnabled) {\n            <div\n              class=\"fs-list-no-results\">\n              {{ list.noResults?.message }}\n            </div>\n          }\n          @if (list.emptyStateEnabled) {\n            <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n          }\n        </div>\n      }\n    }\n  }\n</ng-template>", styles: ["::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:400;color:#8f8f8f;font-size:85%;text-align:left}::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-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::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):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}: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.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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;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-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "directive", type: FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filters': list.filterConfig?.items.length,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n  @if (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        @if (list.filterConfig) {\n          <fs-filter\n            class=\"fs-list-filter\"\n            [config]=\"list.filterConfig\">\n            @if (hasStatus) {\n              <ng-template fsFilterStatusBar>\n                <fs-list-status\n                  class=\"fs-list-status\"\n                  [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                  [rows]=\"listData\"\n                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-template>\n            }\n            @if (headingTemplate) {\n              <ng-template fsFilterHeading>\n                <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n              </ng-template>\n            }\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      @if (!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-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          @if (list.columns.hasHeader) {\n            <thead\n              fs-list-head\n              class=\"fs-list-head\"\n              role=\"rowgroup\"\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          @if (list.columns.hasFooter) {\n            <tfoot\n              fs-list-footer\n              class=\"fs-list-footer\"\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          }\n        </table>\n      }\n      @if (firstLoad) {\n        <fs-list-loader\n          [columns]=\"list.columns.columns\"\n          [loaderLines]=\"loaderLines\">\n        </fs-list-loader>\n      }\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    @if (!firstLoad) {\n      @if (listData.length === 0) {\n        <div\n          class=\"fs-list-no-results-container\">\n          @if (list.noResults?.message && !list.emptyStateEnabled) {\n            <div\n              class=\"fs-list-no-results\">\n              {{ list.noResults?.message }}\n            </div>\n          }\n          @if (list.emptyStateEnabled) {\n            <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n          }\n        </div>\n      }\n    }\n  }\n</ng-template>", styles: ["::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:400;color:#8f8f8f;font-size:85%;text-align:left}::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.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::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):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}: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.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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;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-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "directive", type: FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, decorators: [{
             type: Component,
@@ -5876,7 +5873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsListLoaderComponent,
                         FsPaginationComponent,
                         AsyncPipe,
-                    ], template: "<div\n  class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filters': list.filterConfig?.items.length,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n  @if (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        @if (list.filterConfig) {\n          <fs-filter\n            class=\"fs-list-filter\"\n            [config]=\"list.filterConfig\">\n            @if (hasStatus) {\n              <ng-template fsFilterStatusBar>\n                <fs-list-status\n                  class=\"fs-list-status\"\n                  [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                  [rows]=\"listData\"\n                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-template>\n            }\n            @if (headingTemplate) {\n              <ng-template fsFilterHeading>\n                <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n              </ng-template>\n            }\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      @if (!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-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          @if (list.columns.hasHeader) {\n            <thead\n              fs-list-head\n              class=\"fs-list-head\"\n              role=\"rowgroup\"\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          @if (list.columns.hasFooter) {\n            <tfoot\n              fs-list-footer\n              class=\"fs-list-footer\"\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          }\n        </table>\n      }\n      @if (firstLoad) {\n        <fs-list-loader\n          [columns]=\"list.columns.columns\"\n          [loaderLines]=\"loaderLines\">\n        </fs-list-loader>\n      }\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    @if (!firstLoad) {\n      @if (listData.length === 0) {\n        <div\n          class=\"fs-list-no-results-container\">\n          @if (list.noResults?.message && !list.emptyStateEnabled) {\n            <div\n              class=\"fs-list-no-results\">\n              {{ list.noResults?.message }}\n            </div>\n          }\n          @if (list.emptyStateEnabled) {\n            <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n          }\n        </div>\n      }\n    }\n  }\n</ng-template>", styles: ["::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:400;color:#8f8f8f;font-size:85%;text-align:left}::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-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::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):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}: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.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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;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-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
+                    ], template: "<div\n  class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filters': list.filterConfig?.items.length,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n  @if (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        @if (list.filterConfig) {\n          <fs-filter\n            class=\"fs-list-filter\"\n            [config]=\"list.filterConfig\">\n            @if (hasStatus) {\n              <ng-template fsFilterStatusBar>\n                <fs-list-status\n                  class=\"fs-list-status\"\n                  [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                  [rows]=\"listData\"\n                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-template>\n            }\n            @if (headingTemplate) {\n              <ng-template fsFilterHeading>\n                <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n              </ng-template>\n            }\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      @if (!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-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          @if (list.columns.hasHeader) {\n            <thead\n              fs-list-head\n              class=\"fs-list-head\"\n              role=\"rowgroup\"\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          @if (list.columns.hasFooter) {\n            <tfoot\n              fs-list-footer\n              class=\"fs-list-footer\"\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          }\n        </table>\n      }\n      @if (firstLoad) {\n        <fs-list-loader\n          [columns]=\"list.columns.columns\"\n          [loaderLines]=\"loaderLines\">\n        </fs-list-loader>\n      }\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    @if (!firstLoad) {\n      @if (listData.length === 0) {\n        <div\n          class=\"fs-list-no-results-container\">\n          @if (list.noResults?.message && !list.emptyStateEnabled) {\n            <div\n              class=\"fs-list-no-results\">\n              {{ list.noResults?.message }}\n            </div>\n          }\n          @if (list.emptyStateEnabled) {\n            <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n          }\n        </div>\n      }\n    }\n  }\n</ng-template>", styles: ["::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:400;color:#8f8f8f;font-size:85%;text-align:left}::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.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::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):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}: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.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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;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-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
         }], propDecorators: { classFsList: [{
                 type: HostBinding,
                 args: ['class.fs-list']