@firestitch/list 18.0.65 → 18.0.67

package/fesm2022/firestitch-list.mjs

@@ -3,7 +3,7 @@ import { Injectable, inject, ChangeDetectorRef, NgZone, ElementRef, Renderer2, D
 import { BehaviorSubject, Subject, Observable, map as map$1, merge, of, from, combineLatest, EMPTY } from 'rxjs';
 import { takeUntil, map, take, skip, filter, tap, distinctUntilChanged, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
 import { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith } from 'lodash-es';
-import { NgIf, NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, AsyncPipe, Location, NgFor, DecimalPipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet, AsyncPipe, Location, DecimalPipe } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatIcon } from '@angular/material/icon';
 import * as i1$1 from '@firestitch/menu';
@@ -1447,14 +1447,11 @@ class FsRowInlineActionComponent {
         this.fileSelect.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowInlineActionComponent, isStandalone: true, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"rowAction.visible$ | async\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatFabAnchor, selector: "a[mat-fab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabAnchor, selector: "a[mat-mini-fab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowInlineActionComponent, isStandalone: true, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "@if (rowAction.visible$ | async) {\n  <ng-template #buttonContent>\n    @if (!rowAction.fileConfig) {\n      @if (icon) {\n        <mat-icon>\n          {{ icon }}\n        </mat-icon>\n      }\n      {{ rowAction.label }}\n    } @else {\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        @if (icon) {\n          <mat-icon>\n            {{ icon }}\n          </mat-icon>\n        }\n        {{ rowAction.label }}\n      </fs-file>\n    }\n  </ng-template>\n  @switch (actionType) {\n    <!-- Basic button -->\n    @case ('basic') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-button\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Raised button -->\n    @case ('raised') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-raised-button\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-raised-button\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Icon button -->\n    @case ('icon') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-icon-button\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Fab button -->\n    @case ('fab') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-fab\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-fab\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Mini Fab button -->\n    @case ('mini-fab') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-mini-fab\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-mini-fab\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n  }\n}", styles: ["mat-icon{display:flex}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatFabAnchor, selector: "a[mat-fab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabAnchor, selector: "a[mat-mini-fab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-list-row-inline-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
-                        NgSwitch,
-                        NgSwitchCase,
                         MatButton,
                         NgClass,
                         NgTemplateOutlet,
@@ -1468,8 +1465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatMiniFabAnchor,
                         MatIcon,
                         FsFileModule,
-                        AsyncPipe,
-                    ], template: "<ng-container\n    *ngIf=\"rowAction.visible$ | async\"\n    [ngSwitch]=\"actionType\">\n  <!-- Basic button -->\n  <ng-container *ngSwitchCase=\"'basic'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Raised button -->\n  <ng-container *ngSwitchCase=\"'raised'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-raised-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-raised-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Icon button -->\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-icon-button\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Fab button -->\n  <ng-container *ngSwitchCase=\"'fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <!-- Mini Fab button -->\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\n    <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n      <button\n          type=\"button\"\n          mat-mini-fab\n          (click)=\"actionClick($event)\"\n          [ngClass]=\"rowAction.classArray\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </button>\n    </ng-container>\n    <ng-template #link>\n      <a\n          mat-mini-fab\n          [routerLink]=\"rowAction.routerLink.link\"\n          [queryParams]=\"rowAction.routerLink.queryParams\">\n        <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n      </a>\n    </ng-template>\n  </ng-container>\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n      <mat-icon *ngIf=\"icon\">\n        {{ icon }}\n      </mat-icon>\n      {{ rowAction.label }}\n    </ng-container>\n    <ng-template #uploadFileBtn>\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        <mat-icon *ngIf=\"icon\">\n          {{ icon }}\n        </mat-icon>\n        {{ rowAction.label }}\n      </fs-file>\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"] }]
+                        AsyncPipe
+                    ], template: "@if (rowAction.visible$ | async) {\n  <ng-template #buttonContent>\n    @if (!rowAction.fileConfig) {\n      @if (icon) {\n        <mat-icon>\n          {{ icon }}\n        </mat-icon>\n      }\n      {{ rowAction.label }}\n    } @else {\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"rowAction.fileConfig.accept || '*'\"\n          [multiple]=\"rowAction.fileConfig.multiple\"\n          [minWidth]=\"rowAction.fileConfig.minWidth\"\n          [minHeight]=\"rowAction.fileConfig.minHeight\"\n          [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n          [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n          (select)=\"fileSelected($event)\"\n          (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n        @if (icon) {\n          <mat-icon>\n            {{ icon }}\n          </mat-icon>\n        }\n        {{ rowAction.label }}\n      </fs-file>\n    }\n  </ng-template>\n  @switch (actionType) {\n    <!-- Basic button -->\n    @case ('basic') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-button\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Raised button -->\n    @case ('raised') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-raised-button\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-raised-button\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Icon button -->\n    @case ('icon') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-icon-button\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Fab button -->\n    @case ('fab') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-fab\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-fab\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n    <!-- Mini Fab button -->\n    @case ('mini-fab') {\n      @if (!rowAction.routerLink) {\n        <button\n            type=\"button\"\n            mat-mini-fab\n            (click)=\"actionClick($event)\"\n            [ngClass]=\"rowAction.classArray\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </button>\n      } @else {\n        <a\n            mat-mini-fab\n            [routerLink]=\"rowAction.routerLink.link\"\n            [queryParams]=\"rowAction.routerLink.queryParams\">\n          <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n        </a>\n      }\n    }\n  }\n}", styles: ["mat-icon{display:flex}\n"] }]
         }], propDecorators: { rowAction: [{
                 type: Input
             }], row: [{
@@ -5082,11 +5079,12 @@ class FsListCellDirective {
     colspan;
     align;
     className;
+    rowType;
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListCellDirective, isStandalone: true, selector: "[fs-list-cell]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsListCellDirective, isStandalone: true, selector: "[fs-list-cell]", inputs: { colspan: "colspan", align: "align", className: ["class", "className"], rowType: "rowType" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListCellDirective, decorators: [{
             type: Directive,
@@ -5101,6 +5099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }], className: [{
                 type: Input,
                 args: ['class']
+            }], rowType: [{
+                type: Input
             }] } });
 
 class FsListFooterDirective {
@@ -5517,7 +5517,7 @@ class FsStatusComponent {
         this.paging.setLimit(limit);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsStatusComponent, isStandalone: true, selector: "fs-list-status", inputs: { list: "list", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n                (click)=\"manyClick()\"\n                [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of      \n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"sort-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"sort-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n        </ng-template>\n        <a (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n      <ng-template\n          fs-menu-item\n          (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.sort-toggle{white-space:nowrap;display:inline-flex}.sort-toggle:after{content:\", \"}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i1$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i1$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsStatusComponent, isStandalone: true, selector: "fs-list-status", inputs: { list: "list", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n            (click)=\"manyClick()\"\n            [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of\n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    @if ((!paging.enabled) && paging.pageRecords > 0) {\n      Showing\n      @if (paging.pageRecords === 1) {\n        <span>\n          {{ paging.pageRecords }} result\n        </span>\n      }\n      @if (paging.pageRecords > 1) {\n        <span>\n          {{ paging.pageRecords | number:'1.0':'en-US' }} results\n        </span>\n      }\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <fs-menu\n      [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n      #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      @for (column of sorting.sortingColumns; track column) {\n        <ng-template\n          fs-menu-item\n          (click)=\"setSortableColumn(column)\">\n          @if (column.title) {\n            {{ column.title }}\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          }\n        </ng-template>\n      }\n      <!-- Fake sorting columns -->\n      @for (column of sorting.fakeSortingColumns; track column) {\n        <ng-template\n          fs-menu-item\n          (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      }\n    </fs-menu>\n    <ng-template #sortedBy>\n      @if (sorting.sortingColumn) {\n        sorted by\n        @if (sorting.sortingColumn.title) {\n          <a\n            class=\"sort-toggle\"\n            [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n        } @else {\n          <a\n            class=\"sort-toggle\"\n            [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n        }\n        <a (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      }\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    @for (limit of paging.limits; track limit) {\n      <ng-template\n        fs-menu-item\n        (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    }\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.sort-toggle{white-space:nowrap;display:inline-flex}.sort-toggle:after{content:\", \"}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i1$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i1$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, decorators: [{
             type: Component,
@@ -5525,11 +5525,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         NgTemplateOutlet,
                         MatTooltip,
                         MatProgressSpinner,
-                        NgIf,
                         FsMenuModule,
-                        NgFor,
-                        DecimalPipe,
-                    ], template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n                (click)=\"manyClick()\"\n                [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of      \n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"sort-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"sort-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n        </ng-template>\n        <a (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    <ng-template\n        ngFor\n        let-limit\n        [ngForOf]=\"paging.limits\">\n      <ng-template\n          fs-menu-item\n          (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    </ng-template>\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.sort-toggle{white-space:nowrap;display:inline-flex}.sort-toggle:after{content:\", \"}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"] }]
+                        DecimalPipe
+                    ], template: "<div class=\"status\">\n  <small>\n    @if (paging.enabled) {\n      Showing\n      @if (paging.hasManyStrategy) {\n        <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n        of\n        @if (many.status === 'many') {\n          <a\n            (click)=\"manyClick()\"\n            [matTooltip]=\"'Calculate number of results'\">\n            many\n          </a>\n        } @else {\n          @if (many.status === 'loading') {\n            <mat-spinner\n              [diameter]=\"15\"\n              [strokeWidth]=\"2\">\n            </mat-spinner>\n          } @else {\n            <a\n              (click)=\"manyClick()\"\n              [matTooltip]=\"'Recalculate number of results'\">\n              {{ many.count | number:'1.0':'en-US' }}\n            </a>\n          }\n        }\n      } @else {\n        @if (paging.records) {\n          <ng-container [ngTemplateOutlet]=\"limitMenu\"></ng-container>\n          of\n          {{ paging.records | number:'1.0':'en-US' }}\n        } @else {\n          0\n        }\n      }\n      results\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    @if ((!paging.enabled) && paging.pageRecords > 0) {\n      Showing\n      @if (paging.pageRecords === 1) {\n        <span>\n          {{ paging.pageRecords }} result\n        </span>\n      }\n      @if (paging.pageRecords > 1) {\n        <span>\n          {{ paging.pageRecords | number:'1.0':'en-US' }} results\n        </span>\n      }\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    }\n    <fs-menu\n      [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n      #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      @for (column of sorting.sortingColumns; track column) {\n        <ng-template\n          fs-menu-item\n          (click)=\"setSortableColumn(column)\">\n          @if (column.title) {\n            {{ column.title }}\n          } @else {\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          }\n        </ng-template>\n      }\n      <!-- Fake sorting columns -->\n      @for (column of sorting.fakeSortingColumns; track column) {\n        <ng-template\n          fs-menu-item\n          (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      }\n    </fs-menu>\n    <ng-template #sortedBy>\n      @if (sorting.sortingColumn) {\n        sorted by\n        @if (sorting.sortingColumn.title) {\n          <a\n            class=\"sort-toggle\"\n            [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n        } @else {\n          <a\n            class=\"sort-toggle\"\n            [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n        }\n        <a (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      }\n    </ng-template>\n  </small>\n</div>\n<ng-template #limitMenu>\n  <a [fsMenuTriggerFor]=\"limitsMenuTrigger\">\n    {{ paging.statusLabel }}\n  </a>\n  <fs-menu #limitsMenuTrigger>\n    @for (limit of paging.limits; track limit) {\n      <ng-template\n        fs-menu-item\n        (click)=\"setLimit(limit)\">\n        {{ limit }}\n      </ng-template>\n    }\n  </fs-menu>\n</ng-template>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.sort-toggle{white-space:nowrap;display:inline-flex}.sort-toggle:after{content:\", \"}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"] }]
         }], propDecorators: { list: [{
                 type: Input
             }], rows: [{