@firestitch/list 18.0.17 → 18.0.19

package/fesm2022/firestitch-list.mjs

@@ -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;
+        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 = this.hasManyStrategy ?
-            current + this.limit :
-            Math.min(this.records, current + this.limit);
-        return `${from}-${to}`;
+        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 {
@@ -5346,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: [{
@@ -5402,31 +5426,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsPaginationComponent {
-    _cdRef;
     pagination;
     rows;
-    _destroy$ = new Subject();
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
+    first() {
+        this.pagination.goFirst();
     }
-    ngOnInit() {
-        merge(this.pagination.pageChanged$, this.pagination.pages$)
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._cdRef.markForCheck();
-        });
+    prev() {
+        this.pagination.goPrev();
     }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
+    next() {
+        this.pagination.goNext();
+    }
+    last() {
+        this.pagination.goLast();
     }
-    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" }, ngImport: i0, template: "<div class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.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.page }}\n  </div>\n  <ng-container\n    [ngTemplateOutlet]=\"nextPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n  </ng-container>\n  <ng-container\n    [ngTemplateOutlet]=\"lastPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: true }\">\n  </ng-container>\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i5$1.FsFormatNumberPipe, name: "fsFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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 class=\"pagination-container\">\n  @if (pagination.hasManyStrategy) {\n    <ng-container *ngTemplateOutlet=\"strategyMany\"></ng-container>\n  } @else if (pagination.loadMoreEnabled) {\n    <ng-container *ngTemplateOutlet=\"strategyLoadMore\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"strategyOffsetPage\"></ng-container>\n  }\n</div>\n<ng-template #strategyLoadMore>\n  @if (pagination.hasNextPage) {\n    <div class=\"fs-list-load-more\">\n      <button\n          mat-button\n          type=\"button\"\n          [class]=\"pagination.loadMoreButtonClass\"\n          [color]=\"pagination.loadMoreButtonColor\"\n          (click)=\"next()\">\n        {{ pagination.loadMoreLabel }}\n      </button>\n    </div>\n  }\n</ng-template>\n<ng-template #strategyOffsetPage>\n  @if (pagination.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.page }}\n  </div>\n  <ng-container\n    [ngTemplateOutlet]=\"nextPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: !pagination.hasNextPage }\">\n  </ng-container>\n  <ng-container\n    [ngTemplateOutlet]=\"lastPageButton\"\n    [ngTemplateOutletContext]=\"{ disabled: true }\">\n  </ng-container>\n</ng-template>\n<ng-template\n    #firstPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"first\"\n      [class.disabled]=\"disabled\"\n      (click)=\"first()\">\n    <mat-icon>\n      first_page\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #prevPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"previous\"\n      [class.disabled]=\"disabled\"\n      (click)=\"prev()\">\n    <mat-icon>\n      keyboard_arrow_left\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #nextPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"next\"\n      [class.disabled]=\"disabled\"\n      (click)=\"next()\">\n    <mat-icon>\n      keyboard_arrow_right\n    </mat-icon>\n  </a>\n</ng-template>\n<ng-template\n    #lastPageButton\n    let-disabled=\"disabled\">\n  <a\n      matRipple\n      [matRippleRadius]=\"15\"\n      [matRippleCentered]=\"true\"\n      class=\"last\"\n      [class.disabled]=\"disabled\"\n      (click)=\"last()\">\n    <mat-icon>\n      last_page\n    </mat-icon>\n  </a>\n</ng-template>", styles: [".pagination-container{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
+        }], propDecorators: { pagination: [{
                 type: Input
             }], rows: [{
                 type: Input
@@ -5635,7 +5655,7 @@ class FsListComponent {
         }
     }
     filterReady() {
-        this.list.filtersReady$.next(null);
+        this.list.filtersReady();
         this._filterParamsReady = true;
         this._emitFiltersReadyEvent();
     }