@fundamental-ngx/platform 0.48.0-rc.8 → 0.48.0

package/fesm2022/fundamental-ngx-platform-table-helpers.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, InjectionToken, Injectable, Inject, Directive, Optional, Input, inject, HostListener, Output, NgZone, ChangeDetectorRef, forwardRef, HostBinding, DestroyRef, ElementRef, Pipe, NgModule } from '@angular/core';
+import { EventEmitter, InjectionToken, signal, computed, Injectable, DestroyRef, inject, Inject, Directive, Optional, Input, HostListener, Output, NgZone, ChangeDetectorRef, forwardRef, HostBinding, ElementRef, Pipe, NgModule } from '@angular/core';
 import equal from 'fast-deep-equal';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@fundamental-ngx/cdk/utils';
 import { resizeObservable, RtlService, FDK_FOCUSABLE_ITEM_DIRECTIVE, FocusableItemDirective, KeyUtil, isString, dfs } from '@fundamental-ngx/cdk/utils';
+import { skip, debounceTime, filter, map, distinctUntilChanged, takeUntil, take, startWith, share, tap } from 'rxjs/operators';
 import { BehaviorSubject, Subject, Subscription, fromEvent, isObservable, Observable, filter as filter$1 } from 'rxjs';
-import { skip, debounceTime, takeUntil, filter, map, distinctUntilChanged, take, startWith, share, tap } from 'rxjs/operators';
 import { ContentDensityMode } from '@fundamental-ngx/core/content-density';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TableCellDirective } from '@fundamental-ngx/core/table';
 import { SPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import * as i1 from '@angular/forms';
@@ -72,19 +72,19 @@ class TableService {
         /** Table state stream. */
         this.tableState$ = new BehaviorSubject(DEFAULT_TABLE_STATE);
         /** @hidden */
-        this._semanticHighlighting$ = new BehaviorSubject('');
+        this._semanticHighlighting$ = signal('');
         /** @hidden */
-        this._isFilteringFromHeaderDisabled$ = new BehaviorSubject(false);
+        this._isFilteringFromHeaderDisabled$ = signal(false);
         /** @hidden */
-        this._isShownNavigationColumn$ = new BehaviorSubject(false);
+        this._isShownNavigationColumn$ = signal(false);
         /** @hidden */
-        this._semanticHighlightingColumnWidth$ = new BehaviorSubject(0);
+        this._semanticHighlightingColumnWidth$ = signal(0);
         /** Visible columns stream. */
-        this.visibleColumns$ = new BehaviorSubject([]);
+        this.visibleColumns$ = signal([]);
         /** Visible columns length. */
-        this.visibleColumnsLength = 0;
+        this.visibleColumnsLength = computed(() => this.visibleColumns$().length);
         /** Popping columns stream. */
-        this.poppingColumns$ = new BehaviorSubject([]);
+        this.poppingColumns$ = signal([]);
         /** Popping columns length. */
         this._poppingColumnsLength = 0;
         /** Table columns stream. */
@@ -116,16 +116,18 @@ class TableService {
         /** Listen for immediate changes in table subcomponents (mostly table column) */
         this.detectChanges$ = new Subject();
         /** Sort rules stream. */
-        this.sortRules$ = new BehaviorSubject(new Map());
+        this.sortRules$ = signal(new Map());
         /**
          * Filter Rules Map stream. Where key is column key, and value is the associated filter rules.
          * Many filters can be applied to one column.
          */
-        this.filterRules$ = new BehaviorSubject(new Map());
+        this.filterRules$ = signal(new Map());
         /**
          * Group Rules Map stream. Where key is column key and value is associated group rule
          */
-        this.groupRules$ = new BehaviorSubject(new Map());
+        this.groupRulesSubject = new BehaviorSubject(new Map());
+        /** Group Rules Map signal. */
+        this.groupRules$ = toSignal(this.groupRulesSubject);
     }
     /** Get current state/settings of the Table. */
     getTableState() {
@@ -339,15 +341,14 @@ class TableService {
      * @param columns Visible columns to share.
      */
     setVisibleColumns(columns) {
-        this.visibleColumns$.next(columns);
-        this.visibleColumnsLength = columns.length;
+        this.visibleColumns$.set(columns);
     }
     /**
      * Shares popping columns array across listeners.
      * @param columns Popping columns to share.
      */
     setPoppingColumns(columns) {
-        this.poppingColumns$.next(columns);
+        this.poppingColumns$.set(columns);
         this._poppingColumnsLength = columns.length;
     }
     /**
@@ -356,21 +357,21 @@ class TableService {
      */
     buildGroupRulesMap(state = this.getTableState()) {
         const groupMap = new Map(state.groupBy.map((rule) => [rule.field, rule]));
-        this.groupRules$.next(groupMap);
+        this.groupRulesSubject.next(groupMap);
     }
     /**
      * Constructs sorting rules based on the table state.
      * @param state Table state
      */
     buildSortRulesMap(state = this.getTableState()) {
-        this.sortRules$.next(new Map(state.sortBy.filter((rule) => rule.field).map((rule) => [rule.field, rule])));
+        this.sortRules$.set(new Map(state.sortBy.filter((rule) => rule.field).map((rule) => [rule.field, rule])));
     }
     /**
      * Constructs filter rules based on the table state.
      * @param state Table state.
      */
     buildFilterRulesMap(state = this.getTableState()) {
-        this.filterRules$.next(state.filterBy.reduce((hash, rule) => {
+        this.filterRules$.set(state.filterBy.reduce((hash, rule) => {
             const key = rule.field;
             if (!hash.has(key)) {
                 hash.set(key, []);
@@ -387,10 +388,10 @@ class TableService {
         this.buildSortRulesMap();
         this.buildFilterRulesMap();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }] });
 function setCurrentPageToState(state, currentPage) {
@@ -407,7 +408,7 @@ class TableResponsiveService {
         /** @hidden */
         this._responsiveBreakpoints = new Map();
         /** @hidden */
-        this._onDestroy$ = new Subject();
+        this._destroyRef = inject(DestroyRef);
     }
     /**
      * Registers responsive column with it's breakpoint configuration.
@@ -418,11 +419,6 @@ class TableResponsiveService {
         this._responsiveBreakpoints.set(column, this._normalizeBreakpoints(breakpoints));
         this._listenToTableResize();
     }
-    /** @hidden */
-    ngOnDestroy() {
-        this._onDestroy$.next();
-        this._onDestroy$.complete();
-    }
     /**
      * @hidden
      * Transforms plain breakpoints into a list with minimal/maximal element width with it's visibility state.
@@ -448,7 +444,7 @@ class TableResponsiveService {
     _listenToTableResize() {
         this._resizeSubscription?.unsubscribe();
         this._resizeSubscription = resizeObservable(this._elmRef.nativeElement)
-            .pipe(debounceTime(20), takeUntil(this._onDestroy$))
+            .pipe(debounceTime(20), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this._processResponsiveColumns();
         });
@@ -475,10 +471,10 @@ class TableResponsiveService {
         });
         this._tableService.columnsChange$.next({ previous: currentTableColumns, current: currentTableColumns });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableResponsiveService, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableResponsiveService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableResponsiveService, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableResponsiveService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableResponsiveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableResponsiveService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Table, decorators: [{
                     type: Inject,
@@ -510,10 +506,10 @@ class PlatformTableColumnResponsiveDirective {
         /** @hidden */
         this._breakpoints = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableColumnResponsiveDirective, deps: [{ token: TableResponsiveService }, { token: TableColumn, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: PlatformTableColumnResponsiveDirective, isStandalone: true, selector: "[fdpTableColumnResponsive]", inputs: { breakpoints: ["fdpTableColumnResponsive", "breakpoints"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlatformTableColumnResponsiveDirective, deps: [{ token: TableResponsiveService }, { token: TableColumn, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: PlatformTableColumnResponsiveDirective, isStandalone: true, selector: "[fdpTableColumnResponsive]", inputs: { breakpoints: ["fdpTableColumnResponsive", "breakpoints"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableColumnResponsiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlatformTableColumnResponsiveDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpTableColumnResponsive]',
@@ -538,10 +534,10 @@ class TableCellHeaderPopoverDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableCellHeaderPopoverDirective, isStandalone: true, selector: "[fdpTableCellHeaderPopover]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableCellHeaderPopoverDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableCellHeaderPopoverDirective, isStandalone: true, selector: "[fdpTableCellHeaderPopover]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableCellHeaderPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpTableCellHeaderPopover]',
@@ -596,10 +592,10 @@ class TableScrollDispatcherService {
         Array.from(this._scrollableSubscriptionsMap.values()).forEach((subscription) => subscription.unsubscribe());
         this._scrollableSubscriptionsMap.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableScrollDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableScrollDispatcherService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableScrollDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableScrollDispatcherService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableScrollDispatcherService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableScrollDispatcherService, decorators: [{
             type: Injectable
         }] });
 
@@ -628,13 +624,11 @@ class TableColumnResizeService {
         return this._fixedColumnsWidthMap.size === this._visibleColumnNames.length;
     }
     /** @hidden */
-    get _rtl() {
-        return this._rtlService?.rtl.getValue();
-    }
-    /** @hidden */
     constructor(_tableScrollDispatcherService, _rtlService) {
         this._tableScrollDispatcherService = _tableScrollDispatcherService;
         this._rtlService = _rtlService;
+        /** Subject that emits new map of fixed columns and their respective width. */
+        this.fixedColumsWidthChange = new BehaviorSubject(new Map());
         /** @hidden */
         this._fixedColumnsWidthMap = new Map();
         /** @hidden */
@@ -662,26 +656,26 @@ class TableColumnResizeService {
         /** @hidden */
         this._markForCheck = new Subject();
         /** @hidden */
-        this._destroyed = new Subject();
+        this._destroyed = inject(DestroyRef);
         /** @hidden */
         this._resizerMoveSubscription = new Subscription();
         /** Resize progress stream. */
         this.resizeInProgress$ = new BehaviorSubject(this._resizeInProgress);
         /** Whether cell mock should be visible. */
-        this.cellMockVisible$ = new BehaviorSubject(false);
+        this.cellMockVisible$ = signal(false);
         /** Resizer position stream. */
         this.resizerPosition$ = new BehaviorSubject(0);
+        /** @hidden */
+        this._rtl$ = computed(() => !!this._rtlService?.rtlSignal());
         this._tableScrollDispatcherService
             ?.horizontallyScrolled()
-            .pipe(takeUntil(this._destroyed))
+            .pipe(takeUntilDestroyed(this._destroyed))
             .subscribe((scrollable) => (this._scrollLeft = scrollable.getScrollLeft()));
     }
     /** @hidden */
     ngOnDestroy() {
         this._resizeInProgress = false;
         this.resizeInProgress$.next(false);
-        this._destroyed.next();
-        this._destroyed.complete();
         this._resizerMoveSubscription.unsubscribe();
     }
     /** @hidden */
@@ -766,6 +760,7 @@ class TableColumnResizeService {
     /** Register the value of column width that changed from  input */
     setCustomWidth(columnName, value) {
         this._fixedColumnsWidthMap.set(columnName, value);
+        this.fixedColumsWidthChange.next(this._fixedColumnsWidthMap);
     }
     /** Set the appropriate column resizer position. */
     setInitialResizerPosition(resizerPosition, resizedColumn) {
@@ -776,7 +771,7 @@ class TableColumnResizeService {
         this._resizerPosition = null;
         this.resizerPosition$.next(this.resizerPosition);
         if (resizerPosition != null) {
-            const scrollLeftOffset = this._scrollLeft * (this._rtl ? 1 : -1);
+            const scrollLeftOffset = this._scrollLeft * (this._rtl$() ? 1 : -1);
             this._resizerPosition = resizerPosition - TABLE_RESIZER_BORDER_WIDTH + scrollLeftOffset;
             this.resizerPosition$.next(this.resizerPosition);
         }
@@ -808,7 +803,7 @@ class TableColumnResizeService {
         this.resizerPosition$.next(this.resizerPosition);
         if (this._startX != null) {
             const clientStartX = this._clientStartX ?? 0;
-            const diffX = this._rtl ? clientStartX - event.clientX : event.clientX - clientStartX;
+            const diffX = this._rtl$() ? clientStartX - event.clientX : event.clientX - clientStartX;
             this._processResize(diffX);
         }
         this._startX = null;
@@ -831,6 +826,7 @@ class TableColumnResizeService {
                     this._fixedColumnsWidthMap.set(columnName, cells[0].nativeElement.getBoundingClientRect().width + 'px');
                 }
             }
+            this.fixedColumsWidthChange.next(this._fixedColumnsWidthMap);
         }
         /**
          * In case "_resizedColumn" is freezable, make sure the overall width of freezable columns does not exceed the width of the table.
@@ -853,9 +849,10 @@ class TableColumnResizeService {
         }
         const updatedWidth = columnWidth + diffX;
         this._fixedColumnsWidthMap.set(this._resizedColumn, updatedWidth + 'px');
+        this.fixedColumsWidthChange.next(this._fixedColumnsWidthMap);
         this.updateFrozenColumnsWidthAfterResize(this._resizedColumn, diffX);
-        const computed = window.getComputedStyle(resizedElement);
-        const padding = parseInt(computed.paddingLeft, 10) + parseInt(computed.paddingRight, 10);
+        const computedStyles = window.getComputedStyle(resizedElement);
+        const padding = parseInt(computedStyles.paddingLeft, 10) + parseInt(computedStyles.paddingRight, 10);
         this._updateHeaderOverflowState(updatedWidth - padding);
         this._markForCheck.next();
     }
@@ -865,7 +862,7 @@ class TableColumnResizeService {
             .pipe(debounceTime(10))
             .subscribe((event) => {
             const clientStartX = this._clientStartX ?? 0;
-            const diffX = this._rtl ? clientStartX - event.clientX : event.clientX - clientStartX;
+            const diffX = this._rtl$() ? clientStartX - event.clientX : event.clientX - clientStartX;
             this._resizerPosition = (this._startX ?? 0) + diffX;
             this.resizerPosition$.next(this.resizerPosition);
             this._markForCheck.next();
@@ -887,10 +884,10 @@ class TableColumnResizeService {
         }
         visibleColumn.headerOverflows = headerTextElem.scrollWidth > updatedWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableColumnResizeService, deps: [{ token: TableScrollDispatcherService }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableColumnResizeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableColumnResizeService, deps: [{ token: TableScrollDispatcherService }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableColumnResizeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableColumnResizeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableColumnResizeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: TableScrollDispatcherService }, { type: i2.RtlService, decorators: [{
                     type: Optional
@@ -901,29 +898,26 @@ const TABLE_CELL_RESIZABLE_THRESHOLD_PX = 4;
  * Tracks mouse movement over the cell if the mouse pointer near the side of the cell, informs resize service.
  */
 class PlatformTableCellResizableDirective extends TableCellDirective {
-    /** First column can be resized only by its end */
-    set resizableSide(value) {
-        if (!value) {
-            return;
-        }
-        this._resizableSide = value;
-    }
-    /** @hidden */
-    get _isRtl() {
-        return this._rtlService?.rtl.getValue() ?? false;
-    }
-    /** @hidden */
     constructor() {
-        super();
+        super(...arguments);
         /** @hidden */
         this._resizableSide = 'both';
         /** @hidden */
+        this._rtl$ = computed(() => !!this._rtlService?.rtlSignal());
+        /** @hidden */
         this._tableColumnResizeService = inject(TableColumnResizeService);
         /** @hidden */
         this._rtlService = inject(RtlService, {
             optional: true
         });
     }
+    /** First column can be resized only by its end */
+    set resizableSide(value) {
+        if (!value) {
+            return;
+        }
+        this._resizableSide = value;
+    }
     /** @hidden */
     ngOnInit() {
         this._zone.runOutsideAngular(() => {
@@ -956,20 +950,20 @@ class PlatformTableCellResizableDirective extends TableCellDirective {
         const elPosition = el.getBoundingClientRect();
         let resizerPosition;
         let resizedColumn;
-        const pointerOnLeft = this._isRtl
+        const pointerOnLeft = this._rtl$()
             ? elPosition.right - event.clientX < TABLE_CELL_RESIZABLE_THRESHOLD_PX
             : event.clientX - elPosition.left < TABLE_CELL_RESIZABLE_THRESHOLD_PX;
         if (pointerOnLeft && this._resizableSide !== 'end') {
-            resizerPosition = this._isRtl
+            resizerPosition = this._rtl$()
                 ? el.parentElement.offsetWidth - (el.offsetLeft + el.offsetWidth)
                 : el.offsetLeft;
             resizedColumn = this._tableColumnResizeService.getPreviousColumnName(this.columnName);
         }
-        const pointerOnRight = this._isRtl
+        const pointerOnRight = this._rtl$()
             ? event.clientX - elPosition.left < TABLE_CELL_RESIZABLE_THRESHOLD_PX
             : elPosition.right - event.clientX < TABLE_CELL_RESIZABLE_THRESHOLD_PX;
         if (pointerOnRight && this._resizableSide !== 'start') {
-            resizerPosition = this._isRtl
+            resizerPosition = this._rtl$()
                 ? el.parentElement.offsetWidth - el.offsetLeft
                 : el.offsetLeft + el.offsetWidth;
             resizedColumn = this.columnName;
@@ -979,8 +973,8 @@ class PlatformTableCellResizableDirective extends TableCellDirective {
         }
         return { resizerPosition: resizerPosition, resizedColumn };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableCellResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: PlatformTableCellResizableDirective, isStandalone: true, selector: "[fdpTableCellResizable]", inputs: { resizableSide: ["fdpTableCellResizable", "resizableSide"], columnName: "columnName" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlatformTableCellResizableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: PlatformTableCellResizableDirective, isStandalone: true, selector: "[fdpTableCellResizable]", inputs: { resizableSide: ["fdpTableCellResizable", "resizableSide"], columnName: "columnName" }, providers: [
             {
                 provide: FDK_FOCUSABLE_ITEM_DIRECTIVE,
                 useExisting: PlatformTableCellResizableDirective
@@ -995,7 +989,7 @@ class PlatformTableCellResizableDirective extends TableCellDirective {
             }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableCellResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlatformTableCellResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpTableCellResizable]',
@@ -1015,7 +1009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { resizableSide: [{
+        }], propDecorators: { resizableSide: [{
                 type: Input,
                 args: ['fdpTableCellResizable']
             }], columnName: [{
@@ -1037,10 +1031,10 @@ class FdpCellSelectableDirective {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpCellSelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpCellSelectableDirective, isStandalone: true, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: { enabled: "enabled" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpCellSelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpCellSelectableDirective, isStandalone: true, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: { enabled: "enabled" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpCellSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpCellSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1061,10 +1055,10 @@ class EditableTableCell {
 // eslint-disable-next-line @angular-eslint/directive-selector
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class FdpTableCell {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpTableCell, isStandalone: true, selector: "fdp-table-cell", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpTableCell, isStandalone: true, selector: "fdp-table-cell", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpTableCell, decorators: [{
             type: Directive,
             args: [{ selector: 'fdp-table-cell', standalone: true }]
         }] });
@@ -1082,10 +1076,10 @@ class FdpCellDef {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpCellDef, isStandalone: true, selector: "[fdpCellDef]", inputs: { fdpCellDefAs: "fdpCellDefAs" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpCellDef, isStandalone: true, selector: "[fdpCellDef]", inputs: { fdpCellDefAs: "fdpCellDefAs" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpCellDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpCellDef, decorators: [{
             type: Directive,
             args: [{ selector: '[fdpCellDef]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { fdpCellDefAs: [{
@@ -1097,10 +1091,10 @@ class FdpEditableCellDef {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpEditableCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpEditableCellDef, isStandalone: true, selector: "[fdpEditableCellDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpEditableCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpEditableCellDef, isStandalone: true, selector: "[fdpEditableCellDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpEditableCellDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpEditableCellDef, decorators: [{
             type: Directive,
             args: [{ selector: '[fdpEditableCellDef]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -1109,10 +1103,10 @@ class FdpEditableCellFormDirective {
     constructor(form) {
         this.form = form;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpEditableCellFormDirective, deps: [{ token: i1.NgForm }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpEditableCellFormDirective, isStandalone: true, selector: "[fdpEditableCellForm]", providers: [{ provide: EditableTableCell, useExisting: FdpEditableCellFormDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpEditableCellFormDirective, deps: [{ token: i1.NgForm }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpEditableCellFormDirective, isStandalone: true, selector: "[fdpEditableCellForm]", providers: [{ provide: EditableTableCell, useExisting: FdpEditableCellFormDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpEditableCellFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpEditableCellFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpEditableCellForm]',
@@ -1941,7 +1935,7 @@ class TableDataSourceDirective extends DataSourceDirective {
         /** Event emitted when data loading is finished. */
         this.onDataReceived = new EventEmitter();
         /** Total items count stream. */
-        this.totalItems$ = new BehaviorSubject(0);
+        this.totalItems$ = signal(0);
         /** Items stream. */
         this.items$ = new BehaviorSubject([]);
         /** Child items stream. */
@@ -1975,10 +1969,10 @@ class TableDataSourceDirective extends DataSourceDirective {
     }
     /** @hidden */
     set totalItems(value) {
-        this.totalItems$.next(value);
+        this.totalItems$.set(value);
     }
     get totalItems() {
-        return this.totalItems$.value;
+        return this.totalItems$();
     }
     /** @hidden */
     initializeDataSource() {
@@ -2040,7 +2034,7 @@ class TableDataSourceDirective extends DataSourceDirective {
             throw new Error(`[TableDataSource] source did not match an Array, Observable, nor DataSource`);
         }
         this._tableDsSubscription.add(this.dataChanged$.subscribe((items) => {
-            this.totalItems$.next(dataSourceStream.dataProvider.totalItems);
+            this.totalItems$.set(dataSourceStream.dataProvider.totalItems);
             this.items$.next(items);
         }));
         this._tableDsSubscription.add(dataSourceStream.onDataRequested().subscribe(() => {
@@ -2080,16 +2074,17 @@ class TableDataSourceDirective extends DataSourceDirective {
         this._tableDataSource.close();
         this._tableDsSubscription?.unsubscribe();
         this._tableDsSubscription = null;
+        this._table.clearTableRows();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableDataSourceDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableDataSourceDirective, isStandalone: true, selector: "[fdpTableDataSource]", inputs: { childDataSource: "childDataSource" }, outputs: { childDataSourceChanged: "childDataSourceChanged", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableDataSourceDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableDataSourceDirective, isStandalone: true, selector: "[fdpTableDataSource]", inputs: { childDataSource: "childDataSource" }, outputs: { childDataSourceChanged: "childDataSourceChanged", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, providers: [
             {
                 provide: FD_DATA_SOURCE_TRANSFORMER,
                 useClass: TableDataSourceParser
             }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableDataSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableDataSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpTableDataSource]',
@@ -2959,15 +2954,15 @@ class TableDraggableDirective extends TableDraggable {
             callback();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableDraggableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableDraggableDirective, isStandalone: true, selector: "fdp-table[isTreeTable], fdp-table[enableRowReordering]", inputs: { enableRowReordering: "enableRowReordering", isTreeTable: "isTreeTable", dropMode: "dropMode", dropPredicate: "dropPredicate", dragoverPredicate: "dragoverPredicate" }, outputs: { rowsRearrange: "rowsRearrange" }, host: { properties: { "class.fd-table--tree": "this.isTreeTable" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableDraggableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableDraggableDirective, isStandalone: true, selector: "fdp-table[isTreeTable], fdp-table[enableRowReordering]", inputs: { enableRowReordering: "enableRowReordering", isTreeTable: "isTreeTable", dropMode: "dropMode", dropPredicate: "dropPredicate", dragoverPredicate: "dragoverPredicate" }, outputs: { rowsRearrange: "rowsRearrange" }, host: { properties: { "class.fd-table--tree": "this.isTreeTable" } }, providers: [
             {
                 provide: FDP_TABLE_DRAGGABLE_DIRECTIVE,
                 useExisting: forwardRef(() => TableDraggableDirective)
             }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableDraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableDraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3089,10 +3084,10 @@ class TableRowService {
         }
         this.loadChildRows$.next(expandableRows);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableRowService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableRowService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableRowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableRowService, decorators: [{
             type: Injectable
         }] });
 
@@ -3167,10 +3162,10 @@ class TableHeaderResizerDirective {
     _onCellFocused(position) {
         this.focusedCellPosition = { rowIndex: position.rowIndex, colIndex: position.colIndex };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableHeaderResizerDirective, isStandalone: true, selector: "[fdpTableHeaderResizer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableHeaderResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableHeaderResizerDirective, isStandalone: true, selector: "[fdpTableHeaderResizer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderResizerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableHeaderResizerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpTableHeaderResizer]',
@@ -3182,10 +3177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
 // eslint-disable-next-line @angular-eslint/directive-selector
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class FdpTableHeader {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpTableHeader, isStandalone: true, selector: "fdp-table-header", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpTableHeader, isStandalone: true, selector: "fdp-table-header", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpTableHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpTableHeader, decorators: [{
             type: Directive,
             args: [{ selector: 'fdp-table-header', standalone: true }]
         }] });
@@ -3203,10 +3198,10 @@ class FdpHeaderCellDef {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpHeaderCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpHeaderCellDef, isStandalone: true, selector: "[fdpHeaderCellDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpHeaderCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpHeaderCellDef, isStandalone: true, selector: "[fdpHeaderCellDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpHeaderCellDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpHeaderCellDef, decorators: [{
             type: Directive,
             args: [{ selector: '[fdpHeaderCellDef]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -3244,7 +3239,7 @@ class TableInitialStateDirective extends TableInitialState {
         const columns = this._table.getTableColumns();
         const page = prevState.page;
         const visibleColumns = this.initialVisibleColumns ||
-            (prevState.columns.length ? prevState.columns : columns.map(({ name }) => name));
+            (prevState.columns.length ? prevState.columns : columns.filter((c) => c.visible).map(({ name }) => name));
         const directiveInitialPage = this.initialPage ?? 1;
         this._table._loadPreviousPages =
             this._table.pageScrolling && this._table.loadPagesBefore && directiveInitialPage > 1;
@@ -3278,15 +3273,15 @@ class TableInitialStateDirective extends TableInitialState {
     setTableState(state) {
         this._tableService.setTableState(state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableInitialStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableInitialStateDirective, isStandalone: true, selector: "[fdpTableInitialState],\n    fdp-table", inputs: { initialVisibleColumns: "initialVisibleColumns", initialSortBy: "initialSortBy", initialFilterBy: "initialFilterBy", initialGroupBy: "initialGroupBy", initialPage: "initialPage", state: "state" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableInitialStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableInitialStateDirective, isStandalone: true, selector: "[fdpTableInitialState],\n    fdp-table", inputs: { initialVisibleColumns: "initialVisibleColumns", initialSortBy: "initialSortBy", initialFilterBy: "initialFilterBy", initialGroupBy: "initialGroupBy", initialPage: "initialPage", state: "state" }, providers: [
             {
                 provide: FDP_TABLE_STATE_DIRECTIVE,
                 useExisting: TableInitialStateDirective
             }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableInitialStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableInitialStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[fdpTableInitialState],
@@ -3451,10 +3446,10 @@ class TableScrollableDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableScrollableDirective, deps: [{ token: i0.ElementRef }, { token: TableScrollDispatcherService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableScrollableDirective, isStandalone: true, selector: "[fdpTableScrollable]", providers: [{ provide: TABLE_SCROLLABLE, useExisting: forwardRef(() => TableScrollableDirective) }], exportAs: ["tableScrollable"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableScrollableDirective, deps: [{ token: i0.ElementRef }, { token: TableScrollDispatcherService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableScrollableDirective, isStandalone: true, selector: "[fdpTableScrollable]", providers: [{ provide: TABLE_SCROLLABLE, useExisting: forwardRef(() => TableScrollableDirective) }], exportAs: ["tableScrollable"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableScrollableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpTableScrollable]',
@@ -3474,10 +3469,10 @@ class FdpViewSettingsFilterCustomDef {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpViewSettingsFilterCustomDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: FdpViewSettingsFilterCustomDef, isStandalone: true, selector: "[fdpViewSettingsFilterCustomDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpViewSettingsFilterCustomDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: FdpViewSettingsFilterCustomDef, isStandalone: true, selector: "[fdpViewSettingsFilterCustomDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FdpViewSettingsFilterCustomDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FdpViewSettingsFilterCustomDef, decorators: [{
             type: Directive,
             args: [{ selector: '[fdpViewSettingsFilterCustomDef]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -3565,15 +3560,15 @@ class TableVirtualScrollDirective extends TableVirtualScroll {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableVirtualScrollDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TableVirtualScrollDirective, isStandalone: true, selector: "fdp-table[virtualScroll]", inputs: { virtualScroll: "virtualScroll", renderAhead: "renderAhead", bodyHeight: "bodyHeight", rowHeight: "rowHeight" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableVirtualScrollDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: TableVirtualScrollDirective, isStandalone: true, selector: "fdp-table[virtualScroll]", inputs: { virtualScroll: "virtualScroll", renderAhead: "renderAhead", bodyHeight: "bodyHeight", rowHeight: "rowHeight" }, providers: [
             {
                 provide: FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE,
                 useExisting: TableVirtualScrollDirective
             }
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableVirtualScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableVirtualScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3628,10 +3623,10 @@ class TableCellStylesPipe {
         }
         return styles;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: TableCellStylesPipe, isStandalone: true, name: "tableCellStyles" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TableCellStylesPipe, isStandalone: true, name: "tableCellStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableCellStylesPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'tableCellStyles', standalone: true }]
         }] });
@@ -3648,10 +3643,10 @@ class ColumnResizableSidePipe {
         }
         return 'both';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ColumnResizableSidePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ColumnResizableSidePipe, isStandalone: true, name: "columnResizableSide" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ColumnResizableSidePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ColumnResizableSidePipe, isStandalone: true, name: "columnResizableSide" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ColumnResizableSidePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ColumnResizableSidePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'columnResizableSide', standalone: true }]
         }] });
@@ -3669,10 +3664,10 @@ class TableColumnSortingDirectionPipe {
         }
         return ARIA_SORT[sorting.direction];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableColumnSortingDirectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: TableColumnSortingDirectionPipe, isStandalone: true, name: "fdpTableColumnSortingDirection" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableColumnSortingDirectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TableColumnSortingDirectionPipe, isStandalone: true, name: "fdpTableColumnSortingDirection" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableColumnSortingDirectionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableColumnSortingDirectionPipe, decorators: [{
             type: Pipe,
             args: [{
                     pure: true,
@@ -3702,10 +3697,10 @@ class RowClassesPipe {
         }
         return rowClasses.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: RowClassesPipe, isStandalone: true, name: "rowClasses" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: RowClassesPipe, isStandalone: true, name: "rowClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RowClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RowClassesPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rowClasses', standalone: true }]
         }] });
@@ -3724,10 +3719,10 @@ class SelectionCellStylesPipe {
             'max-width': selectionColumnWidth
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SelectionCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: SelectionCellStylesPipe, isStandalone: true, name: "selectionCellStyles" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SelectionCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: SelectionCellStylesPipe, isStandalone: true, name: "selectionCellStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SelectionCellStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SelectionCellStylesPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'selectionCellStyles', standalone: true }]
         }] });
@@ -3759,8 +3754,8 @@ const importExports = [
     RowClassesPipe
 ];
 class TableHelpersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHelpersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: TableHelpersModule, imports: [TableInitialStateDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableHelpersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TableHelpersModule, imports: [TableInitialStateDirective,
             TableDraggableDirective,
             TableVirtualScrollDirective,
             PlatformTableColumnResponsiveDirective,
@@ -3807,9 +3802,9 @@ class TableHelpersModule {
             TableCellStylesPipe,
             ColumnResizableSidePipe,
             RowClassesPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHelpersModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableHelpersModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHelpersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TableHelpersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...importExports],