@firestitch/list 18.0.0 → 18.0.1

package/fesm2022/firestitch-list.mjs

@@ -30,8 +30,8 @@ import * as i1$1 from '@firestitch/prompt';
 import { FsPromptModule } from '@firestitch/prompt';
 import { FsScrollModule } from '@firestitch/scroll';
 import { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith, merge as merge$1 } from 'lodash-es';
-import { BehaviorSubject, Subject, Observable, merge, from, combineLatest, of, EMPTY } from 'rxjs';
-import { takeUntil, take, filter, tap, skip, distinctUntilChanged, map, shareReplay, delay, debounceTime, switchMap, mapTo, catchError } from 'rxjs/operators';
+import { BehaviorSubject, Subject, Observable, merge, from, of, combineLatest, EMPTY } from 'rxjs';
+import { takeUntil, take, filter, tap, skip, distinctUntilChanged, map, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
 import * as i3$3 from '@firestitch/drawer';
 import * as i4$2 from '@firestitch/selection';
 import * as i1$3 from '@firestitch/store';
@@ -1501,11 +1501,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 ::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: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.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      [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}: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: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.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 });
 }
 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 ::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      [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}: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: [{
@@ -1856,11 +1856,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']
@@ -2389,11 +2389,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>\n<mat-dialog-content>\n  <div *ngFor=\"let column of columns\">\n    <mat-checkbox [checked]=\"column.show\" (change)=\"visibilityChange($event, column)\" [disabled]=\"column.disabled\">\n      <ng-container *ngIf=\"!column.title; else titleLable\">\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n      </ng-container>\n      <ng-template #titleLable>\n        {{ column.title }}\n      </ng-template>\n\n      <ng-container *ngIf=\"column.tooltip\">\n        <mat-icon [matTooltip]=\"column.tooltip\">\n          help\n        </mat-icon>\n      </ng-container>\n    </mat-checkbox>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"saveDisabled\">Save</button>\n  <button type=\"button\" mat-button (click)=\"cancel()\">Cancel</button>\n</mat-dialog-actions>\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: "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 });
 }
 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>\n<mat-dialog-content>\n  <div *ngFor=\"let column of columns\">\n    <mat-checkbox [checked]=\"column.show\" (change)=\"visibilityChange($event, column)\" [disabled]=\"column.disabled\">\n      <ng-container *ngIf=\"!column.title; else titleLable\">\n        <ng-template [ngTemplateOutlet]=\"column.template\"></ng-template>\n      </ng-container>\n      <ng-template #titleLable>\n        {{ column.title }}\n      </ng-template>\n\n      <ng-container *ngIf=\"column.tooltip\">\n        <mat-icon [matTooltip]=\"column.tooltip\">\n          help\n        </mat-icon>\n      </ng-container>\n    </mat-checkbox>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"saveDisabled\">Save</button>\n  <button type=\"button\" mat-button (click)=\"cancel()\">Cancel</button>\n</mat-dialog-actions>\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>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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2404,11 +2404,11 @@ class FsFooterCellComponent extends FsCellComponent {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\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 {
@@ -4356,8 +4356,7 @@ class List {
      */
     subscribe() {
         this.paging.pageChanged$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((event) => {
+            .pipe(tap((event) => {
             this.dataController.setOperation(FsListState.PageChange);
             // Remove all rows if limits was changed
             if (event.type === PageChangeType.LimitChanged && this.paging.hasPageStrategy) {
@@ -4371,6 +4370,8 @@ class List {
                     this.selection.pageChanged();
                 }
             }
+        }), switchMap((event) => {
+            this._fetch$.next(null);
             if (!this.paging.loadMoreEnabled) {
                 const contains = [].slice.call(document.querySelectorAll('.cdk-overlay-container')).some((overlay) => {
                     return this._el.nativeElement.contains(overlay);
@@ -4382,17 +4383,17 @@ class List {
                         el = document.body;
                     }
                 }
-                this.fetchComplete$
+                return this.fetchComplete$
                     .asObservable()
-                    .pipe(take(1), takeUntil(this._destroy$))
-                    .subscribe((event) => {
+                    .pipe(take(1), tap(() => {
                     if (event?.scrollIntoView ?? true) {
                         el.scrollIntoView({ behavior: 'smooth' });
                     }
-                });
+                }));
             }
-            this._fetch$.next(null);
-        });
+            return of(null);
+        }), takeUntil(this._destroy$))
+            .subscribe();
         this.sorting.sortingChanged$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
@@ -4551,14 +4552,13 @@ class List {
                 this.rowActionsRaw = [];
             }
             this.rowActionsRaw.push(restoreAction);
-            if (!this.filters) {
-                this.filters = [];
-            }
+            this.filters = this.filters || [];
             if (this.restore.filter !== false) {
                 this.filters.push({
                     name: showDeletedFilterKey,
                     type: ItemType.Checkbox,
                     label: this.restore.filterLabel || 'Show Deleted',
+                    default: null,
                 });
             }
         }
@@ -5225,11 +5225,11 @@ class FsListSavedFiltersComponent {
         // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListSavedFiltersComponent, deps: [{ token: i1$2.MatDialog }, { token: i2$1.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$1.FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: ["clear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters", ngImport: i0, template: "<ng-container *ngIf=\"savedFiltersEnabled$ | async\"><!--\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$1.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" }]
+            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: i1$2.MatDialog }, { type: i2$1.ExternalParamsController }, { type: i0.ViewContainerRef }] });
 
 class FsStatusComponent {
@@ -5270,11 +5270,11 @@ class FsStatusComponent {
         this.paging.setLimit(limit);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsStatusComponent, selector: "fs-list-status", inputs: { paging: "paging", sorting: "sorting", 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    <ng-container *ngIf=\"paging.enabled\">\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\n      </ng-container>\n      <ng-template #emptyResults>\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\n      </ng-template>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n  --></ng-container><!--\n\n  --><ng-container *ngIf=\"(!paging.enabled) && paging.displayed > 0\">\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\n      Showing\n      <span *ngIf=\"paging.displayed === 1\">{{ paging.displayed }} result </span>\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\n    </ng-container>\n\n    <ng-template #scrollable>\n      <span *ngIf=\"paging.records === 1\">{{ paging.records }} result </span>\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n  --></ng-container><!--\n\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n\n    <fs-menu [hidden]=\"!paging.enabled\" #limitsMenu>\n      <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\n          {{ limit }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n        ngFor\n        let-column\n        [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template fs-menu-item (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\n      <!-- Fake sorting columns -->\n      <ng-template\n        ngFor\n        let-column\n        [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>,\n        </ng-template>\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\n    --></ng-container><!--\n  --></ng-template>\n  </small>  \n</div>\n", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}\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.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { 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: "14.0.0", version: "18.2.7", type: FsStatusComponent, selector: "fs-list-status", inputs: { paging: "paging", sorting: "sorting", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\r\n  <small>\r\n    <ng-container *ngIf=\"paging.enabled\">\r\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\r\n      </ng-container>\r\n      <ng-template #emptyResults>\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><ng-container *ngIf=\"(!paging.enabled) && paging.displayed > 0\">\r\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\r\n      Showing\r\n      <span *ngIf=\"paging.displayed === 1\">{{ paging.displayed }} result </span>\r\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\r\n    </ng-container>\r\n\r\n    <ng-template #scrollable>\r\n      <span *ngIf=\"paging.records === 1\">{{ paging.records }} result </span>\r\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\r\n\r\n    <fs-menu [hidden]=\"!paging.enabled\" #limitsMenu>\r\n      <ng-template\r\n        ngFor\r\n        let-limit\r\n        [ngForOf]=\"paging.limits\">\r\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\r\n          {{ limit }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\r\n      <!-- Real sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.sortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\r\n            {{ column.title }}\r\n          </ng-container>\r\n          <ng-template #sortByTemplate>\r\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\r\n          </ng-template>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <!-- Fake sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.fakeSortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          {{ column.title }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <ng-template #sortedBy>\r\n      <ng-container *ngIf=\"sorting.sortingColumn\">\r\n        sorted by\r\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\r\n        </ng-container>\r\n        <ng-template #sortByTemplate>\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\r\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\r\n          </a>,\r\n        </ng-template>\r\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\r\n    --></ng-container><!--\r\n  --></ng-template>\r\n  </small>  \r\n</div>\r\n", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}\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.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { 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,
-            args: [{ selector: 'fs-list-status', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<div class=\"status\">\n  <small>\n    <ng-container *ngIf=\"paging.enabled\">\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\n      </ng-container>\n      <ng-template #emptyResults>\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\n      </ng-template>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n  --></ng-container><!--\n\n  --><ng-container *ngIf=\"(!paging.enabled) && paging.displayed > 0\">\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\n      Showing\n      <span *ngIf=\"paging.displayed === 1\">{{ paging.displayed }} result </span>\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\n    </ng-container>\n\n    <ng-template #scrollable>\n      <span *ngIf=\"paging.records === 1\">{{ paging.records }} result </span>\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\n  --></ng-container><!--\n\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n\n    <fs-menu [hidden]=\"!paging.enabled\" #limitsMenu>\n      <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\n          {{ limit }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n        ngFor\n        let-column\n        [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template fs-menu-item (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\n      <!-- Fake sorting columns -->\n      <ng-template\n        ngFor\n        let-column\n        [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>,\n        </ng-template>\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\n    --></ng-container><!--\n  --></ng-template>\n  </small>  \n</div>\n", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}\n"] }]
+            args: [{ selector: 'fs-list-status', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<div class=\"status\">\r\n  <small>\r\n    <ng-container *ngIf=\"paging.enabled\">\r\n      <ng-container *ngIf=\"paging.records > 0; else emptyResults\">\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">{{ paging.statusLabel }}</a> of {{ paging.records | number:'1.0':'en-US' }} results\r\n      </ng-container>\r\n      <ng-template #emptyResults>\r\n        Showing <a [fsMenuTriggerFor]=\"limitsMenu\">0</a> results\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><ng-container *ngIf=\"(!paging.enabled) && paging.displayed > 0\">\r\n    <ng-container *ngIf=\"!scrollable; else scrollable\">\r\n      Showing\r\n      <span *ngIf=\"paging.displayed === 1\">{{ paging.displayed }} result </span>\r\n      <span *ngIf=\"paging.displayed > 1\">{{ paging.displayed | number:'1.0':'en-US' }} results </span>\r\n    </ng-container>\r\n\r\n    <ng-template #scrollable>\r\n      <span *ngIf=\"paging.records === 1\">{{ paging.records }} result </span>\r\n      <span *ngIf=\"paging.records > 1\">{{ paging.records | number:'1.0':'en-US' }} results </span>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container><!--\r\n  --></ng-container><!--\r\n\r\n  --><fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\r\n\r\n    <fs-menu [hidden]=\"!paging.enabled\" #limitsMenu>\r\n      <ng-template\r\n        ngFor\r\n        let-limit\r\n        [ngForOf]=\"paging.limits\">\r\n        <ng-template fs-menu-item (click)=\"setLimit(limit)\">\r\n          {{ limit }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <fs-menu [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\" #orderColumnsMenu>\r\n      <!-- Real sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.sortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\r\n            {{ column.title }}\r\n          </ng-container>\r\n          <ng-template #sortByTemplate>\r\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\r\n          </ng-template>\r\n        </ng-template>\r\n      </ng-template>\r\n\r\n      <!-- Fake sorting columns -->\r\n      <ng-template\r\n        ngFor\r\n        let-column\r\n        [ngForOf]=\"sorting.fakeSortingColumns\">\r\n        <ng-template fs-menu-item (click)=\"setSortableColumn(column)\">\r\n          {{ column.title }}\r\n        </ng-template>\r\n      </ng-template>\r\n    </fs-menu>\r\n\r\n    <ng-template #sortedBy>\r\n      <ng-container *ngIf=\"sorting.sortingColumn\">\r\n        sorted by\r\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">{{ sorting.sortingColumn.title }}</a>,\r\n        </ng-container>\r\n        <ng-template #sortByTemplate>\r\n          <a class=\"order-toggle\" [fsMenuTriggerFor]=\"orderColumnsMenu\">\r\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\r\n          </a>,\r\n        </ng-template>\r\n        <a class=\"order-toggle\" (click)=\"toggleDirection()\">{{ sorting.sortingColumn.fullNameDirection }}</a><!--\r\n    --></ng-container><!--\r\n  --></ng-template>\r\n  </small>  \r\n</div>\r\n", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { paging: [{
                 type: Input
             }], sorting: [{
@@ -5316,11 +5316,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: [{
@@ -5692,7 +5692,7 @@ class FsListComponent {
             GroupExpandNotifierService,
             PersistanceController,
             ReorderController,
-        ], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table \n            class=\"fs-list-table\" \n            role=\"grid\" \n            [fsListContentInit]=\"list.afterContentInit\" \n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\"\n            [reorderMultiple]=\"reorderController.multiple\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n    <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n      <ng-container\n        [ngTemplateOutlet]=\"headingContainerTemplate\"\n        [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #headingContainer>\n      <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n        {{list.heading}}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n        {{list.subheading}}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-top:2px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2$1.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table \n            class=\"fs-list-table\" \n            role=\"grid\" \n            [fsListContentInit]=\"list.afterContentInit\" \n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\"\n            [reorderMultiple]=\"reorderController.multiple\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n    <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n      <ng-container\n        [ngTemplateOutlet]=\"headingContainerTemplate\"\n        [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #headingContainer>\n      <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n        {{list.heading}}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n        {{list.subheading}}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2$1.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, decorators: [{
             type: Component,
@@ -5700,7 +5700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         GroupExpandNotifierService,
                         PersistanceController,
                         ReorderController,
-                    ], template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table \n            class=\"fs-list-table\" \n            role=\"grid\" \n            [fsListContentInit]=\"list.afterContentInit\" \n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\"\n            [reorderMultiple]=\"reorderController.multiple\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n    <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n      <ng-container\n        [ngTemplateOutlet]=\"headingContainerTemplate\"\n        [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #headingContainer>\n      <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n        {{list.heading}}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n        {{list.subheading}}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-top:2px solid #ddd}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-bottom:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
+                    ], template: "<div class=\"fs-list-container\"\n    [ngClass]=\"{\n      'has-filter-keyword': hasFilterKeyword,\n      'has-filters': list.filterConfig?.items.length,\n      'has-heading': list.heading || headingTemplate,\n      'has-status': hasStatus,\n      'has-chips': list.chips,\n      'has-actions': list.actions.hasActions,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <div class=\"fs-list-header-container\">\n      <div\n          class=\"fs-list-header\"\n          [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n        <ng-container\n            *ngIf=\"hasFilterKeyword\"\n            [ngTemplateOutlet]=\"heading\">\n        </ng-container>\n        <fs-filter\n            class=\"fs-list-filter\"\n            *ngIf=\"list.filterConfig\"\n            [filter]=\"list.filterConfig\"\n            [showSortBy]=\"!list.status\"\n            [showFilterInput]=\"list.filterInput\"\n            (ready)=\"filterReady()\">\n          <ng-template fsFilterStatusBar>\n            <ng-container\n                *ngIf=\"!hasFilterKeyword\"\n                [ngTemplateOutlet]=\"heading\">\n            </ng-container>\n            <ng-container *ngIf=\"hasStatus\">\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <ng-content select=\"[fs-list-content]\"></ng-content>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <table \n            class=\"fs-list-table\" \n            role=\"grid\" \n            [fsListContentInit]=\"list.afterContentInit\" \n            [ngClass]=\"{\n              'style-card': list.style === 'card',\n              'style-basic': list.style === 'basic',\n              'style-line': (list.style || 'line') === 'line'\n            }\">\n          <thead\n            fs-list-head\n            class=\"fs-list-head\"\n            role=\"rowgroup\"\n            *ngIf=\"list.columns.hasHeader\"\n            [ngClass]=\"list.columns.theadClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [sorting]=\"list.sorting\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </thead>\n\n          <tbody\n            fs-list-body\n            fsListDraggableList\n            class=\"fs-list-body\"\n            role=\"rowgroup\"\n            [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n            [rows]=\"listData\"\n            [rowActionsRaw]=\"list.rowActionsRaw\"\n            [groupActionsRaw]=\"list.groupActionsRaw\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [rowEvents]=\"list.rowEvents\"\n            [rowClass]=\"list.rowClass\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [restoreMode]=\"list.restoreMode\"\n            [selection]=\"list.selection\"\n            [rowRemoved]=\"rowRemoved\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\"\n            [reorderMultiple]=\"reorderController.multiple\">\n          </tbody>\n\n          <tfoot\n            fs-list-footer\n            class=\"fs-list-footer\"\n            *ngIf=\"list.columns.hasFooter\"\n            [columns]=\"list.columns.visibleColumns$ | async\"\n            [selection]=\"list.selection\"\n            [hasRowActions]=\"list.hasRowActions\"\n            [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n            [reorderEnabled]=\"reorderController.enabled$ | async\"\n            [reorderPosition]=\"reorderController.position$ | async\"\n            [reorderStrategy]=\"reorderController.strategy$ | async\">\n          </tfoot>\n        </table>\n      </ng-container>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #heading>\n  <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n    <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n      <ng-container\n        [ngTemplateOutlet]=\"headingContainerTemplate\"\n        [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #headingContainer>\n      <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n        {{list.heading}}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n        {{list.subheading}}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
         }], ctorParameters: () => [{ type: ReorderController }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5806,11 +5806,11 @@ class FsListManageSavedFiltersComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListManageSavedFiltersComponent, deps: [{ token: i2$1.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", "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", "customize", "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$1.ExternalParamsController }] });
 
 class FsListContentDirective {