@firestitch/list 18.0.26 → 18.0.28

package/fesm2022/firestitch-list.mjs

@@ -1,8 +1,8 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { Location, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, EventEmitter, Component, ChangeDetectionStrategy, Output, Pipe, HostBinding, ViewChildren, TemplateRef, ViewContainerRef, ViewChild, ContentChild, Inject, HostListener, ContentChildren, InjectionToken, inject, ChangeDetectorRef, Optional, NgModule } from '@angular/core';
-import * as i6 from '@angular/router';
+import { Injectable, Directive, Input, EventEmitter, Component, ChangeDetectionStrategy, Output, Pipe, HostBinding, ViewChildren, TemplateRef, ViewContainerRef, ViewChild, ContentChild, inject, HostListener, ContentChildren, InjectionToken, ChangeDetectorRef, Injector, Optional, Inject, NgModule } from '@angular/core';
+import * as i5 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,8 +10,8 @@ import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4$2 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
-import * as i1$2 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3$3 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -19,9 +19,9 @@ import * as i2$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5$1 from '@firestitch/common';
+import * as i5$2 from '@firestitch/common';
 import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
-import * as i5 from '@firestitch/file';
+import * as i5$1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import * as i2 from '@firestitch/filter';
 import { ItemType, FilterComponent, FsFilterModule } from '@firestitch/filter';
@@ -30,13 +30,12 @@ import { FsMenuModule } from '@firestitch/menu';
 import * as i1$1 from '@firestitch/prompt';
 import { FsPromptModule } from '@firestitch/prompt';
 import { FsScrollModule } from '@firestitch/scroll';
-import { BehaviorSubject, Subject, Observable, merge, from, of, combineLatest, EMPTY } from 'rxjs';
+import { BehaviorSubject, Subject, Observable, of, merge, from, combineLatest, EMPTY } from 'rxjs';
 import { takeUntil, take, filter, tap, skip, distinctUntilChanged, map, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
 import { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith } from 'lodash-es';
-import * as i3$3 from '@firestitch/drawer';
-import * as i4$3 from '@firestitch/selection';
-import * as i1$3 from '@firestitch/store';
-import { FsPersistanceStore } from '@firestitch/store';
+import { FsStore } from '@firestitch/store';
+import { DrawerRef } from '@firestitch/drawer';
+import * as i2$2 from '@firestitch/selection';
 
 var ReorderPosition;
 (function (ReorderPosition) {
@@ -1384,7 +1383,7 @@ 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: { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"rowAction.isShown\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatMiniFabAnchor, selector: "a[mat-mini-fab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFabAnchor, selector: "a[mat-fab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
             type: Component,
@@ -1446,7 +1445,7 @@ class FsRowMenuActionComponent {
         this.label = this.rowAction.label;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, deps: [{ token: i3$2.FsMenuComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: { row: "row", rowAction: "rowAction", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!file else withFile\">\n  <mat-icon *ngIf=\"icon\">\n    {{ icon }}\n  </mat-icon>\n  {{ label| actionLabel:row }}\n</ng-container>\n<ng-template #withFile>\n  <fs-file\n      class=\"action-button\"\n      [accept]=\"file.accept || '*'\"\n      [multiple]=\"file.multiple\"\n      [minWidth]=\"file.minWidth\"\n      [minHeight]=\"file.minHeight\"\n      [imageWidth]=\"file.maxWidth\"\n      [imageHeight]=\"file.maxHeight\"\n      (click)=\"$event.stopPropagation();\"\n      (select)=\"selectFile($event)\"\n      (error)=\"errorFile($event)\"\n      (cancel)=\"closeMenu()\">\n    <mat-icon *ngIf=\"icon\">\n      {{ icon }}\n    </mat-icon>\n    {{ label| actionLabel:row }}\n  </fs-file>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, decorators: [{
             type: Component,
@@ -1886,11 +1885,11 @@ class FsCellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsCellComponent, selector: "[fs-cell]", inputs: { column: "column", row: "row", rowIndex: "rowIndex" }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsCellComponent, selector: "[fs-cell]", inputs: { column: "column", row: "row", rowIndex: "rowIndex" }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n" }]
+            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
         }], propDecorators: { isColl: [{
                 type: HostBinding,
                 args: ['class.fs-list-col']
@@ -2370,16 +2369,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: [FsRowComponent, { read: TemplateRef, static: true }]
             }] } });
 
+class PersistanceController {
+    filtersEnabled = false;
+    columnsEnabled = false;
+    pagingEnabled = false;
+    sortingEnabled = false;
+    queryEnabled = false;
+    name;
+    _store = inject(FsStore);
+    _data = {};
+    _storeKey = 'fs-list-persist';
+    _location = inject(Location);
+    init(listConfig, inDialog) {
+        const config = this._initConfig(listConfig, inDialog);
+        if (config) {
+            this.filtersEnabled = config.persistFilter;
+            this.columnsEnabled = config.persistColumn;
+            this.pagingEnabled = config.persistPaging;
+            this.sortingEnabled = config.persistSorting;
+            this.queryEnabled = config.persistQuery;
+            this.name = config.name;
+            this._data = this._get() || {};
+        }
+    }
+    setSorting(value) {
+        this._set('sorting', value);
+    }
+    setPaging(value) {
+        this._set('paging', value);
+    }
+    setColumns(value) {
+        this._set('columns', value);
+    }
+    getColumns() {
+        return this._data.columns || [];
+    }
+    getSorting() {
+        return this._data.sorting || {};
+    }
+    getPaging() {
+        return this._data.paging || {};
+    }
+    _set(key, value) {
+        this._data[key] = value;
+        const storeData = this._store.get(this._storeKey) || {};
+        storeData[this.name] = this._data;
+        this._store.set(this._storeKey, storeData);
+    }
+    _get() {
+        const storeData = this._store.get(this._storeKey);
+        if (storeData) {
+            return storeData[this.name];
+        }
+        return {};
+    }
+    _initConfig(config, inDialog) {
+        let persistanceConfig = this._getConfig(config);
+        if (persistanceConfig) {
+            const persist = !inDialog || !!persistanceConfig.name;
+            persistanceConfig = {
+                name: persistanceConfig.name || getNormalizedPath(this._location),
+                persistFilter: persist,
+                persistPaging: persist,
+                persistSorting: persist,
+                persistColumn: persist,
+                persistQuery: persist,
+                ...persistanceConfig,
+            };
+        }
+        return persistanceConfig;
+    }
+    _getConfig(config) {
+        if (config) {
+            return {
+                ...(config === true ? {} : config),
+            };
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PersistanceController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PersistanceController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PersistanceController, decorators: [{
+            type: Injectable
+        }] });
+
 class CustomizeColsDialogComponent {
-    _dialog;
     columns = [];
     saveDisabled = false;
+    columnsEnabled = false;
     _changeFn;
     _destroy$ = new Subject();
-    constructor(data, _dialog) {
-        this._dialog = _dialog;
-        this.columns = data.columns;
-        this._changeFn = data.changeFn;
+    _persistance = inject(PersistanceController);
+    _dialog = inject(MatDialogRef);
+    _data = inject(MAT_DIALOG_DATA);
+    constructor() {
+        this.columns = this._data.columns;
+        this._changeFn = this._data.changeFn;
     }
     ngOnDestroy() {
         this._destroy$.next(null);
@@ -2397,6 +2483,9 @@ class CustomizeColsDialogComponent {
                 show: column.show,
             };
         });
+        if (this._persistance.columnsEnabled) {
+            this._persistance.setColumns(data);
+        }
         this.saveDisabled = true;
         const changed = this._changeFn ? this._changeFn(data) : null;
         if (changed instanceof Observable) {
@@ -2418,27 +2507,24 @@ class CustomizeColsDialogComponent {
     cancel() {
         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: "17.0.0", version: "18.2.7", type: CustomizeColsDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    <div *ngFor=\"let column of columns\">\n      <mat-checkbox\n          [checked]=\"column.show\"\n          (change)=\"visibilityChange($event, column)\"\n          [disabled]=\"column.disabled\">\n        @if (column.title) {\n          {{ column.title }}\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n        }\n      </mat-checkbox>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n    Save\n  </button>\n  <button\n      type=\"button\"\n      mat-button\n      (click)=\"cancel()\">\n    Cancel\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CustomizeColsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CustomizeColsDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    <div *ngFor=\"let column of columns\">\n      <mat-checkbox\n          [checked]=\"column.show\"\n          (change)=\"visibilityChange($event, column)\"\n          [disabled]=\"column.disabled\">\n        @if (column.title) {\n          {{ column.title }}\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n        }\n      </mat-checkbox>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n    Save\n  </button>\n  <button\n      type=\"button\"\n      mat-button\n      (click)=\"cancel()\">\n    Cancel\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CustomizeColsDialogComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 matDialogTitle>\n  Customize columns\n</h1>\n<mat-dialog-content>\n  <div class=\"columns\">\n    <div *ngFor=\"let column of columns\">\n      <mat-checkbox\n          [checked]=\"column.show\"\n          (change)=\"visibilityChange($event, column)\"\n          [disabled]=\"column.disabled\">\n        @if (column.title) {\n          {{ column.title }}\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n        }\n      </mat-checkbox>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button\n      type=\"button\"\n      mat-button\n      color=\"primary\"\n      (click)=\"save()\"\n      [disabled]=\"saveDisabled\">\n    Save\n  </button>\n  <button\n      type=\"button\"\n      mat-button\n      (click)=\"cancel()\">\n    Cancel\n  </button>\n</mat-dialog-actions>", styles: [".mat-checkbox{min-height:32px;display:block}.mat-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.columns{margin-bottom:1.25em}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$2.MatDialogRef }] });
+        }], ctorParameters: () => [] });
 
 class FsFooterCellComponent extends FsCellComponent {
     constructor() {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-footer-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n" }]
+            args: [{ selector: '[fs-list-footer-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [] });
 
 class FsFooterRowComponent extends FsRowComponent {
@@ -2985,16 +3071,13 @@ var FsListState;
 })(FsListState || (FsListState = {}));
 
 class ColumnsController {
+    _persistance;
     _visibleColumns$ = new BehaviorSubject([]);
     _visibleColumnsShared$ = this._visibleColumns$.pipe();
     _theadClass = '';
     _loadFn;
     _changeFn;
-    // private _customizeFieldTitleFn: FsListColumnTitleFn;
-    // private _customizeFieldDisabledFn: FsListColumnDisabledFn;
-    //private _columnTooltipFn: FsListColumnTooltipFn;
     _isConfigured = false;
-    _loadFnConfigured = false;
     _changeFnConfigured = false;
     _columnsFetched = false;
     _hasHeader = false;
@@ -3003,7 +3086,10 @@ class ColumnsController {
     _defaultConfigs;
     _columnsUpdated$ = new Subject();
     _destroy$ = new Subject();
-    constructor() { }
+    constructor(_persistance) {
+        this._persistance = _persistance;
+        this._loadFn = () => of([]);
+    }
     get columns() {
         return this._columns.slice();
     }
@@ -3040,9 +3126,6 @@ class ColumnsController {
     get configured() {
         return this._isConfigured;
     }
-    get loadFnConfigured() {
-        return this._loadFnConfigured;
-    }
     get changeFnConfigured() {
         return this._changeFnConfigured;
     }
@@ -3065,7 +3148,6 @@ class ColumnsController {
         if (config) {
             if (config.load) {
                 this._loadFn = config.load;
-                this._loadFnConfigured = true;
             }
             if (config.change) {
                 this._changeFn = config.change;
@@ -3104,10 +3186,14 @@ class ColumnsController {
      */
     loadRemoteColumnConfigs() {
         return this._loadFn()
-            .pipe(tap((columnConfigs) => {
+            .pipe(tap((column) => {
             this._columnsFetched = true;
-            this.updateVisibilityForCols(columnConfigs);
-            this.updateCustomizableForCols(columnConfigs);
+            this.updateVisibilityForCols(column);
+            this.updateCustomizableForCols(column);
+        }), tap(() => {
+            if (this._persistance.columnsEnabled) {
+                this.updateVisibilityForCols(this._persistance.getColumns());
+            }
         }), takeUntil(this._destroy$));
     }
     /**
@@ -3516,7 +3602,6 @@ class DataController {
 }
 
 class ExternalParamsController {
-    _router;
     _route;
     _persistance;
     _paginator;
@@ -3529,8 +3614,7 @@ class ExternalParamsController {
         sortDirection: null,
     };
     _destroy$ = new Subject();
-    constructor(_router, _route, _persistance, _paginator, _sorting, _queryParamsEnabled) {
-        this._router = _router;
+    constructor(_route, _persistance, _paginator, _sorting, _queryParamsEnabled) {
         this._route = _route;
         this._persistance = _persistance;
         this._paginator = _paginator;
@@ -3548,7 +3632,7 @@ class ExternalParamsController {
         };
     }
     get _enabled() {
-        return this._queryParamsEnabled || this._persistance.enabled;
+        return this._queryParamsEnabled || this._persistance.filtersEnabled;
     }
     get _page() {
         return this._externalParams.page;
@@ -3564,9 +3648,11 @@ class ExternalParamsController {
     }
     initialize() {
         // Restore from localStorage parameters if persistance enabled
-        if (this._persistance.enabled) {
-            this._restorePaginationParams(this._persistance.getDataFromScope('paging'));
-            this._restoreSortingParams(this._persistance.getDataFromScope('sorting'));
+        if (this._persistance.pagingEnabled) {
+            this._restorePaginationParams(this._persistance.getPaging());
+        }
+        if (this._persistance.sortingEnabled) {
+            this._restoreSortingParams(this._persistance.getSorting());
         }
         // Restore from queryParams and override if persistance already had values for those params
         if (this._queryParamsEnabled) {
@@ -3638,12 +3724,12 @@ class ExternalParamsController {
                 sortDirection: direction,
             });
         }
-        if (this._persistance.enabled) {
+        if (this._persistance.filtersEnabled) {
             if (name && direction) {
-                this._persistance.saveDataToScope('sorting', { sortName: name, sortDirection: direction });
+                this._persistance.setSorting({ sortName: name, sortDirection: direction });
             }
             else {
-                this._persistance.saveDataToScope('sorting', null);
+                this._persistance.setSorting(null);
             }
         }
     }
@@ -3651,8 +3737,8 @@ class ExternalParamsController {
         if (this._queryParamsEnabled) {
             this._replaceState(params);
         }
-        if (this._persistance.enabled) {
-            this._persistance.saveDataToScope('paging', params);
+        if (this._persistance.filtersEnabled) {
+            this._persistance.setPaging(params);
         }
     }
     _replaceState(data) {
@@ -4263,7 +4349,6 @@ class List {
     _el;
     _config;
     _selectionDialog;
-    _router;
     _route;
     _persistance;
     _inDialog;
@@ -4292,11 +4377,11 @@ class List {
     style;
     hasRowActions;
     rowActionsHover = false;
-    paging = new PaginationController();
-    columns = new ColumnsController();
-    actions = new ActionsController();
-    dataController = new DataController();
-    sorting = new SortingController();
+    paging;
+    columns;
+    actions;
+    dataController;
+    sorting;
     externalParams;
     selection;
     filterConfig = null;
@@ -4322,14 +4407,18 @@ class List {
     _groupCellConfig;
     _cellConfig;
     _footerConfig;
-    constructor(_el, _config = {}, _selectionDialog, _router, _route, _persistance, _inDialog) {
+    constructor(_el, _config = {}, _selectionDialog, _route, _persistance, _inDialog) {
         this._el = _el;
         this._config = _config;
         this._selectionDialog = _selectionDialog;
-        this._router = _router;
         this._route = _route;
         this._persistance = _persistance;
         this._inDialog = _inDialog;
+        this.columns = new ColumnsController(this._persistance);
+        this.actions = new ActionsController();
+        this.paging = new PaginationController();
+        this.dataController = new DataController();
+        this.sorting = new SortingController();
         this._initialize(_config);
         this._headerConfig = new StyleConfig(_config.header);
         this._groupCellConfig = new StyleConfig(_config.cell);
@@ -4673,7 +4762,7 @@ class List {
         }
     }
     _initExternalParamsController() {
-        this.externalParams = new ExternalParamsController(this._router, this._route, this._persistance, this.paging, this.sorting, this.queryParam);
+        this.externalParams = new ExternalParamsController(this._route, this._persistance, this.paging, this.sorting, this.queryParam);
     }
     /**
      * Subscribe to fetch$ event with debounce
@@ -4715,7 +4804,7 @@ class List {
             }
             return { params, query };
         }), switchMap(({ params, query }) => {
-            if (this.columns.loadFnConfigured && !this.columns.columnsFetched) {
+            if (!this.columns.columnsFetched) {
                 return this.columns.loadRemoteColumnConfigs()
                     .pipe(mapTo({ params, query }));
             }
@@ -4798,7 +4887,6 @@ class List {
             : null;
         // Config
         this.filterConfig = {
-            persist: this.persist,
             items: this.filters || [],
             savedFilters: this.savedFilters,
             actions: this.actions.actions,
@@ -4813,6 +4901,12 @@ class List {
             reload: (this._config.reload ?? true) ? this.reload.bind(this) : null,
             sortChange: this._filterSort.bind(this),
         };
+        if (this._persistance.queryEnabled) {
+            this.filterConfig.persist = {
+                name: this._persistance.name,
+                persistQuery: true,
+            };
+        }
     }
     /**
      * Callback when Filter has been initialized
@@ -4978,19 +5072,6 @@ class List {
     }
 }
 
-const FILTER_STORE_KEY = 'fs-list-persist';
-class PersistanceController extends FsPersistanceStore {
-    STORE_KEY = FILTER_STORE_KEY;
-    constructor(_store, _route) {
-        super(_store, _route);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PersistanceController, deps: [{ token: i1$3.FsStore }, { token: i6.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PersistanceController });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PersistanceController, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.FsStore }, { type: i6.ActivatedRoute }] });
-
 class FsListHeadingDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListHeadingDirective, selector: "[fs-list-heading],[fsListHeading]", ngImport: i0 });
@@ -5304,13 +5385,13 @@ class FsListSavedFiltersComponent {
         //   viewContainerRef: this._vcRef,
         // });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i1$2.MatDialog }, { token: i2.ExternalParamsController }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters", ngImport: i0, template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\n  -->, saved filter\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: ["clear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i3$3.MatDialog }, { token: i2.ExternalParamsController }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters", ngImport: i0, template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\r\n  -->, saved filter\r\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: ["clear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-saved-filters', template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\n  -->, saved filter\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: i2.ExternalParamsController }, { type: i0.ViewContainerRef }] });
+            args: [{ selector: 'fs-list-saved-filters', template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\r\n  -->, saved filter\r\n  <fs-filter-saved-filters-menu (manage)=\"showManageDialog()\"></fs-filter-saved-filters-menu>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [{ type: i3$3.MatDialog }, { type: i2.ExternalParamsController }, { type: i0.ViewContainerRef }] });
 
 class FsStatusComponent {
     list;
@@ -5425,11 +5506,11 @@ class FsListLoaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
+            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], loaderLines: [{
@@ -5452,7 +5533,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$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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<div class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.records > pagination.limit) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                                                                                     {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  @if (!(pagination.pageRecords ===0 && pagination.page === 1)) {\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: true }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i5$2.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
@@ -5487,17 +5568,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 class FsListComponent {
     reorderController;
     _config;
-    _dialogRef;
-    _drawerRef;
     _el;
     _selectionDialog;
     _dialog;
     _cdRef;
     _groupExpandNotifier;
-    _router;
     _route;
     _persistance;
-    _location;
     classFsList = true;
     rowHoverHighlight;
     set config(config) {
@@ -5517,8 +5594,8 @@ class FsListComponent {
     _listColumnDirectives;
     _filterRef;
     _filterParamsReady = false;
-    _inDialog;
     _destroy = new Subject();
+    _injector = inject(Injector);
     set filterReference(component) {
         this._filterRef = component;
         this.list.actions.setFilterRef(component);
@@ -5539,21 +5616,18 @@ class FsListComponent {
             this.list.emptyStateTemplate = template;
         }
     }
-    constructor(reorderController, _config, _dialogRef, _drawerRef, _el, _selectionDialog, _dialog, _cdRef, _groupExpandNotifier, _router, _route, _persistance, _location) {
+    _dialogRef = inject(MatDialogRef, { optional: true });
+    _drawerRef = inject(DrawerRef, { optional: true });
+    constructor(reorderController, _config, _el, _selectionDialog, _dialog, _cdRef, _groupExpandNotifier, _route, _persistance) {
         this.reorderController = reorderController;
         this._config = _config;
-        this._dialogRef = _dialogRef;
-        this._drawerRef = _drawerRef;
         this._el = _el;
         this._selectionDialog = _selectionDialog;
         this._dialog = _dialog;
         this._cdRef = _cdRef;
         this._groupExpandNotifier = _groupExpandNotifier;
-        this._router = _router;
         this._route = _route;
         this._persistance = _persistance;
-        this._location = _location;
-        this._inDialog = !!this._dialogRef || !!this._drawerRef;
     }
     /**
      * Return reference for filter
@@ -5690,6 +5764,9 @@ class FsListComponent {
             this._cdRef.markForCheck();
         }
     }
+    get inDialog() {
+        return !!this._dialogRef || !!this._drawerRef;
+    }
     /**
      * Initialize config for list
      *
@@ -5716,7 +5793,7 @@ class FsListComponent {
             this._restorePersistance(listConfig.persist);
         }
         this._updateCustomizeAction(listConfig.actions);
-        this.list = new List(this._el, listConfig, this._selectionDialog, this._router, this._route, this._persistance, this._inDialog);
+        this.list = new List(this._el, listConfig, this._selectionDialog, this._route, this._persistance, this.inDialog);
         this.rowHoverHighlight = this.list.rowHoverHighlight;
         this._waitFirstLoad();
         this.reorderController.initWithConfig(config.reorder, this.list.dataController, this.list.actions, this.list.selection);
@@ -5739,6 +5816,7 @@ class FsListComponent {
                     actionClickFn(null);
                 }
                 this._dialog.open(CustomizeColsDialogComponent, {
+                    injector: this._injector,
                     data: {
                         columns: this.list.columns.columnsForDialog,
                         changeFn: this.list.columns.changeFn,
@@ -5798,10 +5876,9 @@ class FsListComponent {
         }
     }
     _restorePersistance(persistConfig) {
-        const namespace = getNormalizedPath(this._location);
-        this._persistance.setConfig(persistConfig, namespace, this._inDialog);
+        this._persistance.init(persistConfig, this.inDialog);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, deps: [{ token: ReorderController }, { token: FS_LIST_CONFIG, optional: true }, { token: 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, deps: [{ token: ReorderController }, { token: FS_LIST_CONFIG, optional: true }, { token: i0.ElementRef }, { token: i2$2.SelectionDialog }, { token: i3$3.MatDialog }, { token: i0.ChangeDetectorRef }, { token: GroupExpandNotifierService }, { token: i5.ActivatedRoute }, { token: PersistanceController }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsListComponent, selector: "fs-list", inputs: { config: "config", loaderLines: "loaderLines" }, outputs: { filtersReady: "filtersReady" }, host: { properties: { "class.fs-list": "this.classFsList", "class.fs-list-row-highlight": "this.rowHoverHighlight" } }, providers: [
             GroupExpandNotifierService,
             PersistanceController,
@@ -5820,11 +5897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }, {
                     type: Inject,
                     args: [FS_LIST_CONFIG]
-                }] }, { type: i1$2.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: i3$3.DrawerRef, decorators: [{
-                    type: Optional
-                }] }, { 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: i0.ElementRef }, { type: i2$2.SelectionDialog }, { type: i3$3.MatDialog }, { type: i0.ChangeDetectorRef }, { type: GroupExpandNotifierService }, { type: i5.ActivatedRoute }, { type: PersistanceController }], propDecorators: { classFsList: [{
                 type: HostBinding,
                 args: ['class.fs-list']
             }], rowHoverHighlight: [{
@@ -5920,11 +5993,11 @@ class FsListManageSavedFiltersComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListManageSavedFiltersComponent, deps: [{ token: i2.ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListManageSavedFiltersComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage Saved Filters\n</h1>\n<div mat-dialog-content>\n  <fs-list [config]=\"config\">\n    <fs-list-column name=\"name\" title=\"Name\">\n      <ng-template fs-list-cell let-row=\"row\">\n        {{ row.name }}\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n</div>\n<div mat-dialog-actions>\n  <button mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\"\n          color=\"primary\">\n    Done\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListManageSavedFiltersComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\r\n  Manage Saved Filters\r\n</h1>\r\n<div mat-dialog-content>\r\n  <fs-list [config]=\"config\">\r\n    <fs-list-column name=\"name\" title=\"Name\">\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{ row.name }}\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button\r\n          [mat-dialog-close]=\"null\"\r\n          type=\"button\"\r\n          color=\"primary\">\r\n    Done\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListManageSavedFiltersComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>\n  Manage Saved Filters\n</h1>\n<div mat-dialog-content>\n  <fs-list [config]=\"config\">\n    <fs-list-column name=\"name\" title=\"Name\">\n      <ng-template fs-list-cell let-row=\"row\">\n        {{ row.name }}\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n</div>\n<div mat-dialog-actions>\n  <button mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\"\n          color=\"primary\">\n    Done\n  </button>\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>\r\n  Manage Saved Filters\r\n</h1>\r\n<div mat-dialog-content>\r\n  <fs-list [config]=\"config\">\r\n    <fs-list-column name=\"name\" title=\"Name\">\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{ row.name }}\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button\r\n          [mat-dialog-close]=\"null\"\r\n          type=\"button\"\r\n          color=\"primary\">\r\n    Done\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i2.ExternalParamsController }] });
 
 class FsListContentDirective {