@firestitch/list 18.0.37 → 18.0.38

package/fesm2022/firestitch-list.mjs

@@ -1,40 +1,31 @@
-import * as i1 from '@angular/common';
-import { Location, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, EventEmitter, Component, ChangeDetectionStrategy, Output, Pipe, HostBinding, ViewChildren, TemplateRef, ViewContainerRef, ViewChild, ContentChild, inject, HostListener, ContentChildren, InjectionToken, ChangeDetectorRef, Injector, Optional, Inject, NgModule } from '@angular/core';
-import * as i5 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$2 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
-import * as i3$3 from '@angular/material/dialog';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i2$1 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i4$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5$2 from '@firestitch/common';
-import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
-import * as i5$1 from '@firestitch/file';
-import { FsFileModule } from '@firestitch/file';
-import * as i2 from '@firestitch/filter';
-import { ItemType, FilterComponent, FsFilterModule } from '@firestitch/filter';
-import * as i3$2 from '@firestitch/menu';
-import { FsMenuModule } from '@firestitch/menu';
-import * as i1$1 from '@firestitch/prompt';
-import { FsPromptModule } from '@firestitch/prompt';
+import { Injectable, Directive, Input, Component, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, Pipe, ViewChildren, TemplateRef, ViewContainerRef, ViewChild, ContentChild, inject, HostListener, ContentChildren, InjectionToken, ChangeDetectorRef, Injector, Optional, Inject, 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 { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith } from 'lodash-es';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { NgTemplateOutlet, NgIf, NgSwitch, NgSwitchCase, NgClass, NgFor, AsyncPipe, Location, DecimalPipe } from '@angular/common';
+import * as i1$2 from '@firestitch/prompt';
+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 * as i5 from '@angular/router';
+import { RouterLink } from '@angular/router';
+import { MatIcon } from '@angular/material/icon';
+import * as i1$1 from '@firestitch/menu';
+import { FsMenuModule } from '@firestitch/menu';
+import * as i3 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import * as i1$3 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 * as i2$2 from '@firestitch/selection';
+import { ItemType, FilterComponent, FilterStatusBarDirective } from '@firestitch/filter';
+import * as i2 from '@firestitch/selection';
+import { MatRipple } from '@angular/material/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 var ReorderPosition;
 (function (ReorderPosition) {
@@ -1019,12 +1010,13 @@ class FsListDraggableListDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListDraggableListDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: ReorderController }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: { _rows: ["rows", "_rows"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListDraggableListDirective, isStandalone: true, selector: "[fsListDraggableList]", inputs: { _rows: ["rows", "_rows"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListDraggableListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsListDraggableList]',
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: ReorderController }, { type: i0.Renderer2 }], propDecorators: { _rows: [{
                 type: Input,
@@ -1357,198 +1349,6 @@ class RowAction {
     }
 }
 
-class FsRowInlineActionComponent {
-    actionType;
-    rowAction;
-    row;
-    clicked = new EventEmitter();
-    fileSelect = new EventEmitter();
-    icon;
-    ngOnChanges(changes) {
-        if (changes.row) {
-            this.icon = this.rowAction.getRowIcon(this.row.data);
-        }
-    }
-    actionClick(event) {
-        this.clicked.emit(event);
-    }
-    ngOnInit() {
-        this.actionType = this.rowAction.type;
-        if (!this.rowAction.label && this.rowAction.icon) {
-            this.actionType = ActionType.Icon;
-        }
-    }
-    fileSelected(event) {
-        this.fileSelect.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"rowAction.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatMiniFabAnchor, selector: "a[mat-mini-fab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFabAnchor, selector: "a[mat-fab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-list-row-inline-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n    *ngIf=\"rowAction.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"] }]
-        }], propDecorators: { rowAction: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }], fileSelect: [{
-                type: Output
-            }] } });
-
-class ActionLabelPipe {
-    transform(label, row) {
-        if (typeof label === 'function') {
-            return label(row.data);
-        }
-        return label;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: ActionLabelPipe, name: "actionLabel" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionLabelPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'actionLabel' }]
-        }] });
-
-class FsRowMenuActionComponent {
-    _menu;
-    row;
-    rowAction;
-    file;
-    fileSelect = new EventEmitter();
-    fileError = new EventEmitter();
-    icon;
-    label;
-    constructor(_menu) {
-        this._menu = _menu;
-    }
-    ngOnChanges(changes) {
-        if (changes.row) {
-            this.icon = this.rowAction.getRowIcon(this.row.data);
-        }
-    }
-    selectFile(event) {
-        this.fileSelect.emit(event);
-        this.closeMenu();
-    }
-    errorFile(event) {
-        this.fileError.emit(event);
-        this.closeMenu();
-    }
-    closeMenu() {
-        this._menu.closeMenu();
-    }
-    ngOnInit() {
-        this.label = this.rowAction.label;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, deps: [{ token: i3$2.FsMenuComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: { row: "row", rowAction: "rowAction", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">\n    {{ icon }}\n  </mat-icon>\n  {{ label| actionLabel:row }}\n</ng-container>\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">\n      {{ icon }}\n    </mat-icon>\n    {{ label| actionLabel:row }}\n  </fs-file>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-list-row-menu-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">\n    {{ icon }}\n  </mat-icon>\n  {{ label| actionLabel:row }}\n</ng-container>\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">\n      {{ icon }}\n    </mat-icon>\n    {{ label| actionLabel:row }}\n  </fs-file>\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i3$2.FsMenuComponent }], propDecorators: { row: [{
-                type: Input
-            }], rowAction: [{
-                type: Input
-            }], file: [{
-                type: Input
-            }], fileSelect: [{
-                type: Output
-            }], fileError: [{
-                type: Output
-            }] } });
-
-class FsRowActionsComponent {
-    _prompt;
-    row;
-    index;
-    restoreMode = false;
-    rowActions = [];
-    rowRemoved;
-    menuRowActions = [];
-    inlineRowActions = [];
-    restoreAction;
-    _destroy$ = new Subject();
-    constructor(_prompt) {
-        this._prompt = _prompt;
-    }
-    actionClick(action, row, event, menuRef) {
-        if (action.remove) {
-            if (typeof action.remove === 'boolean') {
-                this._removeAction(action, row.data, event, this.index);
-            }
-            else {
-                this._prompt.confirm({
-                    title: action.remove.title,
-                    template: action.remove.template,
-                    autofocus: true,
-                })
-                    .pipe(take(1), takeUntil(this._destroy$))
-                    .subscribe(() => {
-                    this._removeAction(action, row.data, event, this.index);
-                });
-            }
-        }
-        else {
-            action.click(row.data, event, this.index, menuRef);
-        }
-    }
-    /**
-     * Track By for improve change detection
-     *
-     * @param index
-     */
-    trackByFn(index) {
-        return index;
-    }
-    /**
-     * Emit that some row must be removed
-     *
-     * @param action
-     * @param row
-     * @param event
-     * @param index
-     */
-    _removeAction(action, row, event, index) {
-        const removeObservable = action.click(row, event, index);
-        if (removeObservable && removeObservable instanceof Observable) {
-            removeObservable
-                .pipe(take(1), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.rowRemoved.emit(row);
-            });
-        }
-        else {
-            this.rowRemoved.emit(row);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowActionsComponent, deps: [{ token: i1$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: { row: "row", index: "index", restoreMode: "restoreMode", rowActions: "rowActions", rowRemoved: "rowRemoved", menuRowActions: "menuRowActions", inlineRowActions: "inlineRowActions", restoreAction: "restoreAction" }, ngImport: i0, template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action\n      class=\"row-inline-action row-inline-action-{{action.type}}\"\n      [rowAction]=\"action\"\n      [row]=\"row\"\n      [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n<!-- Menu -->\n<fs-menu\n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template\n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [rowAction]=\"action\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template\n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                [class]=\"subAction.className\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [rowAction]=\"subAction\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template\n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            [class]=\"action.className\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [rowAction]=\"action\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template\n        fs-menu-item\n        (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">\n        {{ restoreAction.icon }}\n      </mat-icon>\n      {{ restoreAction.label | actionLabel:row }}\n    </ng-template>\n  </ng-container>\n</fs-menu>", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i3$2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["rowAction", "row"], outputs: ["clicked", "fileSelect"] }, { kind: "component", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "rowAction", "file"], outputs: ["fileSelect", "fileError"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-list-row-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action\n      class=\"row-inline-action row-inline-action-{{action.type}}\"\n      [rowAction]=\"action\"\n      [row]=\"row\"\n      [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n<!-- Menu -->\n<fs-menu\n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template\n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [rowAction]=\"action\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template\n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                [class]=\"subAction.className\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [rowAction]=\"subAction\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template\n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            [class]=\"action.className\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [rowAction]=\"action\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template\n        fs-menu-item\n        (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">\n        {{ restoreAction.icon }}\n      </mat-icon>\n      {{ restoreAction.label | actionLabel:row }}\n    </ng-template>\n  </ng-container>\n</fs-menu>", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FsPrompt }], propDecorators: { row: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], restoreMode: [{
-                type: Input
-            }], rowActions: [{
-                type: Input
-            }], rowRemoved: [{
-                type: Input
-            }], menuRowActions: [{
-                type: Input
-            }], inlineRowActions: [{
-                type: Input
-            }], restoreAction: [{
-                type: Input
-            }] } });
-
 class StyleConfig {
     colspan;
     align; // Can't be used in tempaltes!
@@ -1871,35 +1671,261 @@ class FsCellComponent {
             this.cellTemplate = this.column.groupFooterTemplate || this.column.cellTemplate;
         }
         else {
-            this.cellTemplate = this.column.cellTemplate;
-        }
-    }
-    _listenGroupOpen() {
-        if (this.row && this.row.isGroup) {
-            this.row.expanded$
-                .pipe(takeUntil(this._destroy$))
-                .subscribe((status) => {
-                this.cellContext.expanded = status;
-            });
+            this.cellTemplate = this.column.cellTemplate;
+        }
+    }
+    _listenGroupOpen() {
+        if (this.row && this.row.isGroup) {
+            this.row.expanded$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((status) => {
+                this.cellContext.expanded = status;
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsCellComponent, isStandalone: true, selector: "[fs-cell]", inputs: { column: "column", row: "row", rowIndex: "rowIndex" }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
+        }], propDecorators: { isColl: [{
+                type: HostBinding,
+                args: ['class.fs-list-col']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], column: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }] } });
+
+class FsRowInlineActionComponent {
+    actionType;
+    rowAction;
+    row;
+    clicked = new EventEmitter();
+    fileSelect = new EventEmitter();
+    icon;
+    ngOnChanges(changes) {
+        if (changes.row) {
+            this.icon = this.rowAction.getRowIcon(this.row.data);
+        }
+    }
+    actionClick(event) {
+        this.clicked.emit(event);
+    }
+    ngOnInit() {
+        this.actionType = this.rowAction.type;
+        if (!this.rowAction.label && this.rowAction.icon) {
+            this.actionType = ActionType.Icon;
+        }
+    }
+    fileSelected(event) {
+        this.fileSelect.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowInlineActionComponent, isStandalone: true, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"rowAction.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatFabAnchor, selector: "a[mat-fab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabAnchor, selector: "a[mat-mini-fab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-list-row-inline-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgSwitch,
+                        NgSwitchCase,
+                        MatButton,
+                        NgClass,
+                        NgTemplateOutlet,
+                        MatAnchor,
+                        RouterLink,
+                        MatIconButton,
+                        MatIconAnchor,
+                        MatFabButton,
+                        MatFabAnchor,
+                        MatMiniFabButton,
+                        MatMiniFabAnchor,
+                        MatIcon,
+                        FsFileModule,
+                    ], template: "<ng-container\n    *ngIf=\"rowAction.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"] }]
+        }], propDecorators: { rowAction: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], fileSelect: [{
+                type: Output
+            }] } });
+
+class ActionLabelPipe {
+    transform(label, row) {
+        if (typeof label === 'function') {
+            return label(row.data);
+        }
+        return label;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: ActionLabelPipe, isStandalone: true, name: "actionLabel" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActionLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'actionLabel',
+                    standalone: true
+                }]
+        }] });
+
+class FsRowMenuActionComponent {
+    _menu;
+    row;
+    rowAction;
+    file;
+    fileSelect = new EventEmitter();
+    fileError = new EventEmitter();
+    icon;
+    label;
+    constructor(_menu) {
+        this._menu = _menu;
+    }
+    ngOnChanges(changes) {
+        if (changes.row) {
+            this.icon = this.rowAction.getRowIcon(this.row.data);
+        }
+    }
+    selectFile(event) {
+        this.fileSelect.emit(event);
+        this.closeMenu();
+    }
+    errorFile(event) {
+        this.fileError.emit(event);
+        this.closeMenu();
+    }
+    closeMenu() {
+        this._menu.closeMenu();
+    }
+    ngOnInit() {
+        this.label = this.rowAction.label;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, deps: [{ token: i1$1.FsMenuComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowMenuActionComponent, isStandalone: true, selector: "fs-list-row-menu-action", inputs: { row: "row", rowAction: "rowAction", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">\n    {{ icon }}\n  </mat-icon>\n  {{ label| actionLabel:row }}\n</ng-container>\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">\n      {{ icon }}\n    </mat-icon>\n    {{ label| actionLabel:row }}\n  </fs-file>\n</ng-template>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-list-row-menu-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        MatIcon,
+                        FsFileModule,
+                        ActionLabelPipe,
+                    ], template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">\n    {{ icon }}\n  </mat-icon>\n  {{ label| actionLabel:row }}\n</ng-container>\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">\n      {{ icon }}\n    </mat-icon>\n    {{ label| actionLabel:row }}\n  </fs-file>\n</ng-template>" }]
+        }], ctorParameters: () => [{ type: i1$1.FsMenuComponent }], propDecorators: { row: [{
+                type: Input
+            }], rowAction: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], fileSelect: [{
+                type: Output
+            }], fileError: [{
+                type: Output
+            }] } });
+
+class FsRowActionsComponent {
+    _prompt;
+    row;
+    index;
+    restoreMode = false;
+    rowActions = [];
+    rowRemoved;
+    menuRowActions = [];
+    inlineRowActions = [];
+    restoreAction;
+    _destroy$ = new Subject();
+    constructor(_prompt) {
+        this._prompt = _prompt;
+    }
+    actionClick(action, row, event, menuRef) {
+        if (action.remove) {
+            if (typeof action.remove === 'boolean') {
+                this._removeAction(action, row.data, event, this.index);
+            }
+            else {
+                this._prompt.confirm({
+                    title: action.remove.title,
+                    template: action.remove.template,
+                    autofocus: true,
+                })
+                    .pipe(take(1), takeUntil(this._destroy$))
+                    .subscribe(() => {
+                    this._removeAction(action, row.data, event, this.index);
+                });
+            }
+        }
+        else {
+            action.click(row.data, event, this.index, menuRef);
+        }
+    }
+    /**
+     * Track By for improve change detection
+     *
+     * @param index
+     */
+    trackByFn(index) {
+        return index;
+    }
+    /**
+     * Emit that some row must be removed
+     *
+     * @param action
+     * @param row
+     * @param event
+     * @param index
+     */
+    _removeAction(action, row, event, index) {
+        const removeObservable = action.click(row, event, index);
+        if (removeObservable && removeObservable instanceof Observable) {
+            removeObservable
+                .pipe(take(1), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.rowRemoved.emit(row);
+            });
+        }
+        else {
+            this.rowRemoved.emit(row);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsCellComponent, selector: "[fs-cell]", inputs: { column: "column", row: "row", rowIndex: "rowIndex" }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowActionsComponent, deps: [{ token: i1$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowActionsComponent, isStandalone: true, selector: "fs-list-row-actions", inputs: { row: "row", index: "index", restoreMode: "restoreMode", rowActions: "rowActions", rowRemoved: "rowRemoved", menuRowActions: "menuRowActions", inlineRowActions: "inlineRowActions", restoreAction: "restoreAction" }, ngImport: i0, template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action\n      class=\"row-inline-action row-inline-action-{{action.type}}\"\n      [rowAction]=\"action\"\n      [row]=\"row\"\n      [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n<!-- Menu -->\n<fs-menu\n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template\n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [rowAction]=\"action\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template\n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                [class]=\"subAction.className\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [rowAction]=\"subAction\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template\n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            [class]=\"action.className\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [rowAction]=\"action\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template\n        fs-menu-item\n        (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">\n        {{ restoreAction.icon }}\n      </mat-icon>\n      {{ restoreAction.label | actionLabel:row }}\n    </ng-template>\n  </ng-container>\n</fs-menu>", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["rowAction", "row"], outputs: ["clicked", "fileSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i1$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "rowAction", "file"], outputs: ["fileSelect", "fileError"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
-        }], propDecorators: { isColl: [{
-                type: HostBinding,
-                args: ['class.fs-list-col']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], column: [{
+            args: [{ selector: 'fs-list-row-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        FsRowInlineActionComponent,
+                        NgClass,
+                        FsMenuModule,
+                        FsRowMenuActionComponent,
+                        MatIcon,
+                        ActionLabelPipe,
+                    ], template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n  <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n    <fs-list-row-inline-action\n      class=\"row-inline-action row-inline-action-{{action.type}}\"\n      [rowAction]=\"action\"\n      [row]=\"row\"\n      [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n<!-- Menu -->\n<fs-menu\n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template\n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [rowAction]=\"action\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template\n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                [class]=\"subAction.className\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [rowAction]=\"subAction\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template\n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            [class]=\"action.className\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [rowAction]=\"action\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template\n        fs-menu-item\n        (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">\n        {{ restoreAction.icon }}\n      </mat-icon>\n      {{ restoreAction.label | actionLabel:row }}\n    </ng-template>\n  </ng-container>\n</fs-menu>", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FsPrompt }], propDecorators: { row: [{
                 type: Input
-            }], row: [{
+            }], index: [{
                 type: Input
-            }], rowIndex: [{
+            }], restoreMode: [{
+                type: Input
+            }], rowActions: [{
+                type: Input
+            }], rowRemoved: [{
+                type: Input
+            }], menuRowActions: [{
+                type: Input
+            }], inlineRowActions: [{
+                type: Input
+            }], restoreAction: [{
                 type: Input
             }] } });
 
@@ -2175,11 +2201,21 @@ class FsRowComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowComponent, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.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: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>", 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { 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,
-            args: [{ selector: '[fs-list-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>", 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"] }]
+            args: [{ selector: '[fs-list-row]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        MatCheckbox,
+                        NgFor,
+                        FsCellComponent,
+                        NgClass,
+                        FsRowActionsComponent,
+                        MatIcon,
+                        AsyncPipe,
+                    ], template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>", 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: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: FsListDraggableListDirective }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -2292,12 +2328,13 @@ class FsListDraggableRowDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListDraggableRowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ReorderController }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListDraggableRowDirective, selector: "[fsListDraggableRow]", inputs: { row: "row" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListDraggableRowDirective, isStandalone: true, selector: "[fsListDraggableRow]", inputs: { row: "row" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListDraggableRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsListDraggableRow]',
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ReorderController }, { type: FsListDraggableListDirective }], propDecorators: { row: [{
                 type: Input
@@ -2323,11 +2360,15 @@ 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: "14.0.0", version: "18.2.7", type: FsBodyComponent, selector: "[fs-list-body]", inputs: { rows: "rows", columns: "columns", hasFooter: "hasFooter", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", rowEvents: "rowEvents", rowClass: "rowClass", hasRowActions: "hasRowActions", selection: "selection", restoreMode: "restoreMode", rowRemoved: "rowRemoved", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsRowComponent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr\n    fs-list-row\n    fsListDraggableRow\n    [row]=\"row\"\n    [rowIndex]=\"i\"\n    [columns]=\"columns\"\n    [rowActionsRaw]=\"rowActionsRaw\"\n    [groupActionsRaw]=\"groupActionsRaw\"\n    [hasRowActions]=\"hasRowActions\"\n    [rowEvents]=\"rowEvents\"\n    [rowClass]=\"rowClass\"\n    [selection]=\"selection\"\n    [restoreMode]=\"restoreMode\"\n    [rowRemoved]=\"rowRemoved\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\"\n    [reorderMultiple]=\"reorderMultiple\">\n  </tr>\n</ng-container>\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "14.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: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr\n    fs-list-row\n    fsListDraggableRow\n    [row]=\"row\"\n    [rowIndex]=\"i\"\n    [columns]=\"columns\"\n    [rowActionsRaw]=\"rowActionsRaw\"\n    [groupActionsRaw]=\"groupActionsRaw\"\n    [hasRowActions]=\"hasRowActions\"\n    [rowEvents]=\"rowEvents\"\n    [rowClass]=\"rowClass\"\n    [selection]=\"selection\"\n    [restoreMode]=\"restoreMode\"\n    [rowRemoved]=\"rowRemoved\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\"\n    [reorderMultiple]=\"reorderMultiple\">\n  </tr>\n</ng-container>\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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, template: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr\n    fs-list-row\n    fsListDraggableRow\n    [row]=\"row\"\n    [rowIndex]=\"i\"\n    [columns]=\"columns\"\n    [rowActionsRaw]=\"rowActionsRaw\"\n    [groupActionsRaw]=\"groupActionsRaw\"\n    [hasRowActions]=\"hasRowActions\"\n    [rowEvents]=\"rowEvents\"\n    [rowClass]=\"rowClass\"\n    [selection]=\"selection\"\n    [restoreMode]=\"restoreMode\"\n    [rowRemoved]=\"rowRemoved\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\"\n    [reorderMultiple]=\"reorderMultiple\">\n  </tr>\n</ng-container>\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"] }]
+            args: [{ selector: '[fs-list-body]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgFor,
+                        FsRowComponent,
+                        FsListDraggableRowDirective,
+                    ], template: "<ng-container *ngFor=\"let row of rows; let i = index;\">\n  <tr\n    fs-list-row\n    fsListDraggableRow\n    [row]=\"row\"\n    [rowIndex]=\"i\"\n    [columns]=\"columns\"\n    [rowActionsRaw]=\"rowActionsRaw\"\n    [groupActionsRaw]=\"groupActionsRaw\"\n    [hasRowActions]=\"hasRowActions\"\n    [rowEvents]=\"rowEvents\"\n    [rowClass]=\"rowClass\"\n    [selection]=\"selection\"\n    [restoreMode]=\"restoreMode\"\n    [rowRemoved]=\"rowRemoved\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\"\n    [reorderMultiple]=\"reorderMultiple\">\n  </tr>\n</ng-container>\n", styles: [":host.drag-hidden .drag-col{opacity:0!important;cursor:default}:host.disabled{opacity:.4;pointer-events:none}\n"] }]
         }], propDecorators: { rows: [{
                 type: Input
             }], columns: [{
@@ -2507,11 +2548,20 @@ 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, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    <div *ngFor=\"let column of columns\">\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    @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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.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: i3$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], 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    <div *ngFor=\"let column of columns\">\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    @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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    <div *ngFor=\"let column of columns\">\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    @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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        NgFor,
+                        MatCheckbox,
+                        NgTemplateOutlet,
+                        MatDialogActions,
+                        MatButton,
+                    ], template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    <div *ngFor=\"let column of columns\">\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    @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 {
@@ -2519,11 +2569,11 @@ class FsFooterCellComponent extends FsCellComponent {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, isStandalone: true, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-footer-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
+            args: [{ selector: '[fs-list-footer-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [] });
 
 class FsFooterRowComponent extends FsRowComponent {
@@ -2531,11 +2581,16 @@ class FsFooterRowComponent extends FsRowComponent {
         super(el, cdRef, differs, renderer, null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterRowComponent, selector: "[fs-list-footer-row]", usesInheritance: true, ngImport: i0, template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterRowComponent, isStandalone: true, selector: "[fs-list-footer-row]", usesInheritance: true, ngImport: i0, template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-footer-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
+            args: [{ selector: '[fs-list-footer-row]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        FsFooterCellComponent,
+                        NgClass,
+                    ], template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }] });
 
 class FsFooterComponent {
@@ -2547,11 +2602,11 @@ class FsFooterComponent {
     reorderPosition;
     reorderStrategy;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: { hasRowActions: "hasRowActions", columns: "columns", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, ngImport: i0, template: "<tr \n    fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\">\n</tr>\n", styles: [""], dependencies: [{ kind: "component", type: FsFooterRowComponent, selector: "[fs-list-footer-row]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterComponent, isStandalone: true, selector: "[fs-list-footer]", inputs: { hasRowActions: "hasRowActions", columns: "columns", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, ngImport: i0, template: "<tr \n    fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\">\n</tr>\n", styles: [""], dependencies: [{ kind: "component", type: FsFooterRowComponent, selector: "[fs-list-footer-row]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-footer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr \n    fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\">\n</tr>\n" }]
+            args: [{ selector: '[fs-list-footer]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsFooterRowComponent], template: "<tr \n    fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [activeFiltersCount]=\"activeFiltersCount\"\n    [reorderEnabled]=\"reorderEnabled\"\n    [reorderPosition]=\"reorderPosition\"\n    [reorderStrategy]=\"reorderStrategy\">\n</tr>\n" }]
         }], propDecorators: { hasRowActions: [{
                 type: Input
             }], columns: [{
@@ -2588,11 +2643,18 @@ class FsHeadCellComponent extends FsCellComponent {
         this.cellContext.value = this.column.title;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHeadCellComponent, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0, template: "<div class=\"wrap\">\n  <span class=\"title\">\n    <ng-template [ngIf]=\"!column.headerTemplate\">\n      {{ column.title }}\n    </ng-template>\n    <ng-template\n      [ngIf]=\"column.headerTemplate\"\n      [ngTemplateOutlet]=\"column.headerTemplate\"\n      [ngTemplateOutletContext]=\"cellContext\">\n    </ng-template>\n  </span>\n  <div\n      class=\"direction\"\n      *ngIf=\"column.ordered\"\n      [ngSwitch]=\"column.sortingDirection$ | async\">\n    <mat-icon *ngSwitchCase=\"'asc'\">\n      arrow_downward\n    </mat-icon>\n    <mat-icon *ngSwitchCase=\"'desc'\">\n      arrow_upward\n    </mat-icon>\n  </div>\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}.wrap .direction{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHeadCellComponent, isStandalone: true, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0, template: "<div class=\"wrap\">\n  <span class=\"title\">\n    <ng-template [ngIf]=\"!column.headerTemplate\">\n      {{ column.title }}\n    </ng-template>\n    <ng-template\n      [ngIf]=\"column.headerTemplate\"\n      [ngTemplateOutlet]=\"column.headerTemplate\"\n      [ngTemplateOutletContext]=\"cellContext\">\n    </ng-template>\n  </span>\n  <div\n      class=\"direction\"\n      *ngIf=\"column.ordered\"\n      [ngSwitch]=\"column.sortingDirection$ | async\">\n    <mat-icon *ngSwitchCase=\"'asc'\">\n      arrow_downward\n    </mat-icon>\n    <mat-icon *ngSwitchCase=\"'desc'\">\n      arrow_upward\n    </mat-icon>\n  </div>\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}.wrap .direction{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: FsHeadCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-head-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrap\">\n  <span class=\"title\">\n    <ng-template [ngIf]=\"!column.headerTemplate\">\n      {{ column.title }}\n    </ng-template>\n    <ng-template\n      [ngIf]=\"column.headerTemplate\"\n      [ngTemplateOutlet]=\"column.headerTemplate\"\n      [ngTemplateOutletContext]=\"cellContext\">\n    </ng-template>\n  </span>\n  <div\n      class=\"direction\"\n      *ngIf=\"column.ordered\"\n      [ngSwitch]=\"column.sortingDirection$ | async\">\n    <mat-icon *ngSwitchCase=\"'asc'\">\n      arrow_downward\n    </mat-icon>\n    <mat-icon *ngSwitchCase=\"'desc'\">\n      arrow_upward\n    </mat-icon>\n  </div>\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}.wrap .direction{margin-left:5px}\n"] }]
+            args: [{ selector: '[fs-head-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgTemplateOutlet,
+                        NgSwitch,
+                        NgSwitchCase,
+                        MatIcon,
+                        AsyncPipe,
+                    ], template: "<div class=\"wrap\">\n  <span class=\"title\">\n    <ng-template [ngIf]=\"!column.headerTemplate\">\n      {{ column.title }}\n    </ng-template>\n    <ng-template\n      [ngIf]=\"column.headerTemplate\"\n      [ngTemplateOutlet]=\"column.headerTemplate\"\n      [ngTemplateOutletContext]=\"cellContext\">\n    </ng-template>\n  </span>\n  <div\n      class=\"direction\"\n      *ngIf=\"column.ordered\"\n      [ngSwitch]=\"column.sortingDirection$ | async\">\n    <mat-icon *ngSwitchCase=\"'asc'\">\n      arrow_downward\n    </mat-icon>\n    <mat-icon *ngSwitchCase=\"'desc'\">\n      arrow_upward\n    </mat-icon>\n  </div>\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}.wrap .direction{margin-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }] });
 
 class ColumnAsyncAttribute extends BehaviorSubject {
@@ -3026,11 +3088,18 @@ class FsHeadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th\n    *ngIf=\"leftDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Selection -->\n  <th\n      *ngIf=\"selection && !(selection.disabled$ | async)\"\n      class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox\n      (change)=\"selectAll($event)\"\n      [checked]=\"selectedAll\">\n    </mat-checkbox>\n  </th>\n  <!-- Content -->\n  <th\n    fs-head-cell\n    *ngFor=\"let column of columns; trackBy: trackByFn\"\n    (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n    [column]=\"column\"\n    [class.sorting]=\"column.sortable\"\n    [ngClass]=\"column.headerConfigs.classesArray\"\n    [attr.colspan]=\"column.headerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </th>\n  <!-- Drag -->\n  <th\n    *ngIf=\"rightDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Row Actions -->\n  <th\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\"\n    class=\"fs-list-col actions-col\">\n  </th>\n</tr>", styles: ["th.fs-list-col-selection{width:1%!important;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}th.left{text-align:left}th.center{text-align:center}th.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: FsHeadCellComponent, selector: "[fs-head-cell]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHeadComponent, isStandalone: true, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th\n    *ngIf=\"leftDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Selection -->\n  <th\n      *ngIf=\"selection && !(selection.disabled$ | async)\"\n      class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox\n      (change)=\"selectAll($event)\"\n      [checked]=\"selectedAll\">\n    </mat-checkbox>\n  </th>\n  <!-- Content -->\n  <th\n    fs-head-cell\n    *ngFor=\"let column of columns; trackBy: trackByFn\"\n    (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n    [column]=\"column\"\n    [class.sorting]=\"column.sortable\"\n    [ngClass]=\"column.headerConfigs.classesArray\"\n    [attr.colspan]=\"column.headerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </th>\n  <!-- Drag -->\n  <th\n    *ngIf=\"rightDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Row Actions -->\n  <th\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\"\n    class=\"fs-list-col actions-col\">\n  </th>\n</tr>", styles: ["th.fs-list-col-selection{width:1%!important;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}th.left{text-align:left}th.center{text-align:center}th.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsHeadCellComponent, selector: "[fs-head-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-head]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th\n    *ngIf=\"leftDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Selection -->\n  <th\n      *ngIf=\"selection && !(selection.disabled$ | async)\"\n      class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox\n      (change)=\"selectAll($event)\"\n      [checked]=\"selectedAll\">\n    </mat-checkbox>\n  </th>\n  <!-- Content -->\n  <th\n    fs-head-cell\n    *ngFor=\"let column of columns; trackBy: trackByFn\"\n    (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n    [column]=\"column\"\n    [class.sorting]=\"column.sortable\"\n    [ngClass]=\"column.headerConfigs.classesArray\"\n    [attr.colspan]=\"column.headerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </th>\n  <!-- Drag -->\n  <th\n    *ngIf=\"rightDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Row Actions -->\n  <th\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\"\n    class=\"fs-list-col actions-col\">\n  </th>\n</tr>", styles: ["th.fs-list-col-selection{width:1%!important;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}th.left{text-align:left}th.center{text-align:center}th.right{text-align:right}\n"] }]
+            args: [{ selector: '[fs-list-head]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        MatCheckbox,
+                        NgFor,
+                        FsHeadCellComponent,
+                        NgClass,
+                        AsyncPipe,
+                    ], template: "<tr class=\"fs-list-row\">\n  <!-- Drag -->\n  <th\n    *ngIf=\"leftDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Selection -->\n  <th\n      *ngIf=\"selection && !(selection.disabled$ | async)\"\n      class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox\n      (change)=\"selectAll($event)\"\n      [checked]=\"selectedAll\">\n    </mat-checkbox>\n  </th>\n  <!-- Content -->\n  <th\n    fs-head-cell\n    *ngFor=\"let column of columns; trackBy: trackByFn\"\n    (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n    [column]=\"column\"\n    [class.sorting]=\"column.sortable\"\n    [ngClass]=\"column.headerConfigs.classesArray\"\n    [attr.colspan]=\"column.headerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </th>\n  <!-- Drag -->\n  <th\n    *ngIf=\"rightDragDropEnabled\"\n    class=\"fs-list-col drag-col\">\n  </th>\n  <!-- Row Actions -->\n  <th\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\"\n    class=\"fs-list-col actions-col\">\n  </th>\n</tr>", styles: ["th.fs-list-col-selection{width:1%!important;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}th.left{text-align:left}th.center{text-align:center}th.right{text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { sorting: [{
                 type: Input
             }], columns: [{
@@ -5071,34 +5140,37 @@ class List {
 
 class FsListHeadingDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeadingDirective, selector: "[fs-list-heading],[fsListHeading]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeadingDirective, isStandalone: true, selector: "[fs-list-heading],[fsListHeading]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeadingDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[fs-list-heading],[fsListHeading]'
+                    selector: '[fs-list-heading],[fsListHeading]',
+                    standalone: true
                 }]
         }] });
 
 class FsListSubheadingDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSubheadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListSubheadingDirective, selector: "[fs-list-subheading],[fsListSubheading]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListSubheadingDirective, isStandalone: true, selector: "[fs-list-subheading],[fsListSubheading]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSubheadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fs-list-subheading],[fsListSubheading]',
+                    standalone: true,
                 }]
         }] });
 
 class FsListHeadingContainerDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeadingContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeadingContainerDirective, selector: "[fs-list-heading-container],[fsListHeadingContainer]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeadingContainerDirective, isStandalone: true, selector: "[fs-list-heading-container],[fsListHeadingContainer]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeadingContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fs-list-heading-container],[fsListHeadingContainer]',
+                    standalone: true,
                 }]
         }] });
 
@@ -5110,11 +5182,14 @@ class FsListCellDirective {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListCellDirective, selector: "[fs-list-cell]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListCellDirective, isStandalone: true, selector: "[fs-list-cell]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListCellDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[fs-list-cell]' }]
+            args: [{
+                    selector: '[fs-list-cell]',
+                    standalone: true
+                }]
         }], propDecorators: { colspan: [{
                 type: Input
             }], align: [{
@@ -5129,11 +5204,14 @@ class FsListFooterDirective {
     align;
     className;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListFooterDirective, isStandalone: true, selector: "[fs-list-footer]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListFooterDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[fs-list-footer]' }]
+            args: [{
+                    selector: '[fs-list-footer]',
+                    standalone: true
+                }]
         }], propDecorators: { colspan: [{
                 type: Input
             }], align: [{
@@ -5175,11 +5253,14 @@ class FsListGroupExpandTriggerDirective {
         this._expandNotifier = _expandNotifier;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupExpandTriggerDirective, deps: [{ token: GroupExpandNotifierService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListGroupExpandTriggerDirective, selector: "[fsListGroupExpandTrigger]", inputs: { row: "row" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListGroupExpandTriggerDirective, isStandalone: true, selector: "[fsListGroupExpandTrigger]", inputs: { row: "row" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupExpandTriggerDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[fsListGroupExpandTrigger]' }]
+            args: [{
+                    selector: '[fsListGroupExpandTrigger]',
+                    standalone: true
+                }]
         }], ctorParameters: () => [{ type: GroupExpandNotifierService }], propDecorators: { click: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -5189,23 +5270,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 class FsListGroupFooterDirective extends FsListCellDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupFooterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListGroupFooterDirective, selector: "[fs-list-group-footer]", usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListGroupFooterDirective, isStandalone: true, selector: "[fs-list-group-footer]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupFooterDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[fs-list-group-footer]'
+                    selector: '[fs-list-group-footer]',
+                    standalone: true
                 }]
         }] });
 
 class FsListGroupHeaderDirective extends FsListCellDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupHeaderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]", usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListGroupHeaderDirective, isStandalone: true, selector: "[fs-list-group-cell],[fs-list-group-header]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fs-list-group-cell],[fs-list-group-header]',
+                    standalone: true,
                 }]
         }] });
 
@@ -5214,11 +5297,14 @@ class FsListHeaderDirective {
     align;
     className;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeaderDirective, selector: "[fs-list-header]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeaderDirective, isStandalone: true, selector: "[fs-list-header]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeaderDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[fs-list-header]' }]
+            args: [{
+                    selector: '[fs-list-header]',
+                    standalone: true
+                }]
         }], propDecorators: { colspan: [{
                 type: Input
             }], align: [{
@@ -5289,12 +5375,13 @@ class FsListColumnDirective {
         this._columnAttributes.className = value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListColumnDirective, selector: "fs-list-column", inputs: { visible: ["show", "visible"], title: "title", name: "name", customizable: "customizable", sortable: "sortable", sortableDefault: "sortableDefault", sortableDirection: "sortableDirection", direction: "direction", align: "align", width: "width", className: ["class", "className"] }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsListHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: FsListGroupHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupHeaderConfigs", first: true, predicate: FsListGroupHeaderDirective, descendants: true, static: true }, { propertyName: "groupFooterTemplate", first: true, predicate: FsListGroupFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupFooterConfigs", first: true, predicate: FsListGroupFooterDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListColumnDirective, isStandalone: true, selector: "fs-list-column", inputs: { visible: ["show", "visible"], title: "title", name: "name", customizable: "customizable", sortable: "sortable", sortableDefault: "sortableDefault", sortableDirection: "sortableDirection", direction: "direction", align: "align", width: "width", className: ["class", "className"] }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsListHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: FsListGroupHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupHeaderConfigs", first: true, predicate: FsListGroupHeaderDirective, descendants: true, static: true }, { propertyName: "groupFooterTemplate", first: true, predicate: FsListGroupFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupFooterConfigs", first: true, predicate: FsListGroupFooterDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'fs-list-column',
+                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { headerTemplate: [{
                 type: ContentChild,
@@ -5355,43 +5442,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['class']
             }] } });
 
+class FsListContentInitDirective {
+    contentInitCallback;
+    constructor() { }
+    ngAfterViewInit() {
+        if (this.contentInitCallback) {
+            this.contentInitCallback();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListContentInitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListContentInitDirective, isStandalone: true, selector: "[fsListContentInit]", inputs: { contentInitCallback: ["fsListContentInit", "contentInitCallback"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListContentInitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsListContentInit]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { contentInitCallback: [{
+                type: Input,
+                args: ['fsListContentInit']
+            }] } });
+
 class FsListEmptyStateDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListEmptyStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListEmptyStateDirective, selector: "[fs-list-empty-state]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListEmptyStateDirective, isStandalone: true, selector: "[fs-list-empty-state]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListEmptyStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fs-list-empty-state]',
+                    standalone: true,
                 }]
         }] });
 
 const FS_LIST_CONFIG = new InjectionToken('fs-list.config');
 
-class FsListSavedFiltersComponent {
-    _dialog;
-    _externalParams;
-    _vcRef;
-    constructor(_dialog, _externalParams, _vcRef) {
-        this._dialog = _dialog;
-        this._externalParams = _externalParams;
-        this._vcRef = _vcRef;
+class FsListLoaderComponent {
+    placeholderWidths = [[], [], []];
+    widths = [];
+    columns;
+    loaderLines;
+    cols = [];
+    rows = [];
+    ngOnInit() {
+        this.cols = this.columns > 5 ? this.columns.splice(0, 5) : this.columns;
+        const length = this.cols.length;
+        for (let w = length; w >= 0; w--) {
+            this.widths[w] = w ? random(15, 100 / length, false) : 0;
+        }
+        for (let r = 0; r < 3; r++) {
+            for (let c = 0; c < length; c++) {
+                this.placeholderWidths[r].push(random(50, 90));
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.loaderLines) {
+            this.rows = new Array(this.loaderLines);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListLoaderComponent, isStandalone: true, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor], template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], loaderLines: [{
+                type: Input
+            }] } });
+
+class FsPaginationComponent {
+    pagination;
+    rows;
+    first() {
+        this.pagination.goFirst();
+    }
+    prev() {
+        this.pagination.goPrev();
     }
-    get savedFiltersEnabled$() {
-        return this._externalParams.savedFiltersController.enabled$;
+    next() {
+        this.pagination.goNext();
     }
-    showManageDialog() {
-        // this._dialog.open(FsListManageSavedFiltersComponent, {
-        //   viewContainerRef: this._vcRef,
-        // });
+    last() {
+        this.pagination.goLast();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i3$3.MatDialog }, { token: i2.ExternalParamsController }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters", ngImport: i0, template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\r\n  -->, saved filter\r\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: ["clear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPaginationComponent, isStandalone: true, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<div class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.records > pagination.limit) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                                                                                     {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  @if (!(pagination.pageRecords ===0 && pagination.page === 1)) {\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: true }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "pipe", type: i1$3.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-saved-filters', template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\r\n  -->, saved filter\r\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: () => [{ type: i3$3.MatDialog }, { type: i2.ExternalParamsController }, { type: i0.ViewContainerRef }] });
+            args: [{ selector: 'fs-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        MatButton,
+                        NgIf,
+                        MatRipple,
+                        MatIcon,
+                        FsCommonModule,
+                    ], template: "<div class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.records > pagination.limit) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                                                                                     {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  @if (!(pagination.pageRecords ===0 && pagination.page === 1)) {\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: true }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
+        }], propDecorators: { pagination: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
 
 class FsStatusComponent {
     list;
@@ -5462,11 +5617,19 @@ class FsStatusComponent {
         this.paging.setLimit(limit);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsStatusComponent, selector: "fs-list-status", inputs: { list: "list", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n                (click)=\"manyClick()\"\n                [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of      \n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              r\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n      <ng-template\n          fs-menu-item\n          (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i3$2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i3$2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsStatusComponent, isStandalone: true, selector: "fs-list-status", inputs: { list: "list", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n                (click)=\"manyClick()\"\n                [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of      \n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              r\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n      <ng-template\n          fs-menu-item\n          (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i1$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i1$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-status', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n                (click)=\"manyClick()\"\n                [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of      \n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              r\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n      <ng-template\n          fs-menu-item\n          (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"] }]
+            args: [{ selector: 'fs-list-status', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        MatTooltip,
+                        MatProgressSpinner,
+                        NgIf,
+                        FsMenuModule,
+                        NgFor,
+                        DecimalPipe,
+                    ], template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n                (click)=\"manyClick()\"\n                [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of      \n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              r\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n      <ng-template\n          fs-menu-item\n          (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"] }]
         }], propDecorators: { list: [{
                 type: Input
             }], rows: [{
@@ -5481,90 +5644,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['class.fs-skeleton-placeholder']
             }] } });
 
-class FsListLoaderComponent {
-    placeholderWidths = [[], [], []];
-    widths = [];
-    columns;
-    loaderLines;
-    cols = [];
-    rows = [];
-    ngOnInit() {
-        this.cols = this.columns > 5 ? this.columns.splice(0, 5) : this.columns;
-        const length = this.cols.length;
-        for (let w = length; w >= 0; w--) {
-            this.widths[w] = w ? random(15, 100 / length, false) : 0;
-        }
-        for (let r = 0; r < 3; r++) {
-            for (let c = 0; c < length; c++) {
-                this.placeholderWidths[r].push(random(50, 90));
-            }
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.loaderLines) {
-            this.rows = new Array(this.loaderLines);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
-        }], propDecorators: { columns: [{
-                type: Input
-            }], loaderLines: [{
-                type: Input
-            }] } });
-
-class FsPaginationComponent {
-    pagination;
-    rows;
-    first() {
-        this.pagination.goFirst();
-    }
-    prev() {
-        this.pagination.goPrev();
-    }
-    next() {
-        this.pagination.goNext();
-    }
-    last() {
-        this.pagination.goLast();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<div class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.records > pagination.limit) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                                                                                     {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  @if (!(pagination.pageRecords ===0 && pagination.page === 1)) {\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: true }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i5$2.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.records > pagination.limit) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                                                                                     {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  @if (!(pagination.pageRecords ===0 && pagination.page === 1)) {\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: true }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
-        }], propDecorators: { pagination: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
-
-class FsListContentInitDirective {
-    contentInitCallback;
-    constructor() { }
-    ngAfterViewInit() {
-        if (this.contentInitCallback) {
-            this.contentInitCallback();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListContentInitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: { contentInitCallback: ["fsListContentInit", "contentInitCallback"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListContentInitDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsListContentInit]'
-                }]
-        }], ctorParameters: () => [], propDecorators: { contentInitCallback: [{
-                type: Input,
-                args: ['fsListContentInit']
-            }] } });
-
 class FsListComponent {
     reorderController;
     _config;
@@ -5874,12 +5953,12 @@ class FsListComponent {
     _restorePersistance(persistConfig) {
         this._persistance.init(persistConfig, this.inDialog);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, deps: [{ token: ReorderController }, { token: FS_LIST_CONFIG, optional: true }, { token: i0.ElementRef }, { token: i2$2.SelectionDialog }, { token: i3$3.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i5.ActivatedRoute }, { token: PersistanceController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsListComponent, selector: "fs-list", inputs: { config: "config", loaderLines: "loaderLines" }, outputs: { filtersReady: "filtersReady" }, host: { properties: { "class.fs-list": "this.classFsList", "class.fs-list-row-highlight": "this.rowHoverHighlight" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, deps: [{ token: ReorderController }, { token: FS_LIST_CONFIG, optional: true }, { token: i0.ElementRef }, { token: i2.SelectionDialog }, { token: i3.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i5.ActivatedRoute }, { token: PersistanceController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsListComponent, isStandalone: true, selector: "fs-list", inputs: { config: "config", loaderLines: "loaderLines" }, outputs: { filtersReady: "filtersReady" }, host: { properties: { "class.fs-list": "this.classFsList", "class.fs-list-row-highlight": "this.rowHoverHighlight" } }, providers: [
             GroupExpandNotifierService,
             PersistanceController,
             ReorderController,
-        ], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, 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-heading': list.heading || headingTemplate,\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  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\n              [filter]=\"list.filterConfig\"\n              [showSortBy]=\"!list.status\"\n              (ready)=\"filterReady()\">\n            <ng-template fsFilterStatusBar>\n              <ng-container *ngIf=\"hasStatus\">\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-container>\n            </ng-template>\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      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table\n            class=\"fs-list-table\"\n            role=\"grid\"\n            [fsListContentInit]=\"list.afterContentInit\"\n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n          <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          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>", 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:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { 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: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, 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-heading': list.heading || headingTemplate,\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  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\n              [filter]=\"list.filterConfig\"\n              [showSortBy]=\"!list.status\"\n              (ready)=\"filterReady()\">\n            <ng-template fsFilterStatusBar>\n              <ng-container *ngIf=\"hasStatus\">\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-container>\n            </ng-template>\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      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table\n            class=\"fs-list-table\"\n            role=\"grid\"\n            [fsListContentInit]=\"list.afterContentInit\"\n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n          <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          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>", 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:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { 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,
@@ -5887,13 +5966,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         GroupExpandNotifierService,
                         PersistanceController,
                         ReorderController,
+                    ], standalone: true, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        NgIf,
+                        FilterComponent,
+                        FilterStatusBarDirective,
+                        FsStatusComponent,
+                        FsListContentInitDirective,
+                        FsHeadComponent,
+                        FsBodyComponent,
+                        FsListDraggableListDirective,
+                        FsFooterComponent,
+                        FsListFooterDirective,
+                        FsListLoaderComponent,
+                        FsPaginationComponent,
+                        AsyncPipe,
                     ], template: "<div\n    class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      '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  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\n              [filter]=\"list.filterConfig\"\n              [showSortBy]=\"!list.status\"\n              (ready)=\"filterReady()\">\n            <ng-template fsFilterStatusBar>\n              <ng-container *ngIf=\"hasStatus\">\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-container>\n            </ng-template>\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      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table\n            class=\"fs-list-table\"\n            role=\"grid\"\n            [fsListContentInit]=\"list.afterContentInit\"\n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n          <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          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>", 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:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.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"] }]
         }], ctorParameters: () => [{ type: ReorderController }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [FS_LIST_CONFIG]
-                }] }, { type: i0.ElementRef }, { type: i2$2.SelectionDialog }, { type: i3$3.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i5.ActivatedRoute }, { type: PersistanceController }], propDecorators: { classFsList: [{
+                }] }, { type: i0.ElementRef }, { type: i2.SelectionDialog }, { type: i3.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i5.ActivatedRoute }, { type: PersistanceController }], propDecorators: { classFsList: [{
                 type: HostBinding,
                 args: ['class.fs-list']
             }], rowHoverHighlight: [{
@@ -5929,80 +6024,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: [FsListEmptyStateDirective, { read: TemplateRef }]
             }] } });
 
-class FsListManageSavedFiltersComponent {
-    _externalParams;
-    config;
-    _reorderReady = true;
-    constructor(_externalParams) {
-        this._externalParams = _externalParams;
-        this._initList();
-    }
-    get savedFiltersController() {
-        return this._externalParams.savedFiltersController;
-    }
-    _initList() {
-        this.config = {
-            status: false,
-            queryParam: false,
-            persist: false,
-            paging: false,
-            reorder: {
-                position: ReorderPosition.Left,
-                moveDrop: () => {
-                    return this._reorderReady;
-                },
-                done: (reorderData) => {
-                    this._reorderReady = false;
-                    const filterData = reorderData.map((data) => data.data);
-                    this.savedFiltersController.order(filterData)
-                        .pipe(tap(() => {
-                        this._reorderReady = true;
-                    }))
-                        .subscribe(() => { });
-                },
-            },
-            rowActions: [
-                {
-                    label: 'Apply',
-                    click: (filter) => {
-                        this._externalParams.setActiveSavedFilter(filter);
-                    },
-                },
-                {
-                    label: 'Delete',
-                    remove: {
-                        title: 'Confirm',
-                        template: 'Are you sure you want to delete this filter?',
-                    },
-                    click: (savedFilter) => {
-                        return this.savedFiltersController.delete(savedFilter);
-                    },
-                },
-            ],
-            fetch: (query) => {
-                return this.savedFiltersController.load()
-                    .pipe(map((response) => {
-                    return { data: response };
-                }));
-            },
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListManageSavedFiltersComponent, deps: [{ token: i2.ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListManageSavedFiltersComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\r\n  Manage Saved Filters\r\n</h1>\r\n<div mat-dialog-content>\r\n  <fs-list [config]=\"config\">\r\n    <fs-list-column name=\"name\" title=\"Name\">\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{ row.name }}\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button\r\n          [mat-dialog-close]=\"null\"\r\n          type=\"button\"\r\n          color=\"primary\">\r\n    Done\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListManageSavedFiltersComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>\r\n  Manage Saved Filters\r\n</h1>\r\n<div mat-dialog-content>\r\n  <fs-list [config]=\"config\">\r\n    <fs-list-column name=\"name\" title=\"Name\">\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{ row.name }}\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button\r\n          [mat-dialog-close]=\"null\"\r\n          type=\"button\"\r\n          color=\"primary\">\r\n    Done\r\n  </button>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i2.ExternalParamsController }] });
-
 class FsListContentDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListContentDirective, selector: "[fs-list-content]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListContentDirective, isStandalone: true, selector: "[fs-list-content]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fs-list-content]',
+                    standalone: true,
                 }]
         }] });
 
@@ -6016,7 +6046,7 @@ class FsListModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsListModule, declarations: [FsListComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsListModule, imports: [FsListComponent,
             FsRowComponent,
             FsRowActionsComponent,
             FsRowInlineActionComponent,
@@ -6026,8 +6056,6 @@ class FsListModule {
             FsFooterCellComponent,
             FsStatusComponent,
             FsListLoaderComponent,
-            FsListSavedFiltersComponent,
-            FsListManageSavedFiltersComponent,
             FsHeadComponent,
             FsHeadCellComponent,
             FsBodyComponent,
@@ -6048,24 +6076,8 @@ class FsListModule {
             FsListSubheadingDirective,
             FsListHeadingDirective,
             FsListHeadingContainerDirective,
-            // Dialog
             CustomizeColsDialogComponent,
-            //Pipes
-            ActionLabelPipe], imports: [CommonModule,
-            RouterModule,
-            MatButtonModule,
-            MatIconModule,
-            MatMenuModule,
-            MatProgressSpinnerModule,
-            MatCheckboxModule,
-            MatRippleModule,
-            FsFilterModule,
-            FsMenuModule,
-            FsPromptModule,
-            MatDialogModule,
-            MatTooltipModule,
-            FsFileModule,
-            FsCommonModule], exports: [FsListComponent,
+            ActionLabelPipe], exports: [FsListComponent,
             FsRowComponent,
             FsCellComponent,
             FsListLoaderComponent,
@@ -6081,43 +6093,22 @@ class FsListModule {
             FsListSubheadingDirective,
             FsListHeadingDirective,
             FsListHeadingContainerDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListModule, imports: [CommonModule,
-            RouterModule,
-            MatButtonModule,
-            MatIconModule,
-            MatMenuModule,
-            MatProgressSpinnerModule,
-            MatCheckboxModule,
-            MatRippleModule,
-            FsFilterModule,
-            FsMenuModule,
-            FsPromptModule,
-            MatDialogModule,
-            MatTooltipModule,
-            FsFileModule,
-            FsCommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListModule, imports: [FsListComponent,
+            FsRowComponent,
+            FsRowActionsComponent,
+            FsRowInlineActionComponent,
+            FsRowMenuActionComponent,
+            FsStatusComponent,
+            FsHeadComponent,
+            FsHeadCellComponent,
+            FsBodyComponent,
+            FsPaginationComponent,
+            CustomizeColsDialogComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        RouterModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatMenuModule,
-                        MatProgressSpinnerModule,
-                        MatCheckboxModule,
-                        MatRippleModule,
-                        FsFilterModule,
-                        FsMenuModule,
-                        FsPromptModule,
-                        MatDialogModule,
-                        MatTooltipModule,
-                        FsFileModule,
-                        FsCommonModule,
-                    ],
-                    declarations: [
                         FsListComponent,
                         FsRowComponent,
                         FsRowActionsComponent,
@@ -6128,8 +6119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFooterCellComponent,
                         FsStatusComponent,
                         FsListLoaderComponent,
-                        FsListSavedFiltersComponent,
-                        FsListManageSavedFiltersComponent,
                         FsHeadComponent,
                         FsHeadCellComponent,
                         FsBodyComponent,
@@ -6150,9 +6139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsListSubheadingDirective,
                         FsListHeadingDirective,
                         FsListHeadingContainerDirective,
-                        // Dialog
                         CustomizeColsDialogComponent,
-                        //Pipes
                         ActionLabelPipe,
                     ],
                     exports: [