@firestitch/list 18.0.24 → 18.0.26

package/fesm2022/firestitch-list.mjs

@@ -8,7 +8,7 @@ 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$1 from '@angular/material/core';
+import * as i4$2 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -17,7 +17,7 @@ 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 i6$1 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$1 from '@firestitch/common';
 import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
@@ -34,7 +34,7 @@ import { BehaviorSubject, Subject, Observable, merge, from, of, combineLatest, E
 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 * as i3$3 from '@firestitch/drawer';
-import * as i4$2 from '@firestitch/selection';
+import * as i4$3 from '@firestitch/selection';
 import * as i1$3 from '@firestitch/store';
 import { FsPersistanceStore } from '@firestitch/store';
 
@@ -1677,8 +1677,8 @@ class Column {
     get name() {
         return this._attributes.name;
     }
-    get customize() {
-        return this._attributes.customize;
+    get customizable() {
+        return this._attributes.customizable;
     }
     get width() {
         return this._attributes.width;
@@ -1741,7 +1741,7 @@ class Column {
                 case 'sortable':
                     {
                         if (isBoolean(defaults.sortable)) {
-                            if (this.sortable === void 0) {
+                            if (this.sortable === undefined) {
                                 this.sortable = defaults.sortable;
                             }
                         }
@@ -1782,6 +1782,9 @@ class Column {
     updateVisibility(value) {
         this._attributes.visible = value;
     }
+    updateCustomizable(value) {
+        this._attributes.customizable = value;
+    }
     _parseConfig(config) {
         this._attributes = config.attributes;
         this.headerTemplate = config.headerTemplate;
@@ -1883,11 +1886,11 @@ class FsCellComponent {
         }
     }
     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 ɵ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>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.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, 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" }]
+            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n" }]
         }], propDecorators: { isColl: [{
                 type: HostBinding,
                 args: ['class.fs-list-col']
@@ -2395,7 +2398,7 @@ class CustomizeColsDialogComponent {
             };
         });
         this.saveDisabled = true;
-        const changed = this._changeFn(data);
+        const changed = this._changeFn ? this._changeFn(data) : null;
         if (changed instanceof Observable) {
             changed
                 .pipe(takeUntil(this._destroy$))
@@ -2416,11 +2419,11 @@ class CustomizeColsDialogComponent {
         this._dialog.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CustomizeColsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CustomizeColsDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>Customize Columns</h1>\r\n<mat-dialog-content>\r\n  <div *ngFor=\"let column of columns\">\r\n    <mat-checkbox [checked]=\"column.show\" (change)=\"visibilityChange($event, column)\" [disabled]=\"column.disabled\">\r\n      <ng-container *ngIf=\"!column.title; else titleLable\">\r\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\r\n      </ng-container>\r\n      <ng-template #titleLable>\r\n        {{ column.title }}\r\n      </ng-template>\r\n\r\n      <ng-container *ngIf=\"column.tooltip\">\r\n        <mat-icon [matTooltip]=\"column.tooltip\">\r\n          help\r\n        </mat-icon>\r\n      </ng-container>\r\n    </mat-checkbox>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button type=\"button\" mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"saveDisabled\">Save</button>\r\n  <button type=\"button\" mat-button (click)=\"cancel()\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;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: 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: "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: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n    Save\n  </button>\n  <button\n      type=\"button\"\n      mat-button\n      (click)=\"cancel()\">\n    Cancel\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}\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: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], 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>Customize Columns</h1>\r\n<mat-dialog-content>\r\n  <div *ngFor=\"let column of columns\">\r\n    <mat-checkbox [checked]=\"column.show\" (change)=\"visibilityChange($event, column)\" [disabled]=\"column.disabled\">\r\n      <ng-container *ngIf=\"!column.title; else titleLable\">\r\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\r\n      </ng-container>\r\n      <ng-template #titleLable>\r\n        {{ column.title }}\r\n      </ng-template>\r\n\r\n      <ng-container *ngIf=\"column.tooltip\">\r\n        <mat-icon [matTooltip]=\"column.tooltip\">\r\n          help\r\n        </mat-icon>\r\n      </ng-container>\r\n    </mat-checkbox>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button type=\"button\" mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"saveDisabled\">Save</button>\r\n  <button type=\"button\" mat-button (click)=\"cancel()\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}\n"] }]
+            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  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n    Save\n  </button>\n  <button\n      type=\"button\"\n      mat-button\n      (click)=\"cancel()\">\n    Cancel\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}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2431,11 +2434,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, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.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, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class FsFooterRowComponent extends FsRowComponent {
@@ -2523,7 +2526,7 @@ class ColumnAsyncAttribute extends BehaviorSubject {
 class ColumnAttributes {
     _title;
     _name;
-    _customize = true;
+    _customizable = true;
     _sortable;
     _sortableDefault;
     _direction$ = new ColumnAsyncAttribute(null);
@@ -2549,11 +2552,11 @@ class ColumnAttributes {
         return this._name;
     }
     // customize
-    set customize(value) {
-        this._customize = value;
+    set customizable(value) {
+        this._customizable = value;
     }
-    get customize() {
-        return this._customize;
+    get customizable() {
+        return this._customizable;
     }
     // sortable
     set sortable(value) {
@@ -2987,9 +2990,9 @@ class ColumnsController {
     _theadClass = '';
     _loadFn;
     _changeFn;
-    _customizeFieldTitleFn;
-    _customizeFieldDisabledFn;
-    _columnTooltipFn;
+    // private _customizeFieldTitleFn: FsListColumnTitleFn;
+    // private _customizeFieldDisabledFn: FsListColumnDisabledFn;
+    //private _columnTooltipFn: FsListColumnTooltipFn;
     _isConfigured = false;
     _loadFnConfigured = false;
     _changeFnConfigured = false;
@@ -3011,28 +3014,14 @@ class ColumnsController {
         return this._visibleColumnsShared$;
     }
     get columnsForDialog() {
-        const hasCustomTitle = !!this._customizeFieldTitleFn;
-        const hasCustomDisabledStatus = !!this._customizeFieldDisabledFn;
-        const hasCustomTooltip = !!this._columnTooltipFn;
         return this._columns
-            .filter((column) => column.customize && !!column.name)
+            .filter((column) => column.customizable && !!column.name)
             .map((column) => {
-            const title = hasCustomTitle
-                ? this._customizeFieldTitleFn(column.name, column.title)
-                : column.name;
-            const disabled = hasCustomDisabledStatus
-                ? this._customizeFieldDisabledFn(column.name)
-                : false;
-            const tooltip = hasCustomTooltip
-                ? this._columnTooltipFn(column.name, column.visible, disabled)
-                : undefined;
             return {
                 template: column.headerTemplate,
                 name: column.name,
                 show: column.visible,
-                title: title,
-                disabled: disabled,
-                tooltip: tooltip,
+                title: column.title,
             };
         });
     }
@@ -3082,15 +3071,6 @@ class ColumnsController {
                 this._changeFn = config.change;
                 this._changeFnConfigured = true;
             }
-            if (config.title) {
-                this._customizeFieldTitleFn = config.title;
-            }
-            if (config.disabled) {
-                this._customizeFieldDisabledFn = config.disabled;
-            }
-            if (config.tooltip) {
-                this._columnTooltipFn = config.tooltip;
-            }
             this._isConfigured = true;
         }
     }
@@ -3127,6 +3107,7 @@ class ColumnsController {
             .pipe(tap((columnConfigs) => {
             this._columnsFetched = true;
             this.updateVisibilityForCols(columnConfigs);
+            this.updateCustomizableForCols(columnConfigs);
         }), takeUntil(this._destroy$));
     }
     /**
@@ -3144,11 +3125,20 @@ class ColumnsController {
             const col = this._columns
                 .find((column) => column.name === columnConfig.name);
             if (col) {
-                col.updateVisibility(columnConfig.show);
+                col.updateVisibility(columnConfig.show ?? true);
             }
         });
         this.updateVisibleColumns();
     }
+    updateCustomizableForCols(columnsConfig) {
+        columnsConfig.forEach((columnConfig) => {
+            const col = this._columns
+                .find((column) => column.name === columnConfig.name);
+            if (col) {
+                col.updateCustomizable(columnConfig.customizable ?? true);
+            }
+        });
+    }
     destroy() {
         this._destroy$.next(null);
         this._destroy$.complete();
@@ -5072,25 +5062,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['class']
             }] } });
 
-class FsListHeaderDirective {
-    colspan;
-    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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[fs-list-header]' }]
-        }], propDecorators: { colspan: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], className: [{
-                type: Input,
-                args: ['class']
-            }] } });
-
 class GroupExpandNotifierService {
     _expandStatusChanged$ = new Subject();
     _destroy$ = new Subject();
@@ -5157,6 +5128,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }]
         }] });
 
+class FsListHeaderDirective {
+    colspan;
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[fs-list-header]' }]
+        }], propDecorators: { colspan: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], className: [{
+                type: Input,
+                args: ['class']
+            }] } });
+
 class FsListColumnDirective {
     // Header
     headerTemplate;
@@ -5189,8 +5179,8 @@ class FsListColumnDirective {
     set name(value) {
         this._columnAttributes.name = value;
     }
-    set customize(value) {
-        this._columnAttributes.customize = value;
+    set customizable(value) {
+        this._columnAttributes.customizable = value;
     }
     set sortable(value) {
         this._columnAttributes.sortable = value;
@@ -5218,12 +5208,12 @@ 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", customize: "customize", 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, 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'
+                    selector: 'fs-list-column',
                 }]
         }], ctorParameters: () => [], propDecorators: { headerTemplate: [{
                 type: ContentChild,
@@ -5265,7 +5255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], name: [{
                 type: Input
-            }], customize: [{
+            }], customizable: [{
                 type: Input
             }], sortable: [{
                 type: Input
@@ -5315,11 +5305,11 @@ class FsListSavedFiltersComponent {
         // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i1$2.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 ɵ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\"><!--\n  -->, saved filter\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\n</ng-container>\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, 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" }]
+            args: [{ selector: 'fs-list-saved-filters', template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\n  -->, saved filter\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: i2.ExternalParamsController }, { type: i0.ViewContainerRef }] });
 
 class FsStatusComponent {
@@ -5391,7 +5381,7 @@ 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 ecords'\">\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            {{ many.count | number:'1.0':'en-US' }}\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: i6$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, 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 ecords'\">\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            {{ many.count | number:'1.0':'en-US' }}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, decorators: [{
             type: Component,
@@ -5435,11 +5425,11 @@ class FsListLoaderComponent {
         }
     }
     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 });
+    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>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], 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"] }]
+            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], loaderLines: [{
@@ -5462,7 +5452,7 @@ class FsPaginationComponent {
         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$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i5$1.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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$1.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
@@ -5811,7 +5801,7 @@ class FsListComponent {
         const namespace = getNormalizedPath(this._location);
         this._persistance.setConfig(persistConfig, namespace, 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: i1$2.MatDialogRef, optional: true }, { token: i3$3.DrawerRef, optional: true }, { token: i0.ElementRef }, { token: i4$2.SelectionDialog }, { token: i1$2.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i6.Router }, { token: i6.ActivatedRoute }, { token: PersistanceController }, { token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
+    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: i1$2.MatDialogRef, optional: true }, { token: i3$3.DrawerRef, optional: true }, { token: i0.ElementRef }, { token: i4$3.SelectionDialog }, { token: i1$2.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i6.Router }, { token: i6.ActivatedRoute }, { token: PersistanceController }, { token: i1.Location }], 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: [
             GroupExpandNotifierService,
             PersistanceController,
@@ -5834,7 +5824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     type: Optional
                 }] }, { type: i3$3.DrawerRef, decorators: [{
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i4$2.SelectionDialog }, { type: i1$2.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i6.Router }, { type: i6.ActivatedRoute }, { type: PersistanceController }, { type: i1.Location }], propDecorators: { classFsList: [{
+                }] }, { type: i0.ElementRef }, { type: i4$3.SelectionDialog }, { type: i1$2.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i6.Router }, { type: i6.ActivatedRoute }, { type: PersistanceController }, { type: i1.Location }], propDecorators: { classFsList: [{
                 type: HostBinding,
                 args: ['class.fs-list']
             }], rowHoverHighlight: [{
@@ -5930,11 +5920,11 @@ class FsListManageSavedFiltersComponent {
         };
     }
     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: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.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", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListManageSavedFiltersComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage Saved Filters\n</h1>\n<div mat-dialog-content>\n  <fs-list [config]=\"config\">\n    <fs-list-column name=\"name\" title=\"Name\">\n      <ng-template fs-list-cell let-row=\"row\">\n        {{ row.name }}\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n</div>\n<div mat-dialog-actions>\n  <button mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\"\n          color=\"primary\">\n    Done\n  </button>\n</div>\n", 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: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>\n  Manage Saved Filters\n</h1>\n<div mat-dialog-content>\n  <fs-list [config]=\"config\">\n    <fs-list-column name=\"name\" title=\"Name\">\n      <ng-template fs-list-cell let-row=\"row\">\n        {{ row.name }}\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n</div>\n<div mat-dialog-actions>\n  <button mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\"\n          color=\"primary\">\n    Done\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2.ExternalParamsController }] });
 
 class FsListContentDirective {