@firestitch/list 18.0.23 → 18.0.25

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';
 
@@ -1281,6 +1281,9 @@ class RowAction {
     get isGroup() {
         return this._isGroup;
     }
+    getRowIcon(row) {
+        return typeof this.icon === 'function' ? this.icon(row) : this.icon;
+    }
     _init(value) {
         this.icon = value.icon;
         this.menu = value.menu ?? true;
@@ -1358,15 +1361,22 @@ class RowAction {
 
 class FsRowInlineActionComponent {
     actionType;
-    action;
+    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.action.type;
-        if (!this.action.label && this.action.icon) {
+        this.actionType = this.rowAction.type;
+        if (!this.rowAction.label && this.rowAction.icon) {
             this.actionType = ActionType.Icon;
         }
     }
@@ -1374,12 +1384,14 @@ class FsRowInlineActionComponent {
         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: { action: "action" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, ngImport: i0, template: "<ng-container\n    *ngIf=\"action.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"action.routerLink.link\"\n          [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.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]=\"action.routerLink.link\"\n          [queryParams]=\"action.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=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.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]=\"action.routerLink.link\"\n          [queryParams]=\"action.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=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"action.routerLink.link\"\n          [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.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]=\"action.routerLink.link\"\n          [queryParams]=\"action.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=\"!action.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"action.icon\">\n        {{ action.icon }}\n      </mat-icon>\n      {{ action.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"action.fileConfig.accept || '*'\"\n          [multiple]=\"action.fileConfig.multiple\"\n          [minWidth]=\"action.fileConfig.minWidth\"\n          [minHeight]=\"action.fileConfig.minHeight\"\n          [imageWidth]=\"action.fileConfig.maxWidth\"\n          [imageHeight]=\"action.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"action.icon\">\n          {{ action.icon }}\n        </mat-icon>\n        {{ action.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: i6.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.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 });
+    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: i6.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.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=\"action.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"action.routerLink.link\"\n          [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.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]=\"action.routerLink.link\"\n          [queryParams]=\"action.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=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.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]=\"action.routerLink.link\"\n          [queryParams]=\"action.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=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"action.routerLink.link\"\n          [queryParams]=\"action.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!action.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"action.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]=\"action.routerLink.link\"\n          [queryParams]=\"action.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=\"!action.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"action.icon\">\n        {{ action.icon }}\n      </mat-icon>\n      {{ action.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"action.fileConfig.accept || '*'\"\n          [multiple]=\"action.fileConfig.multiple\"\n          [minWidth]=\"action.fileConfig.minWidth\"\n          [minHeight]=\"action.fileConfig.minHeight\"\n          [imageWidth]=\"action.fileConfig.maxWidth\"\n          [imageHeight]=\"action.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"action.icon\">\n          {{ action.icon }}\n        </mat-icon>\n        {{ action.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"] }]
-        }], propDecorators: { action: [{
+            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
@@ -1405,14 +1417,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 class FsRowMenuActionComponent {
     _menu;
     row;
-    icon;
-    label;
+    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();
@@ -1424,17 +1442,18 @@ class FsRowMenuActionComponent {
     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", icon: "icon", label: "label", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, ngImport: i0, template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n  {{label| actionLabel:row}}\n</ng-container>\n\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n    {{label| actionLabel:row}}\n  </fs-file>\n</ng-template>\n", 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.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 });
+    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.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\">{{icon}}</mat-icon>\n  {{label| actionLabel:row}}\n</ng-container>\n\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n    {{label| actionLabel:row}}\n  </fs-file>\n</ng-template>\n" }]
+            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
-            }], icon: [{
-                type: Input
-            }], label: [{
+            }], rowAction: [{
                 type: Input
             }], file: [{
                 type: Input
@@ -1509,11 +1528,11 @@ class FsRowActionsComponent {
         }
     }
     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      [action]=\"action\"\n      [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu\n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template\n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template\n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                [class]=\"subAction.className\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template\n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            [class]=\"action.className\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label | actionLabel:row}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n", styles: [":host{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: ["action"], outputs: ["clicked", "fileSelect"] }, { kind: "component", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "icon", "label", "file"], outputs: ["fileSelect", "fileError"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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      [action]=\"action\"\n      [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n      (clicked)=\"actionClick(action, row, $event)\"\n      (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n    </fs-list-row-inline-action>\n  </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu\n    class=\"row-menu-action\"\n    *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n    #menuRef>\n  <!-- Case when we have usual menu actions -->\n  <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n    <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n      <ng-template\n          class=\"hidden-mobile-menu-action\"\n          fs-menu-item\n          [link]=\"action.routerLink?.link\"\n          [queryParams]=\"action.routerLink?.queryParams\"\n          [target]=\"action.routerLink?.target\"\n          [hidden]=\"action.menu !== undefined && !action.isShown\">\n        <fs-list-row-menu-action\n          [icon]=\"action.icon\"\n          [label]=\"action.label\"\n          [row]=\"row\"\n          [file]=\"action.fileConfig\"\n          (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n          (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n        </fs-list-row-menu-action>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n      <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n        <fs-menu-group [label]=\"action.label | actionLabel:row\">\n          <ng-container *ngFor=\"let subAction of action.rowActions\">\n            <ng-template\n                fs-menu-item\n                [link]=\"subAction.routerLink?.link\"\n                [queryParams]=\"subAction.routerLink?.queryParams\"\n                [target]=\"subAction.routerLink?.target\"\n                [hidden]=\"!subAction.isShown\"\n                [class]=\"subAction.className\"\n                (click)=\"actionClick(subAction, row, $event, menuRef);\">\n              <fs-list-row-menu-action\n                [icon]=\"subAction.icon\"\n                [label]=\"subAction.label\"\n                [row]=\"row\"\n                [file]=\"subAction.fileConfig\"\n                (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n                (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n              </fs-list-row-menu-action>\n            </ng-template>\n          </ng-container>\n        </fs-menu-group>\n      </ng-container>\n      <ng-template #simpleMenuItem>\n        <ng-template\n            fs-menu-item\n            [link]=\"action.routerLink?.link\"\n            [queryParams]=\"action.routerLink?.queryParams\"\n            [target]=\"action.routerLink?.target\"\n            [hidden]=\"!action.isShown\"\n            [class]=\"action.className\"\n            (click)=\"actionClick(action, row, $event, menuRef);\">\n          <fs-list-row-menu-action\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [row]=\"row\"\n            [file]=\"action.fileConfig\"\n            (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n            (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n          </fs-list-row-menu-action>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Case when we have restore mode enabled and must hide menu actions -->\n  <ng-container *ngIf=\"restoreMode && restoreAction\">\n    <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n      <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n      {{restoreAction.label | actionLabel:row}}\n    </ng-template>\n  </ng-container>\n</fs-menu>\n", styles: [":host{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"] }]
+            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: [{
@@ -1658,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;
@@ -1722,7 +1741,7 @@ class Column {
                 case 'sortable':
                     {
                         if (isBoolean(defaults.sortable)) {
-                            if (this.sortable === void 0) {
+                            if (this.sortable === undefined) {
                                 this.sortable = defaults.sortable;
                             }
                         }
@@ -1763,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;
@@ -2376,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$))
@@ -2397,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>\r\n  Customize columns\r\n</h1>\r\n<mat-dialog-content>\r\n  <div *ngFor=\"let column of columns\">\r\n    <mat-checkbox\r\n        [checked]=\"column.show\"\r\n        (change)=\"visibilityChange($event, column)\"\r\n        [disabled]=\"column.disabled\">\r\n      @if (column.title) {\r\n        {{ column.title }}\r\n      } @else {\r\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\r\n      }\r\n    </mat-checkbox>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n      type=\"button\"\r\n      mat-button\r\n      color=\"primary\"\r\n      (click)=\"save()\"\r\n      [disabled]=\"saveDisabled\">\r\n    Save\r\n  </button>\r\n  <button\r\n      type=\"button\"\r\n      mat-button\r\n      (click)=\"cancel()\">\r\n    Cancel\r\n  </button>\r\n</mat-dialog-actions>", 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.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>\r\n  Customize columns\r\n</h1>\r\n<mat-dialog-content>\r\n  <div *ngFor=\"let column of columns\">\r\n    <mat-checkbox\r\n        [checked]=\"column.show\"\r\n        (change)=\"visibilityChange($event, column)\"\r\n        [disabled]=\"column.disabled\">\r\n      @if (column.title) {\r\n        {{ column.title }}\r\n      } @else {\r\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\r\n      }\r\n    </mat-checkbox>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n      type=\"button\"\r\n      mat-button\r\n      color=\"primary\"\r\n      (click)=\"save()\"\r\n      [disabled]=\"saveDisabled\">\r\n    Save\r\n  </button>\r\n  <button\r\n      type=\"button\"\r\n      mat-button\r\n      (click)=\"cancel()\">\r\n    Cancel\r\n  </button>\r\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2504,7 +2526,7 @@ class ColumnAsyncAttribute extends BehaviorSubject {
 class ColumnAttributes {
     _title;
     _name;
-    _customize = true;
+    _customizable = true;
     _sortable;
     _sortableDefault;
     _direction$ = new ColumnAsyncAttribute(null);
@@ -2530,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) {
@@ -2968,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;
@@ -2992,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,
             };
         });
     }
@@ -3063,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;
         }
     }
@@ -3108,6 +3107,7 @@ class ColumnsController {
             .pipe(tap((columnConfigs) => {
             this._columnsFetched = true;
             this.updateVisibilityForCols(columnConfigs);
+            this.updateCustomizableForCols(columnConfigs);
         }), takeUntil(this._destroy$));
     }
     /**
@@ -3125,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();
@@ -5053,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();
@@ -5138,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;
@@ -5170,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;
@@ -5199,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,
@@ -5246,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
@@ -5372,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,
@@ -5443,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,
@@ -5792,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,
@@ -5815,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: [{
@@ -5911,7 +5920,7 @@ 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>\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", "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,