@firestitch/list 18.0.16 → 18.0.18

package/fesm2022/firestitch-list.mjs

@@ -31,7 +31,7 @@ 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, of, combineLatest, EMPTY } from 'rxjs';
+import { BehaviorSubject, Subject, Observable, merge, from, of, combineLatest, EMPTY, filter as filter$1, tap as tap$1, takeUntil as takeUntil$1 } 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';
@@ -3209,7 +3209,7 @@ class DataController {
         return this._operation;
     }
     get visibleRows$() {
-        return this._visibleRows$;
+        return this._visibleRows$.asObservable();
     }
     set visibleRows(value) {
         this._visibleRows$.next(value);
@@ -3296,14 +3296,14 @@ class DataController {
         if (Array.isArray(rows)) {
             let updateSuccess = false;
             rows.forEach((item) => {
-                if (this.updateRow(item, trackBy)) {
+                if (this._updateRow(item, trackBy)) {
                     updateSuccess = true;
                 }
             });
             this._updateVisibleRows();
             return updateSuccess;
         }
-        const updated = this.updateRow(rows, trackBy);
+        const updated = this._updateRow(rows, trackBy);
         this._updateVisibleRows();
         return updated;
     }
@@ -3319,14 +3319,14 @@ class DataController {
         if (Array.isArray(data)) {
             //
             data.forEach((item) => {
-                removedRows.push(...this.removeRow(item, defaultTrackBy));
+                removedRows.push(...this._removeRow(item, defaultTrackBy));
             });
         }
         else if (isFunction(data)) {
-            removedRows.push(...this.removeRow(null, data));
+            removedRows.push(...this._removeRow(null, data));
         }
         else if (isObject(data)) {
-            removedRows.push(...this.removeRow(data, defaultTrackBy));
+            removedRows.push(...this._removeRow(data, defaultTrackBy));
         }
         if (removedRows.length > 0) {
             this._updateVisibleRows();
@@ -3335,11 +3335,10 @@ class DataController {
         return !!removedRows.length;
     }
     swapRows(row1, row2, selectedRows, isMultipleDrag = false) {
-        let tmpEl;
         const rowsStack = this._rowsStack;
         const row1GlobalIndex = rowsStack.indexOf(row1);
         const row2GlobalIndex = rowsStack.indexOf(row2);
-        tmpEl = rowsStack[row1GlobalIndex];
+        const tmpEl = rowsStack[row1GlobalIndex];
         rowsStack[row1GlobalIndex] = rowsStack[row2GlobalIndex];
         rowsStack[row2GlobalIndex] = tmpEl;
         if (isMultipleDrag && Array.isArray(selectedRows)) {
@@ -3393,7 +3392,7 @@ class DataController {
         this._destroyRowsStack();
         if (this.groupEnabled) {
             this._store.clear();
-            this._rowsStack = [...this.groupRowsBy(rows)];
+            this._rowsStack = [...this._groupRowsBy(rows)];
         }
         else {
             rows = rows.map((row) => {
@@ -3404,7 +3403,7 @@ class DataController {
     }
     _extendRowsStack(rows) {
         if (this.groupEnabled) {
-            this._rowsStack = [...this.groupRowsBy(rows)];
+            this._rowsStack = [...this._groupRowsBy(rows)];
         }
         else {
             rows = rows.map((row) => {
@@ -3418,12 +3417,12 @@ class DataController {
     }
     _updateVisibleRows() {
         this.visibleRows = this._rowsStack
-            .filter((row, index) => {
+            .filter((row) => {
             return (!row.isChild && !row.isGroupFooter) || row.visible;
         });
     }
-    updateRow(targetRow, trackBy) {
-        if (trackBy === void 0) {
+    _updateRow(targetRow, trackBy) {
+        if (trackBy === undefined) {
             trackBy = (row, target) => {
                 return row === target;
             };
@@ -3445,7 +3444,7 @@ class DataController {
      * @param targetRow
      * @param trackBy
      */
-    removeRow(targetRow, trackBy) {
+    _removeRow(targetRow, trackBy) {
         const rows = this._rowsStack;
         const removedRows = [];
         rows.forEach((listRow, index) => {
@@ -3459,12 +3458,11 @@ class DataController {
     /**
      * Split existing rows by groups and store them for future use
      */
-    groupRowsBy(rows) {
+    _groupRowsBy(rows) {
         if (!this._groupByFn || !this._compareByFn) {
             return rows;
         }
         const groupRows = [];
-        const footerRows = new Map();
         rows.forEach((row) => {
             const mainGroup = this._groupByFn(row);
             const mainGroupKey = this._compareByFn(mainGroup);
@@ -3724,12 +3722,11 @@ var PaginationStrategy;
 })(PaginationStrategy || (PaginationStrategy = {}));
 
 class PaginationController {
-    limit = 25;
-    records;
-    manual = false;
-    page = 1; // Active page
-    offset = 0;
-    displayed = 0;
+    _limit = 25;
+    _records;
+    _page = 1; // Active page
+    _pageRecords = 0;
+    _offset = 0;
     _pages$ = new BehaviorSubject(0); // Total pages
     _strategy = PaginationStrategy.None;
     _removedRows = 0;
@@ -3738,13 +3735,30 @@ class PaginationController {
     _onDestroy$ = new Subject();
     _loadMoreConfig;
     _limits = [10, 25, 50, 100, 200];
-    // Total pages
     set pages(value) {
         this._pages$.next(value);
     }
     get pages() {
         return this._pages$.getValue();
     }
+    get page() {
+        return this._page;
+    }
+    set page(value) {
+        this._page = value;
+    }
+    get pageRecords() {
+        return this._pageRecords;
+    }
+    get offset() {
+        return this._offset;
+    }
+    get records() {
+        return this._records;
+    }
+    set records(value) {
+        this._records = value;
+    }
     get pages$() {
         return this._pages$
             .pipe(distinctUntilChanged());
@@ -3777,11 +3791,11 @@ class PaginationController {
      */
     set limits(value) {
         this._limits = value;
-        if (this.limits.length > 0 && this.limits.indexOf(this.limit) === -1) {
-            this.limit = this.limits[0];
+        if (this._limits.length > 0 && this._limits.indexOf(this._limit) === -1) {
+            this._limit = this._limits[0];
         }
-        else if (this.limits.length === 0) {
-            this.limit = this.records;
+        else if (this._limits.length === 0) {
+            this._limit = this._records;
         }
     }
     /**
@@ -3819,8 +3833,8 @@ class PaginationController {
         return this.hasNoneStrategy
             ? {}
             : {
-                page: this.page || 1,
-                limit: this.limit || 10,
+                page: this._page || 1,
+                limit: this._limit || 10,
                 recordCount: true,
             };
     }
@@ -3828,8 +3842,8 @@ class PaginationController {
      * Query for Offset Strategy
      */
     get queryOffsetStrategy() {
-        const page = this.page - 1 || 0;
-        const limit = this.limit || 5;
+        const page = this._page - 1 || 0;
+        const limit = this._limit || 5;
         return {
             offset: page * limit,
             limit,
@@ -3846,8 +3860,8 @@ class PaginationController {
      * Get query for load only count of deleted rows
      */
     get loadDeletedOffsetQuery() {
-        const paginationOffset = this.limit * this.page;
-        const actualOffset = Math.min(this.records, paginationOffset);
+        const paginationOffset = this._limit * this._page;
+        const actualOffset = Math.min(this._records, paginationOffset);
         const offset = Math.max(0, actualOffset - this._removedRows);
         return {
             offset,
@@ -3912,7 +3926,7 @@ class PaginationController {
             case PaginationStrategy.Offset:
                 return this._hasNextPageOffsetStrategy;
             case PaginationStrategy.Many:
-                return true;
+                return !!this._pageRecords && this._limit === this._pageRecords;
         }
         return false;
     }
@@ -3940,31 +3954,47 @@ class PaginationController {
      * Showing 0 results sorted by Name, Ascending
      */
     get statusLabel() {
-        const current = (this.page - 1) * this.limit;
+        const status = this.hasManyStrategy ?
+            this.manyStatus :
+            this.defaultStatus;
+        return Object.values(status)
+            .filter((value) => !!value)
+            .join('-');
+    }
+    get manyStatus() {
+        const current = (this._page - 1) * this._limit;
         const from = current + 1;
-        const to = this.hasManyStrategy ?
-            current + this.limit :
-            Math.min(this.records, current + this.limit);
-        return `${from}-${to}`;
+        if (this._pageRecords === 0) {
+            return { from: current, to: 0 };
+        }
+        return this._pageRecords < this._limit ?
+            { from, to: current + this._pageRecords } :
+            { from, to: current + this._limit };
+    }
+    get defaultStatus() {
+        const current = (this._page - 1) * this._limit;
+        const from = current + 1;
+        const to = Math.min(this._records, current + this._limit);
+        return { from, to };
     }
     get state() {
         return {
             enabled: this.enabled,
             strategy: this.strategy,
-            page: this.page,
-            offset: this.offset,
-            limit: this.limit,
-            records: this.records,
-            displayed: this.displayed,
+            page: this._page,
+            offset: this._offset,
+            limit: this._limit,
+            records: this._records,
+            pageRecords: this._pageRecords,
         };
     }
     initWithConfig(config, loadMore) {
         if (config) {
             if (config.limits) {
-                this.limits = config.limits;
+                this._limits = config.limits;
             }
             if (config.limit) {
-                this.limit = config.limit;
+                this._limit = config.limit;
             }
             this.strategy = config.strategy;
         }
@@ -3974,48 +4004,44 @@ class PaginationController {
      * If pagination has prev page when Page Strategy
      */
     get _hasPrevPagePageStrategy() {
-        return this.page > 1 && this.pages > 1;
+        return this._page > 1 && this.pages > 1;
     }
     /**
      * If pagination has prev page when Offset Strategy
      */
     get _hasPrevPageOffsetStrategy() {
-        return this.offset >= this.limit && this.records > 1;
+        return this._offset >= this._limit && this._records > 1;
     }
     /**
      * If pagination has prev page when Offset Strategy
      */
     get _hasPrevPageManyStrategy() {
-        return this.offset >= this.limit;
+        return this._offset > 0;
     }
     /**
      * If pagination has next page when Page Strategy
      */
     get _hasNextPagePageStrategy() {
-        return this.page < this.pages && this.pages > 1;
+        return this._page < this.pages && this.pages > 1;
     }
     /**
      * If pagination has next page when Offset Strategy
      */
     get _hasNextPageOffsetStrategy() {
-        return (this.offset + this.limit) < this.records && this.records > 1;
+        return (this._offset + this._limit) < this._records && this._records > 1;
     }
     /**
      * Update paging config and all related fields
-     *
-     * @param config
-     * @param displayedRecords
-     * @param loadMoreOperation
      */
-    updatePaging(config, displayedRecords = 0, loadMoreOperation = false) {
+    updatePaging(config, pageRecords = 0, loadMoreOperation = false) {
         if (!loadMoreOperation) {
             this._fromParams(config);
-            this.displayed = displayedRecords;
+            this._pageRecords = pageRecords;
         }
         else {
-            this.records = config.records;
-            if (this.records < this.displayed) {
-                this.displayed = this.records;
+            this._records = config.records;
+            if (this._records < this._pageRecords) {
+                this._pageRecords = this._records;
             }
             this._removedRows = 0;
         }
@@ -4027,8 +4053,8 @@ class PaginationController {
     //  */
     /*public updatePagingManual(rows: any[]) {
       if (Array.isArray(rows) && rows.length > 0) {
-        this.records = rows.length;
-        this.pages = Math.ceil(rows.length / this.limit);
+        this._records = rows.length;
+        this.pages = Math.ceil(rows.length / this._limit);
       }
   
       this.updatePagesArray();
@@ -4042,13 +4068,13 @@ class PaginationController {
     //   const pagesArr = [];
     //   let from = 0;
     //   let to = 0;
-    //   if (this.page < MIDDLE) {
+    //   if (this._page < MIDDLE) {
     //     from = MIDDLE - 1;
     //     to = MIDDLE + 1;
-    //   } else if (this.page >= MIDDLE && this.page <= this.pages - MIDDLE + 1) {
-    //     from = this.page - 1;
-    //     to = this.page + 1;
-    //   } else if (this.page > this.pages - MIDDLE + 1) {
+    //   } else if (this._page >= MIDDLE && this._page <= this.pages - MIDDLE + 1) {
+    //     from = this._page - 1;
+    //     to = this._page + 1;
+    //   } else if (this._page > this.pages - MIDDLE + 1) {
     //     from = this.pages - MIDDLE - 1;
     //     to = this.pages;
     //   }
@@ -4077,26 +4103,8 @@ class PaginationController {
             ...loadMoreConfig,
         };
     }
-    /**
-     * Update dispayed records counter
-     */
-    // public updateDisplayed() {
-    //   this.displayed = this.getVisibleRecords();
-    // }
-    /**
-     * Return count of records that could be shown on page
-     */
-    // public getVisibleRecords() {
-    //   const diff = this.hasOffsetStrategy
-    //     ? this.records - this.offset
-    //     : this.limit;
-    //
-    //   return diff < this.limit
-    //     ? diff
-    //     : this.displayed;
-    // }
-    getVisibleRecords() {
-        return this.displayed;
+    getPageRecords() {
+        return this._pageRecords;
     }
     /**
      * Set new limit
@@ -4104,7 +4112,7 @@ class PaginationController {
      * @param limit
      */
     setLimit(limit) {
-        this.limit = limit;
+        this._limit = limit;
         this.resetPaging();
         this._pageChanged$
             .next({
@@ -4118,7 +4126,7 @@ class PaginationController {
      * @param page
      */
     isActive(page) {
-        return page === this.page;
+        return page === this._page;
     }
     /**
      * Go to page
@@ -4126,8 +4134,8 @@ class PaginationController {
      * @param page
      */
     goToPage(page) {
-        if (page >= 1 && this.page !== page) {
-            this.page = page;
+        if (page >= 1 && this._page !== page) {
+            this._page = page;
             this._updateOffset();
             this._pageChanged$.next({
                 type: PageChangeType.Default,
@@ -4139,19 +4147,19 @@ class PaginationController {
      * Reset paging like it was just initialized
      */
     resetPaging() {
-        this.page = 1;
-        this.offset = 0;
+        this._page = 1;
+        this._offset = 0;
     }
     /**
      * Go to next page
      */
     goNext() {
         if (this.hasNextPage) {
-            this.page++;
+            this._page++;
             this._updateOffset();
             this._pageChanged$.next({
                 type: PageChangeType.Default,
-                payload: this.page,
+                payload: this._page,
             });
         }
     }
@@ -4159,12 +4167,12 @@ class PaginationController {
      * Go to first page
      */
     goFirst() {
-        if (this.page > 1) {
-            this.page = 1;
+        if (this._page > 1) {
+            this._page = 1;
             this._updateOffset();
             this._pageChanged$.next({
                 type: PageChangeType.Default,
-                payload: this.page,
+                payload: this._page,
             });
         }
     }
@@ -4172,12 +4180,12 @@ class PaginationController {
      * Go to prev page
      */
     goPrev() {
-        if (this.page > 1) {
-            this.page--;
+        if (this._page > 1) {
+            this._page--;
             this._updateOffset();
             this._pageChanged$.next({
                 type: PageChangeType.Default,
-                payload: this.page,
+                payload: this._page,
             });
         }
     }
@@ -4185,12 +4193,12 @@ class PaginationController {
      * Go to last page
      */
     goLast() {
-        if (this.page !== this.pages) {
-            this.page = this.pages;
+        if (this._page !== this.pages) {
+            this._page = this.pages;
             this._updateOffset();
             this._pageChanged$.next({
                 type: PageChangeType.Default,
-                payload: this.page,
+                payload: this._page,
             });
         }
     }
@@ -4219,23 +4227,22 @@ class PaginationController {
      */
     _fromParams(params) {
         if (!this.loadMoreEnabled) {
-            this.limit = params.limit ?? 25;
+            this._limit = params.limit ?? 25;
         }
-        this.records = params.records;
-        this.manual = params.manual;
+        this._records = params.records;
         this.pages = params.pages || 0;
     }
     /**
      * Calc and update offset
      */
     _updateOffset() {
-        this.offset = this.limit * (this.page - 1);
+        this._offset = this._limit * (this._page - 1);
     }
     /**
      * Calc and update total count of pages
      */
     _updateTotalPages() {
-        this.pages = Math.ceil(this.records / this.limit);
+        this.pages = Math.ceil(this._records / this._limit);
     }
 }
 
@@ -4281,9 +4288,6 @@ class List {
     externalParams;
     selection;
     filterConfig = null;
-    loading$ = new BehaviorSubject(false);
-    fetchComplete$ = new Subject();
-    filtersReady$ = new Subject();
     status = true;
     chips = false;
     filterInput = true;
@@ -4291,9 +4295,11 @@ class List {
     restoreMode = false;
     autoReload;
     initialFetch = true;
-    // Empty state
     emptyStateEnabled = false;
     emptyStateTemplate;
+    _loading$ = new BehaviorSubject(false);
+    _fetchComplete$ = new Subject();
+    _filtersReady$ = new Subject();
     _destroy$ = new Subject();
     _initialized$ = new BehaviorSubject(false);
     _fetch$ = new Subject();
@@ -4324,6 +4330,15 @@ class List {
             this._fetch$.next(null);
         }
     }
+    get loading$() {
+        return this._loading$.asObservable();
+    }
+    filtersReady() {
+        this._filtersReady$.next(null);
+    }
+    get filtersReady$() {
+        return this._filtersReady$.asObservable();
+    }
     get fetch$() {
         return this._fetch$.asObservable();
     }
@@ -4386,10 +4401,10 @@ class List {
         this._initFilters();
     }
     reload() {
-        this.loading$.next(true);
+        this._loading$.next(true);
         this.dataController.setOperation(FsListState.Reload);
         this._fetch$.next(null);
-        return this.fetchComplete$
+        return this._fetchComplete$
             .asObservable()
             .pipe(take(1), delay(0));
     }
@@ -4407,7 +4422,7 @@ class List {
             if (this.paging.hasOffsetStrategy) {
                 this.paging.updatePagination();
                 if (this.selection) {
-                    this.selection.updateVisibleRecordsCount(this.paging.getVisibleRecords());
+                    this.selection.updateVisibleRecordsCount(this.paging.getPageRecords());
                     this.selection.updateTotalRecordsCount(this.paging.records);
                     this.selection.pageChanged();
                 }
@@ -4426,7 +4441,7 @@ class List {
                         el = document.body;
                     }
                 }
-                return this.fetchComplete$
+                return this._fetchComplete$
                     .asObservable()
                     .pipe(take(1), tap(() => {
                     if (event?.scrollIntoView ?? true) {
@@ -4513,6 +4528,7 @@ class List {
         this._initExternalParamsController();
         this._initializeData();
     }
+    // eslint-disable-next-line max-statements
     _initVariables(config) {
         this.autoFocus = config.autoFocus;
         this.rowHoverHighlight = config.rowHoverHighlight ?? true;
@@ -4654,12 +4670,12 @@ class List {
         let fetch$ = this.fetch$;
         // Should wait until saved filters not loaded
         if (this.filters) {
-            fetch$ = combineLatest([fetch$, this.filtersReady$])
+            fetch$ = combineLatest([fetch$, this._filtersReady$])
                 .pipe(map(([params]) => params));
         }
         fetch$
             .pipe(debounceTime(50), tap(() => {
-            this.loading$.next(true);
+            this._loading$.next(true);
         }), tap(() => {
             this.selection?.closeSelectionDialog();
         }), map((params) => {
@@ -4823,7 +4839,15 @@ class List {
     _checkRestoreFilter() {
         // Restore option
         if (this.restore && this.filtersQuery[showDeletedFilterKey]) {
-            delete this.filtersQuery[showDeletedFilterKey];
+            const filtersQuery = Object.keys(this.filtersQuery)
+                .filter((key) => key !== showDeletedFilterKey)
+                .reduce((acc, key) => {
+                return {
+                    ...acc,
+                    [key]: this.filtersQuery[key],
+                };
+            }, {});
+            this._filtersQuery.next(filtersQuery);
             Object.assign(this.filtersQuery, this.restore.query);
             this.restoreMode = true;
         }
@@ -4846,8 +4870,8 @@ class List {
             this.paging.page = 1;
         }
         if (response.paging) {
-            const displayed = (Array.isArray(response.data) && response.data.length) || 0;
-            this.paging.updatePaging(response.paging, displayed, this.dataController.operation === FsListState.LoadMore);
+            const pageRecords = (Array.isArray(response.data) && response.data.length) || 0;
+            this.paging.updatePaging(response.paging, pageRecords, this.dataController.operation === FsListState.LoadMore);
         }
         else if (this.paging.enabled) {
             console.log('%c FsList Warning ', 'color: white; background-color: #ffcc0b', 'Pagination does not configured properly. ' +
@@ -4870,15 +4894,15 @@ class List {
             && this.paging.page > this.paging.pages) {
             this.paging.goLast();
         }
-        this.fetchComplete$.next({ scrollIntoView: params?.scrollIntoView });
-        this.loading$.next(false);
+        this._fetchComplete$.next({ scrollIntoView: params?.scrollIntoView });
+        this._loading$.next(false);
     }
     _completeFetchUpdateSelecton(response) {
         // Update selection params
         if (this.selection) {
             if (this.paging.enabled) {
                 this.selection.pageChanged();
-                this.selection.updateVisibleRecordsCount(this.paging.getVisibleRecords());
+                this.selection.updateVisibleRecordsCount(this.paging.getPageRecords());
                 this.selection.updateTotalRecordsCount(this.paging.records);
             }
             else {
@@ -5313,10 +5337,15 @@ class FsStatusComponent {
             limit: 0,
             recordCount: true,
         })
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((response) => {
+            .pipe(tap((response) => {
             this.many.count = response.paging?.records || 0;
             this.many.status = 'loaded';
+        }), catchError(() => {
+            this.many.status = 'many';
+            this.many.count = null;
+            return of(null);
+        }), takeUntil(this._destroy$))
+            .subscribe(() => {
             this._cdRef.markForCheck();
         });
     }
@@ -5341,11 +5370,11 @@ class FsStatusComponent {
         this.paging.setLimit(limit);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsStatusComponent, selector: "fs-list-status", inputs: { list: "list", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    <ng-container *ngIf=\"paging.enabled\">\n      Showing\n      <a [fsMenuTriggerFor]=\"limitsMenu\">\n        {{ paging.statusLabel }}\n      </a>\n      of\n      @if (paging.hasManyStrategy) {\n      @if (many.status === 'many') {\n        <a\n            (click)=\"manyClick()\"\n            [matTooltip]=\"'Calculate number of records'\">\n          many\n        </a>\n      } @else {\n      @if (many.status === 'loading') {\n        <mat-spinner\n          [diameter]=\"15\"\n          [strokeWidth]=\"2\">\n        </mat-spinner>\n      } @else {\n        {{ many.count | number:'1.0':'en-US' }}\n      }\n      }\n      } @else {\n        {{ paging.records | number:'1.0':'en-US' }} results\n      }\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!paging.enabled) && paging.displayed > 0\">\n      Showing\n      <span *ngIf=\"paging.displayed === 1\">\n        {{ paging.displayed }} result\n      </span>\n      <span *ngIf=\"paging.displayed > 1\">\n        {{ paging.displayed | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n    <fs-menu\n        [hidden]=\"!paging.enabled\"\n        #limitsMenu>\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    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i3$2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i3$2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsStatusComponent, selector: "fs-list-status", inputs: { list: "list", rows: "rows", firstLoad: "firstLoad" }, host: { properties: { "class.first-load": "this.firstLoad", "class.fs-skeleton-placeholder": "this.firstLoad" } }, ngImport: i0, template: "<div class=\"status\">\n  <small>\n    <ng-container *ngIf=\"paging.enabled\">\n      Showing\n      <a [fsMenuTriggerFor]=\"limitsMenu\">\n        {{ paging.statusLabel }}\n      </a>\n      of\n      @if (paging.hasManyStrategy) {\n      @if (many.status === 'many') {\n        <a\n            (click)=\"manyClick()\"\n            [matTooltip]=\"'Calculate number of records'\">\n          many\n        </a>\n      } @else {\n      @if (many.status === 'loading') {\n        <mat-spinner\n          [diameter]=\"15\"\n          [strokeWidth]=\"2\">\n        </mat-spinner>\n      } @else {\n        {{ many.count | number:'1.0':'en-US' }}\n      }\n      }\n      } @else {\n        {{ paging.records | number:'1.0':'en-US' }} results\n      }\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n    <fs-menu\n        [hidden]=\"!paging.enabled\"\n        #limitsMenu>\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    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i3$2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i3$2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FsListSavedFiltersComponent, selector: "fs-list-saved-filters" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 }
 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      Showing\n      <a [fsMenuTriggerFor]=\"limitsMenu\">\n        {{ paging.statusLabel }}\n      </a>\n      of\n      @if (paging.hasManyStrategy) {\n      @if (many.status === 'many') {\n        <a\n            (click)=\"manyClick()\"\n            [matTooltip]=\"'Calculate number of records'\">\n          many\n        </a>\n      } @else {\n      @if (many.status === 'loading') {\n        <mat-spinner\n          [diameter]=\"15\"\n          [strokeWidth]=\"2\">\n        </mat-spinner>\n      } @else {\n        {{ many.count | number:'1.0':'en-US' }}\n      }\n      }\n      } @else {\n        {{ paging.records | number:'1.0':'en-US' }} results\n      }\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!paging.enabled) && paging.displayed > 0\">\n      Showing\n      <span *ngIf=\"paging.displayed === 1\">\n        {{ paging.displayed }} result\n      </span>\n      <span *ngIf=\"paging.displayed > 1\">\n        {{ paging.displayed | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n    <fs-menu\n        [hidden]=\"!paging.enabled\"\n        #limitsMenu>\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    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.displayed === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"] }]
+            args: [{ selector: 'fs-list-status', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<div class=\"status\">\n  <small>\n    <ng-container *ngIf=\"paging.enabled\">\n      Showing\n      <a [fsMenuTriggerFor]=\"limitsMenu\">\n        {{ paging.statusLabel }}\n      </a>\n      of\n      @if (paging.hasManyStrategy) {\n      @if (many.status === 'many') {\n        <a\n            (click)=\"manyClick()\"\n            [matTooltip]=\"'Calculate number of records'\">\n          many\n        </a>\n      } @else {\n      @if (many.status === 'loading') {\n        <mat-spinner\n          [diameter]=\"15\"\n          [strokeWidth]=\"2\">\n        </mat-spinner>\n      } @else {\n        {{ many.count | number:'1.0':'en-US' }}\n      }\n      }\n      } @else {\n        {{ paging.records | number:'1.0':'en-US' }} results\n      }\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!paging.enabled) && paging.pageRecords > 0\">\n      Showing\n      <span *ngIf=\"paging.pageRecords === 1\">\n        {{ paging.pageRecords }} result\n      </span>\n      <span *ngIf=\"paging.pageRecords > 1\">\n        {{ paging.pageRecords | number:'1.0':'en-US' }} results\n      </span>\n      <ng-container *ngTemplateOutlet=\"sortedBy\"></ng-container>\n    </ng-container>\n    <fs-list-saved-filters class=\"saved-filters\"></fs-list-saved-filters>\n    <fs-menu\n        [hidden]=\"!paging.enabled\"\n        #limitsMenu>\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    <fs-menu\n        [hidden]=\"!sorting.sortingColumn || paging.pageRecords === 0\"\n        #orderColumnsMenu>\n      <!-- Real sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.sortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          <ng-container *ngIf=\"column.title; else sortByTemplate\">\n            {{ column.title }}\n          </ng-container>\n          <ng-template #sortByTemplate>\n            <ng-template [ngTemplateOutlet]=\"column.headerTemplate\"></ng-template>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n      <!-- Fake sorting columns -->\n      <ng-template\n          ngFor\n          let-column\n          [ngForOf]=\"sorting.fakeSortingColumns\">\n        <ng-template\n            fs-menu-item\n            (click)=\"setSortableColumn(column)\">\n          {{ column.title }}\n        </ng-template>\n      </ng-template>\n    </fs-menu>\n    <ng-template #sortedBy>\n      <ng-container *ngIf=\"sorting.sortingColumn\">\n        sorted by\n        <ng-container *ngIf=\"sorting.sortingColumn.title; else sortByTemplate\">\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            {{ sorting.sortingColumn.title }}\n          </a>\n          ,\n        </ng-container>\n        <ng-template #sortByTemplate>\n          <a\n              class=\"order-toggle\"\n              [fsMenuTriggerFor]=\"orderColumnsMenu\">\n            <ng-template [ngTemplateOutlet]=\"sorting.sortingColumn.headerTemplate\"></ng-template>\n          </a>\n          ,\n        </ng-template>\n        <a\n            class=\"order-toggle\"\n            (click)=\"toggleDirection()\">\n          {{ sorting.sortingColumn.fullNameDirection }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </small>\n</div>", styles: [":host.hidden-mobile{display:none!important}:host.first-load .status{visibility:hidden}.order-toggle{white-space:nowrap}a{cursor:pointer}mat-spinner{display:inline-block;margin:0 2px;vertical-align:middle}\n"] }]
         }], propDecorators: { list: [{
                 type: Input
             }], rows: [{
@@ -5397,34 +5426,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsPaginationComponent {
-    _cdRef;
     pagination;
     rows;
+    loading$;
     _destroy$ = new Subject();
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-    }
+    _paging$ = new BehaviorSubject(false);
     ngOnInit() {
-        merge(this.pagination.pageChanged$, this.pagination.pages$)
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._cdRef.markForCheck();
-        });
+        this.loading$
+            .pipe(filter$1((loading) => !loading), tap$1(() => this._paging$.next(false)), takeUntil$1(this._destroy$))
+            .subscribe();
+    }
+    get paging$() {
+        return this._paging$.asObservable();
+    }
+    first() {
+        this._paging$.next(true);
+        this.pagination.goFirst();
+    }
+    prev() {
+        this._paging$.next(true);
+        this.pagination.goPrev();
+    }
+    next() {
+        this._paging$.next(true);
+        this.pagination.goNext();
+    }
+    last() {
+        this._paging$.next(true);
+        this.pagination.goLast();
     }
     ngOnDestroy() {
-        this._destroy$.next(null);
+        this._destroy$.next();
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "@if (pagination.hasManyStrategy) {\n  <ng-container *ngTemplateOutlet=\"firstPageButton\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n  {{ pagination.statusLabel }}\n  <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n} @else if (pagination.loadMoreEnabled) {\n@if (pagination.hasNextPage) {\n  <div class=\"fs-list-load-more\">\n    <button\n        mat-button\n        type=\"button\"\n        [class]=\"pagination.loadMoreButtonClass\"\n        [color]=\"pagination.loadMoreButtonColor\"\n        (click)=\"pagination.goNext()\">\n      {{ pagination.loadMoreLabel }}\n    </button>\n  </div>\n}\n} @else {\n  <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"firstPageButton\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n  <div class=\"number\">\n    {{ pagination.page | fsFormatNumber }} of         {{ pagination.pages | fsFormatNumber }}\n  </div>\n  <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"!pagination.hasNextPage\"\n      (click)=\"pagination.goLast()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n}\n<ng-template #firstPageButton>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"!pagination.hasPrevPage\"\n      (click)=\"pagination.goFirst()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template #prevPageButton>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"!pagination.hasPrevPage\"\n      (click)=\"pagination.goPrev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template #nextPageButton>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"!pagination.hasNextPage\"\n      (click)=\"pagination.goNext()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i5$1.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows", loading$: "loading$" }, ngImport: i0, template: "<div\n    class=\"pagination-container\"\n    [class]=\"'strategy-' + pagination.strategy\"\n    [ngClass]=\"{ \n      'paging': (paging$ | async),\n     }\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.pageRecords > 0) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                               {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  <ng-container\n    [ngTemplateOutlet]=\"firstPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n  </ng-container>\n  <ng-container\n    [ngTemplateOutlet]=\"prevPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n  </ng-container>\n  <div class=\"number\">\n    {{ pagination.statusLabel }}\n  </div>\n  <ng-container\n    [ngTemplateOutlet]=\"nextPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n  </ng-container>\n  <ng-container\n    [ngTemplateOutlet]=\"lastPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: true }\">\n  </ng-container>\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.pagination-container.paging.strategy-many .number{visibility:hidden}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.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: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pagination.hasManyStrategy) {\n  <ng-container *ngTemplateOutlet=\"firstPageButton\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n  {{ pagination.statusLabel }}\n  <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n} @else if (pagination.loadMoreEnabled) {\n@if (pagination.hasNextPage) {\n  <div class=\"fs-list-load-more\">\n    <button\n        mat-button\n        type=\"button\"\n        [class]=\"pagination.loadMoreButtonClass\"\n        [color]=\"pagination.loadMoreButtonColor\"\n        (click)=\"pagination.goNext()\">\n      {{ pagination.loadMoreLabel }}\n    </button>\n  </div>\n}\n} @else {\n  <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"firstPageButton\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n  <div class=\"number\">\n    {{ pagination.page | fsFormatNumber }} of         {{ pagination.pages | fsFormatNumber }}\n  </div>\n  <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"!pagination.hasNextPage\"\n      (click)=\"pagination.goLast()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n}\n<ng-template #firstPageButton>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"!pagination.hasPrevPage\"\n      (click)=\"pagination.goFirst()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template #prevPageButton>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"!pagination.hasPrevPage\"\n      (click)=\"pagination.goPrev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template #nextPageButton>\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"!pagination.hasNextPage\"\n      (click)=\"pagination.goNext()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { pagination: [{
+            args: [{ selector: 'fs-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"pagination-container\"\n    [class]=\"'strategy-' + pagination.strategy\"\n    [ngClass]=\"{ \n      'paging': (paging$ | async),\n     }\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.pageRecords > 0) {\n    <ng-container *ngIf=\"pagination?.pages\"></ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"firstPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"prevPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n    </ng-container>\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of                                                                                                                                                                                                                                                                               {{ pagination.pages | fsFormatNumber }}\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"nextPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n    <ng-container\n      [ngTemplateOutlet]=\"lastPageButton\"\n      [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n    </ng-container>\n  }\n</ng-template>\n<ng-template #strategyMany>\n  <ng-container\n    [ngTemplateOutlet]=\"firstPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n  </ng-container>\n  <ng-container\n    [ngTemplateOutlet]=\"prevPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasPrevPage }\">\n  </ng-container>\n  <div class=\"number\">\n    {{ pagination.statusLabel }}\n  </div>\n  <ng-container\n    [ngTemplateOutlet]=\"nextPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n  </ng-container>\n  <ng-container\n    [ngTemplateOutlet]=\"lastPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: true }\">\n  </ng-container>\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.pagination-container.paging.strategy-many .number{visibility:hidden}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
+        }], propDecorators: { pagination: [{
                 type: Input
             }], rows: [{
                 type: Input
+            }], loading$: [{
+                type: Input
             }] } });
 
 class FsListContentInitDirective {
@@ -5630,7 +5676,7 @@ class FsListComponent {
         }
     }
     filterReady() {
-        this.list.filtersReady$.next(null);
+        this.list.filtersReady();
         this._filterParamsReady = true;
         this._emitFiltersReadyEvent();
     }
@@ -5761,7 +5807,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\n    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      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\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        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\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                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-container>\n            </ng-template>\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\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          <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          <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    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\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<ng-template #heading>\n  <div\n      class=\"heading-container\"\n      *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\n          class=\"heading\"\n          *ngIf=\"list.heading || headingTemplate\">\n        {{ list.heading }}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div\n          class=\"small subheading\"\n          *ngIf=\"list.subheading || subheadingTemplate\">\n        {{ list.subheading }}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>", 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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::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.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "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\n    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      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\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        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\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                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-container>\n            </ng-template>\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\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          <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          <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    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\"\n      [loading$]=\"list.loading$\">\n    </fs-list-pagination>\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<ng-template #heading>\n  <div\n      class=\"heading-container\"\n      *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\n          class=\"heading\"\n          *ngIf=\"list.heading || headingTemplate\">\n        {{ list.heading }}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div\n          class=\"small subheading\"\n          *ngIf=\"list.subheading || subheadingTemplate\">\n        {{ list.subheading }}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>", 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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::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.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "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", "loading$"] }, { 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,
@@ -5769,7 +5815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         GroupExpandNotifierService,
                         PersistanceController,
                         ReorderController,
-                    ], template: "<div\n    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      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\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        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\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                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-container>\n            </ng-template>\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\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          <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          <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    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\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<ng-template #heading>\n  <div\n      class=\"heading-container\"\n      *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\n          class=\"heading\"\n          *ngIf=\"list.heading || headingTemplate\">\n        {{ list.heading }}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div\n          class=\"small subheading\"\n          *ngIf=\"list.subheading || subheadingTemplate\">\n        {{ list.subheading }}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>", 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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::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"] }]
+                    ], template: "<div\n    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      'has-row-actions-hover': list.rowActionsHover,\n      'first-load': firstLoad,\n      'loading': list.loading$ | async\n    }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\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        @if (list.filterConfig) {\n          <fs-filter\n              class=\"fs-list-filter\"\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                  [list]=\"list\"\n                  [firstLoad]=\"firstLoad\">\n                </fs-list-status>\n              </ng-container>\n            </ng-template>\n          </fs-filter>\n        }\n      </div>\n    </div>\n    <ng-content select=\"[fs-list-content]\"></ng-content>\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          <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          <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    <fs-list-pagination\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\"\n      [loading$]=\"list.loading$\">\n    </fs-list-pagination>\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<ng-template #heading>\n  <div\n      class=\"heading-container\"\n      *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\n          class=\"heading\"\n          *ngIf=\"list.heading || headingTemplate\">\n        {{ list.heading }}\n        <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n      </h2>\n      <div\n          class=\"small subheading\"\n          *ngIf=\"list.subheading || subheadingTemplate\">\n        {{ list.subheading }}\n        <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>", 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}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.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-x:auto;overflow-y:hidden}::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
                 }, {