integra-ng 21.0.26 → 21.0.27

package/fesm2022/integra-ng.mjs

@@ -7573,7 +7573,8 @@ class ITable {
     el;
     // ===== DATA DISPLAY =====
     /**
-     * Table data as a signal input
+     * Table data — either a plain row array or a {@link TableData} object
+     * that bundles rows with actions and a handler.
      */
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     /**
@@ -7677,19 +7678,9 @@ class ITable {
      */
     onRowUnselect = new EventEmitter();
     // ===== ROW ACTIONS =====
-    /**
-     * Show action column
-     * @default false
-     */
-    showActions = false;
-    /**
-     * Action button definitions
-     */
-    actions = [];
-    /**
-     * Event emitted when an action is clicked
-     */
-    onAction = new EventEmitter();
+    // Actions are now embedded in [data] (TableData.actions / TableData.onAction)
+    // and in each TableGroup (groupActions/onGroupAction, rowActions/onRowAction).
+    // No separate @Input or @Output is needed.
     // ===== VISUAL FEATURES =====
     /**
      * Show striped rows
@@ -7869,12 +7860,35 @@ class ITable {
             }
         });
     }
+    // ===== DERIVED DATA =====
+    /**
+     * Extracts the plain row array from data (handles both TableData and any[]).
+     * @internal
+     */
+    tableRows = computed(() => {
+        const d = this.data();
+        return Array.isArray(d) ? d : (d.rows ?? []);
+    }, ...(ngDevMode ? [{ debugName: "tableRows" }] : []));
+    /**
+     * Extracts action buttons from data (only populated when data is a TableData).
+     * @internal
+     */
+    tableRowActions = computed(() => {
+        const d = this.data();
+        return Array.isArray(d) ? [] : (d.actions ?? []);
+    }, ...(ngDevMode ? [{ debugName: "tableRowActions" }] : []));
+    /**
+     * Whether any group in groupedData has parent summary-row actions.
+     * Used to decide whether to render the actions column in the grouped table header.
+     * @internal
+     */
+    hasAnyGroupActions = computed(() => this.groupedData().some((g) => (g.groupActions?.length ?? 0) > 0), ...(ngDevMode ? [{ debugName: "hasAnyGroupActions" }] : []));
     /**
      * Computed filtered and sorted data
      * @internal
      */
     processedData = computed(() => {
-        let result = [...(this.data() || [])];
+        let result = [...(this.tableRows() || [])];
         // Apply global filter
         const globalFilter = this.globalFilterValue();
         if (globalFilter) {
@@ -8220,12 +8234,27 @@ class ITable {
     }
     // ===== ACTION METHODS =====
     /**
-     * Handles action button click
+     * Handles action button click on a regular (non-grouped) row.
+     * Calls the onAction handler embedded in the TableData.
      * @internal
      */
     onActionClick(action, row, event) {
         event.stopPropagation();
-        this.onAction.emit({ action: action.id, row });
+        const d = this.data();
+        if (!Array.isArray(d) && d.onAction) {
+            d.onAction({ action: action.id, row });
+        }
+    }
+    /**
+     * Handles action button click on a parent group summary row.
+     * Calls the group's onGroupAction handler.
+     * @internal
+     */
+    onGroupActionClick(group, action, event) {
+        event.stopPropagation();
+        if (group.onGroupAction) {
+            group.onGroupAction({ action: action.id, row: group.row ?? {} });
+        }
     }
     /**
      * Checks if an action is disabled for a row
@@ -8365,6 +8394,20 @@ class ITable {
     getGroupColumns(group) {
         return group.columns || this.columns();
     }
+    /**
+     * Builds a TableData object for the nested <i-table> inside an expanded group.
+     * If the group has no child row actions, returns the plain data array.
+     * @internal
+     */
+    getGroupTableData(group) {
+        if (!group.rowActions?.length)
+            return group.data;
+        return {
+            rows: group.data,
+            actions: group.rowActions,
+            onAction: group.onRowAction,
+        };
+    }
     /**
      * Checks if table is in grouped mode
      * @internal
@@ -8619,7 +8662,7 @@ class ITable {
         return 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              placeholder=\"Search...\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"false\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"i-table-loading-overlay\">\n      <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n    </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n      <!-- Sticky Header Table (outside viewport) -->\n      <div class=\"i-table-virtual-header\">\n        <table class=\"i-table\">\n          <thead>\n            <!-- Column Filters Row -->\n            @if (filterable) {\n              <tr class=\"i-table-filter-row\">\n                @if (selectionMode === \"multiple\") {\n                  <th class=\"i-table-selection-header\"></th>\n                }\n                @if (rowExpandable) {\n                  <th class=\"i-table-expand-header\"></th>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  @if (column.filterable !== false) {\n                    <th [style.width]=\"getColumnWidth(column)\">\n                      <input\n                        type=\"text\"\n                        class=\"i-table-column-filter\"\n                        placeholder=\"Filter...\"\n                        [ngModel]=\"columnFilters()[column.field] || ''\"\n                        (ngModelChange)=\"\n                          onColumnFilterInput(column.field, $event)\n                        \"\n                      />\n                    </th>\n                  } @else {\n                    <th [style.width]=\"getColumnWidth(column)\"></th>\n                  }\n                }\n                @if (showActions && actions.length > 0) {\n                  <th class=\"i-table-actions-header\"></th>\n                }\n              </tr>\n            }\n\n            <!-- Column Headers Row -->\n            <tr>\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\">\n                  <i-checkbox\n                    [checked]=\"areAllRowsSelected()\"\n                    [indeterminate]=\"areSomeRowsSelected()\"\n                    (onChange)=\"toggleAllSelection()\"\n                  ></i-checkbox>\n                </th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\">Actions</th>\n              }\n            </tr>\n          </thead>\n        </table>\n      </div>\n\n      <!-- Virtual Scroll Viewport (body only) -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        <table class=\"i-table i-table-virtual-body\">\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            }\n            <!-- Virtual Scroll Rows -->\n            <tr\n              *cdkVirtualFor=\"\n                let row of processedData();\n                let rowIndex = index;\n                trackBy: trackByRow\n              \"\n              [style.height.px]=\"virtualScrollItemSize\"\n              [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n              [class.i-table-row-selected]=\"isRowSelected(row)\"\n              (click)=\"toggleRowSelection(row)\"\n            >\n              @if (selectionMode === \"multiple\") {\n                <td class=\"i-table-selection-cell\">\n                  <i-checkbox\n                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @if (rowExpandable) {\n                <td class=\"i-table-expand-cell\">\n                  <i-button\n                    severity=\"secondary\"\n                    [text]=\"true\"\n                    size=\"xtra-small\"\n                    [icon]=\"\n                      isRowExpanded(row)\n                        ? 'pi pi-chevron-down'\n                        : 'pi pi-chevron-right'\n                    \"\n                    (clicked)=\"toggleRowExpansion(row, $event)\"\n                  ></i-button>\n                </td>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (showActions && actions.length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of actions; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"onActionClick(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else if (isGroupedMode()) {\n      <!-- Grouped Mode: single scrollable table \u2014 group summary rows expand to reveal nested tables -->\n      <table class=\"i-table\">\n        <thead>\n          <!-- Outer filter row -->\n          @if (filterable && groupColumns().length > 0) {\n            <tr class=\"i-table-filter-row\">\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of groupColumns();\n                track trackByColumn($index, column)\n              ) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n              <th class=\"i-table-group-count-header\"></th>\n            </tr>\n          }\n\n          <!-- Group column header row -->\n          <tr>\n            <th class=\"i-table-expand-header\"></th>\n            @if (groupColumns().length === 0) {\n              <th>Group</th>\n            } @else {\n              @for (\n                column of groupColumns();\n                track trackByColumn($index, column)\n              ) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n            }\n            @if (showActions && actions.length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n            <th class=\"i-table-group-count-header\"></th>\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (groupedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td\n                [attr.colspan]=\"\n                  (groupColumns().length || 1) +\n                  1 +\n                  1 +\n                  (showActions && actions.length > 0 ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (group of groupedData(); track $index) {\n            <!-- Group summary row -->\n            <tr\n              class=\"i-table-group-summary-row\"\n              [ngClass]=\"group.styleClass\"\n              [class.i-table-group-expanded]=\"isGroupExpanded(group.label)\"\n              (click)=\"toggleGroupExpansion(group.label)\"\n            >\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isGroupExpanded(group.label)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  (clicked)=\"\n                    toggleGroupExpansion(group.label); $event.stopPropagation()\n                  \"\n                ></i-button>\n              </td>\n              @if (groupColumns().length === 0) {\n                <!-- No groupColumns: show label + count in a single cell -->\n                <td>\n                  <div class=\"i-table-group-header-content\">\n                    <span class=\"i-table-group-label\">{{ group.label }}</span>\n                    <span class=\"i-table-group-count\"\n                      >({{ group.data.length }})</span\n                    >\n                  </div>\n                </td>\n              } @else {\n                @for (\n                  column of groupColumns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(group.row ?? {}, column)\n                        ? 'i-table-cell-' +\n                          getCellSeverity(group.row ?? {}, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(group.row ?? {}, column)\"\n                        [class.i-severity-icon]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(group.row ?? {}, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <td\n                  class=\"i-table-actions-cell\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <div class=\"i-table-actions\">\n                    @for (action of actions; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, group.row ?? {})\"\n                        [iTooltip]=\"getActionTooltip(action, group.row ?? {})\"\n                        [class.i-action-hidden]=\"\n                          !isActionVisible(action, group.row ?? {})\n                        \"\n                        (clicked)=\"\n                          onActionClick(action, group.row ?? {}, $event)\n                        \"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n              <td\n                class=\"i-table-group-count-cell\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <span class=\"i-table-group-count\"\n                  >({{ group.data.length }})</span\n                >\n              </td>\n            </tr>\n\n            <!-- Group detail row (visible when expanded) -->\n            @if (isGroupExpanded(group.label)) {\n              <tr class=\"i-table-group-detail-row\">\n                <td\n                  [attr.colspan]=\"\n                    (groupColumns().length || 1) +\n                    1 +\n                    1 +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                  class=\"i-table-group-detail-cell\"\n                >\n                  <i-table\n                    [data]=\"group.data\"\n                    [columns]=\"getGroupColumns(group)\"\n                    [sortable]=\"sortable\"\n                    [filterable]=\"filterable\"\n                    [showActions]=\"showActions\"\n                    [actions]=\"actions\"\n                    [selectionMode]=\"selectionMode\"\n                    [selection]=\"selection\"\n                    [striped]=\"striped\"\n                    [hoverable]=\"hoverable\"\n                    [bordered]=\"bordered\"\n                    [size]=\"size\"\n                    [dataKey]=\"dataKey\"\n                    [rowExpandable]=\"rowExpandable\"\n                    [resizableColumns]=\"resizableColumns\"\n                    (onSort)=\"onSort.emit($event)\"\n                    (onFilter)=\"onFilter.emit($event)\"\n                    (onAction)=\"onAction.emit($event)\"\n                    (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                    (selectionChange)=\"selectionChange.emit($event)\"\n                    (onRowSelect)=\"onRowSelect.emit($event)\"\n                    (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    (onRowExpand)=\"onRowExpand.emit($event)\"\n                    (onRowCollapse)=\"onRowCollapse.emit($event)\"\n                  ></i-table>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    } @else {\n      <!-- Non-Virtual Scroll Table -->\n      <table class=\"i-table\">\n        <!-- Table Header (sticky when scrollable) -->\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @if (rowExpandable) {\n              <th class=\"i-table-expand-header\"></th>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (showActions && actions.length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Table Body - Regular Mode -->\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td\n                [attr.colspan]=\"\n                  columns().length +\n                  (selectionMode === 'multiple' ? 1 : 0) +\n                  (rowExpandable ? 1 : 0) +\n                  (showActions && actions.length > 0 ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          } @else {\n            @for (\n              row of processedData();\n              track trackByRow($index, row);\n              let rowIndex = $index\n            ) {\n              <tr\n                [class.i-table-row-odd]=\"$odd\"\n                [class.i-table-row-selected]=\"isRowSelected(row)\"\n                (click)=\"toggleRowSelection(row)\"\n              >\n                @if (selectionMode === \"multiple\") {\n                  <td class=\"i-table-selection-cell\">\n                    <i-checkbox\n                      [checked]=\"isRowSelected(row)\"\n                      (onChange)=\"toggleRowSelection(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                    ></i-checkbox>\n                  </td>\n                }\n                @if (rowExpandable) {\n                  <td class=\"i-table-expand-cell\">\n                    <i-button\n                      severity=\"secondary\"\n                      [text]=\"true\"\n                      size=\"xtra-small\"\n                      [icon]=\"\n                        isRowExpanded(row)\n                          ? 'pi pi-chevron-down'\n                          : 'pi pi-chevron-right'\n                      \"\n                      (clicked)=\"toggleRowExpansion(row, $event)\"\n                    ></i-button>\n                  </td>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(row, column)\n                        ? 'i-table-cell-' + getCellSeverity(row, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(row, column)\"\n                        [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else if (isListColumn(column)) {\n                      <div class=\"i-table-list-cell\">\n                        @for (\n                          item of getCellListItems(row, column);\n                          track item\n                        ) {\n                          <i-chip [label]=\"item\"></i-chip>\n                        }\n                      </div>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(row, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n                @if (showActions && actions.length > 0) {\n                  <td class=\"i-table-actions-cell\">\n                    <div class=\"i-table-actions\">\n                      @for (action of actions; track action.id) {\n                        <i-button\n                          [severity]=\"action.severity || 'secondary'\"\n                          [text]=\"true\"\n                          size=\"small\"\n                          [icon]=\"action.icon || ''\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [iTooltip]=\"getActionTooltip(action, row)\"\n                          [class.i-action-hidden]=\"\n                            !isActionVisible(action, row)\n                          \"\n                          (clicked)=\"onActionClick(action, row, $event)\"\n                        >\n                          @if (action.label) {\n                            {{ action.label }}\n                          }\n                        </i-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n              <!-- Expanded Row Content -->\n              @if (rowExpandable && isRowExpanded(row)) {\n                <tr class=\"i-table-expanded-row\">\n                  <td\n                    [attr.colspan]=\"\n                      columns().length +\n                      (selectionMode === 'multiple' ? 1 : 0) +\n                      1 +\n                      (showActions && actions.length > 0 ? 1 : 0)\n                    \"\n                  >\n                    <div class=\"i-table-expanded-content\">\n                      <pre>{{ row | json }}</pre>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          }\n        </tbody>\n      </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["data", "columns", "groupedData", "groupColumns", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "showActions", "actions", "striped", "hoverable", "bordered", "size", "loading", "scrollable", "scrollHeight", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "reorderableColumns", "rowExpandable", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onAction", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }, { kind: "pipe", type: i0.forwardRef(() => i1$1.JsonPipe), name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              placeholder=\"Search...\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"false\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"i-table-loading-overlay\">\n      <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n    </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n      <!-- Sticky Header Table (outside viewport) -->\n      <div class=\"i-table-virtual-header\">\n        <table class=\"i-table\">\n          <thead>\n            <!-- Column Filters Row -->\n            @if (filterable) {\n              <tr class=\"i-table-filter-row\">\n                @if (selectionMode === \"multiple\") {\n                  <th class=\"i-table-selection-header\"></th>\n                }\n                @if (rowExpandable) {\n                  <th class=\"i-table-expand-header\"></th>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  @if (column.filterable !== false) {\n                    <th [style.width]=\"getColumnWidth(column)\">\n                      <input\n                        type=\"text\"\n                        class=\"i-table-column-filter\"\n                        placeholder=\"Filter...\"\n                        [ngModel]=\"columnFilters()[column.field] || ''\"\n                        (ngModelChange)=\"\n                          onColumnFilterInput(column.field, $event)\n                        \"\n                      />\n                    </th>\n                  } @else {\n                    <th [style.width]=\"getColumnWidth(column)\"></th>\n                  }\n                }\n                @if (tableRowActions().length > 0) {\n                  <th class=\"i-table-actions-header\"></th>\n                }\n              </tr>\n            }\n\n            <!-- Column Headers Row -->\n            <tr>\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\">\n                  <i-checkbox\n                    [checked]=\"areAllRowsSelected()\"\n                    [indeterminate]=\"areSomeRowsSelected()\"\n                    (onChange)=\"toggleAllSelection()\"\n                  ></i-checkbox>\n                </th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n              @if (tableRowActions().length > 0) {\n                <th class=\"i-table-actions-header\">Actions</th>\n              }\n            </tr>\n          </thead>\n        </table>\n      </div>\n\n      <!-- Virtual Scroll Viewport (body only) -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        <table class=\"i-table i-table-virtual-body\">\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (tableRowActions().length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            }\n            <!-- Virtual Scroll Rows -->\n            <tr\n              *cdkVirtualFor=\"\n                let row of processedData();\n                let rowIndex = index;\n                trackBy: trackByRow\n              \"\n              [style.height.px]=\"virtualScrollItemSize\"\n              [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n              [class.i-table-row-selected]=\"isRowSelected(row)\"\n              (click)=\"toggleRowSelection(row)\"\n            >\n              @if (selectionMode === \"multiple\") {\n                <td class=\"i-table-selection-cell\">\n                  <i-checkbox\n                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @if (rowExpandable) {\n                <td class=\"i-table-expand-cell\">\n                  <i-button\n                    severity=\"secondary\"\n                    [text]=\"true\"\n                    size=\"xtra-small\"\n                    [icon]=\"\n                      isRowExpanded(row)\n                        ? 'pi pi-chevron-down'\n                        : 'pi pi-chevron-right'\n                    \"\n                    (clicked)=\"toggleRowExpansion(row, $event)\"\n                  ></i-button>\n                </td>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (tableRowActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of tableRowActions(); track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"onActionClick(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else if (isGroupedMode()) {\n      <!-- Grouped Mode: single scrollable table \u2014 group summary rows expand to reveal nested tables -->\n      <table class=\"i-table\">\n        <thead>\n          <!-- Outer filter row -->\n          @if (filterable && groupColumns().length > 0) {\n            <tr class=\"i-table-filter-row\">\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of groupColumns();\n                track trackByColumn($index, column)\n              ) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (hasAnyGroupActions()) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n              <th class=\"i-table-group-count-header\"></th>\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllGroupRowsSelected()\"\n                  [indeterminate]=\"areSomeGroupRowsSelected()\"\n                  (onChange)=\"toggleAllGroupSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of groupColumns();\n              track trackByColumn($index, column)\n            ) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (hasAnyGroupActions()) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n            <th class=\"i-table-group-count-header\"></th>\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (groupedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td\n                [attr.colspan]=\"\n                  (groupColumns().length || 1) +\n                  1 +\n                  1 +\n                  (hasAnyGroupActions() ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (group of groupedData(); track $index) {\n            <!-- Group summary row -->\n            <tr\n              class=\"i-table-group-summary-row\"\n              [ngClass]=\"group.styleClass\"\n              [class.i-table-group-expanded]=\"isGroupExpanded(group.label)\"\n              (click)=\"toggleGroupExpansion(group.label)\"\n            >\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isGroupExpanded(group.label)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  (clicked)=\"\n                    toggleGroupExpansion(group.label); $event.stopPropagation()\n                  \"\n                ></i-button>\n              </td>\n              @if (groupColumns().length === 0) {\n                <!-- No groupColumns: show label + count in a single cell -->\n                <td>\n                  <div class=\"i-table-group-header-content\">\n                    <span class=\"i-table-group-label\">{{ group.label }}</span>\n                    <span class=\"i-table-group-count\"\n                      >({{ group.data.length }})</span\n                    >\n                  </div>\n                </td>\n              } @else {\n                @for (\n                  column of groupColumns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(group.row ?? {}, column)\n                        ? 'i-table-cell-' +\n                          getCellSeverity(group.row ?? {}, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(group.row ?? {}, column)\"\n                        [class.i-severity-icon]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(group.row ?? {}, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n              }\n              @if ((group.groupActions?.length ?? 0) > 0) {\n                <td\n                  class=\"i-table-actions-cell\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <div class=\"i-table-actions\">\n                    @for (action of group.groupActions ?? []; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, group.row ?? {})\"\n                        [iTooltip]=\"getActionTooltip(action, group.row ?? {})\"\n                        [class.i-action-hidden]=\"\n                          !isActionVisible(action, group.row ?? {})\n                        \"\n                        (clicked)=\"onGroupActionClick(group, action, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n              <td\n                class=\"i-table-group-count-cell\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <span class=\"i-table-group-count\"\n                  >({{ group.data.length }})</span\n                >\n              </td>\n            </tr>\n\n            <!-- Group detail row (visible when expanded) -->\n            @if (isGroupExpanded(group.label)) {\n              <tr class=\"i-table-group-detail-row\">\n                <td\n                  [attr.colspan]=\"\n                    (groupColumns().length || 1) +\n                    1 +\n                    1 +\n                    (hasAnyGroupActions() ? 1 : 0)\n                  \"\n                  class=\"i-table-group-detail-cell\"\n                >\n                  <i-table\n                    [data]=\"getGroupTableData(group)\"\n                    [columns]=\"getGroupColumns(group)\"\n                    [sortable]=\"sortable\"\n                    [filterable]=\"filterable\"\n                    [selectionMode]=\"selectionMode\"\n                    [selection]=\"selection\"\n                    [striped]=\"striped\"\n                    [hoverable]=\"hoverable\"\n                    [bordered]=\"bordered\"\n                    [size]=\"size\"\n                    [dataKey]=\"dataKey\"\n                    [rowExpandable]=\"rowExpandable\"\n                    [resizableColumns]=\"resizableColumns\"\n                    (onSort)=\"onSort.emit($event)\"\n                    (onFilter)=\"onFilter.emit($event)\"\n                    (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                    (selectionChange)=\"selectionChange.emit($event)\"\n                    (onRowSelect)=\"onRowSelect.emit($event)\"\n                    (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    (onRowExpand)=\"onRowExpand.emit($event)\"\n                    (onRowCollapse)=\"onRowCollapse.emit($event)\"\n                  ></i-table>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    } @else {\n      <!-- Non-Virtual Scroll Table -->\n      <table class=\"i-table\">\n        <!-- Table Header (sticky when scrollable) -->\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (tableRowActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @if (rowExpandable) {\n              <th class=\"i-table-expand-header\"></th>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (tableRowActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns().length +\n                  (selectionMode === 'multiple' ? 1 : 0) +\n                  (rowExpandable ? 1 : 0) +\n                  (tableRowActions().length > 0 ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          } @else {\n            @for (row of processedData(); track trackByRow($index, row)) {\n              <tr\n                [class.i-table-row-odd]=\"$odd\"\n                [class.i-table-row-selected]=\"isRowSelected(row)\"\n                (click)=\"toggleRowSelection(row)\"\n              >\n                @if (selectionMode === \"multiple\") {\n                  <td class=\"i-table-selection-cell\">\n                    <i-checkbox\n                      [checked]=\"isRowSelected(row)\"\n                      (onChange)=\"toggleRowSelection(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                    ></i-checkbox>\n                  </td>\n                }\n                @if (rowExpandable) {\n                  <td class=\"i-table-expand-cell\">\n                    <i-button\n                      severity=\"secondary\"\n                      [text]=\"true\"\n                      size=\"xtra-small\"\n                      [icon]=\"\n                        isRowExpanded(row)\n                          ? 'pi pi-chevron-down'\n                          : 'pi pi-chevron-right'\n                      \"\n                      (clicked)=\"toggleRowExpansion(row, $event)\"\n                    ></i-button>\n                  </td>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(row, column)\n                        ? 'i-table-cell-' + getCellSeverity(row, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(row, column)\"\n                        [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else if (isListColumn(column)) {\n                      <div class=\"i-table-list-cell\">\n                        @for (\n                          item of getCellListItems(row, column);\n                          track item\n                        ) {\n                          <i-chip [label]=\"item\"></i-chip>\n                        }\n                      </div>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(row, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n                @if (tableRowActions().length > 0) {\n                  <td class=\"i-table-actions-cell\">\n                    <div class=\"i-table-actions\">\n                      @for (action of tableRowActions(); track action.id) {\n                        <i-button\n                          [severity]=\"action.severity || 'secondary'\"\n                          [text]=\"true\"\n                          size=\"small\"\n                          [icon]=\"action.icon || ''\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [iTooltip]=\"getActionTooltip(action, row)\"\n                          [class.i-action-hidden]=\"\n                            !isActionVisible(action, row)\n                          \"\n                          (clicked)=\"onActionClick(action, row, $event)\"\n                        >\n                          @if (action.label) {\n                            {{ action.label }}\n                          }\n                        </i-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n              <!-- Expanded Row Content -->\n              @if (rowExpandable && isRowExpanded(row)) {\n                <tr class=\"i-table-expanded-row\">\n                  <td\n                    [attr.colspan]=\"\n                      columns().length +\n                      (selectionMode === 'multiple' ? 1 : 0) +\n                      1 +\n                      (tableRowActions().length > 0 ? 1 : 0)\n                    \"\n                  >\n                    <div class=\"i-table-expanded-content\">\n                      <pre>{{ row | json }}</pre>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          }\n        </tbody>\n      </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["data", "columns", "groupedData", "groupColumns", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "size", "loading", "scrollable", "scrollHeight", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "reorderableColumns", "rowExpandable", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }, { kind: "pipe", type: i0.forwardRef(() => i1$1.JsonPipe), name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, decorators: [{
             type: Component,
@@ -8636,7 +8679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         NoContentComponent,
                         TooltipDirective,
                         forwardRef(() => ITable),
-                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              placeholder=\"Search...\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"false\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"i-table-loading-overlay\">\n      <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n    </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n      <!-- Sticky Header Table (outside viewport) -->\n      <div class=\"i-table-virtual-header\">\n        <table class=\"i-table\">\n          <thead>\n            <!-- Column Filters Row -->\n            @if (filterable) {\n              <tr class=\"i-table-filter-row\">\n                @if (selectionMode === \"multiple\") {\n                  <th class=\"i-table-selection-header\"></th>\n                }\n                @if (rowExpandable) {\n                  <th class=\"i-table-expand-header\"></th>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  @if (column.filterable !== false) {\n                    <th [style.width]=\"getColumnWidth(column)\">\n                      <input\n                        type=\"text\"\n                        class=\"i-table-column-filter\"\n                        placeholder=\"Filter...\"\n                        [ngModel]=\"columnFilters()[column.field] || ''\"\n                        (ngModelChange)=\"\n                          onColumnFilterInput(column.field, $event)\n                        \"\n                      />\n                    </th>\n                  } @else {\n                    <th [style.width]=\"getColumnWidth(column)\"></th>\n                  }\n                }\n                @if (showActions && actions.length > 0) {\n                  <th class=\"i-table-actions-header\"></th>\n                }\n              </tr>\n            }\n\n            <!-- Column Headers Row -->\n            <tr>\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\">\n                  <i-checkbox\n                    [checked]=\"areAllRowsSelected()\"\n                    [indeterminate]=\"areSomeRowsSelected()\"\n                    (onChange)=\"toggleAllSelection()\"\n                  ></i-checkbox>\n                </th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\">Actions</th>\n              }\n            </tr>\n          </thead>\n        </table>\n      </div>\n\n      <!-- Virtual Scroll Viewport (body only) -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        <table class=\"i-table i-table-virtual-body\">\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            }\n            <!-- Virtual Scroll Rows -->\n            <tr\n              *cdkVirtualFor=\"\n                let row of processedData();\n                let rowIndex = index;\n                trackBy: trackByRow\n              \"\n              [style.height.px]=\"virtualScrollItemSize\"\n              [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n              [class.i-table-row-selected]=\"isRowSelected(row)\"\n              (click)=\"toggleRowSelection(row)\"\n            >\n              @if (selectionMode === \"multiple\") {\n                <td class=\"i-table-selection-cell\">\n                  <i-checkbox\n                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @if (rowExpandable) {\n                <td class=\"i-table-expand-cell\">\n                  <i-button\n                    severity=\"secondary\"\n                    [text]=\"true\"\n                    size=\"xtra-small\"\n                    [icon]=\"\n                      isRowExpanded(row)\n                        ? 'pi pi-chevron-down'\n                        : 'pi pi-chevron-right'\n                    \"\n                    (clicked)=\"toggleRowExpansion(row, $event)\"\n                  ></i-button>\n                </td>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (showActions && actions.length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of actions; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"onActionClick(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else if (isGroupedMode()) {\n      <!-- Grouped Mode: single scrollable table \u2014 group summary rows expand to reveal nested tables -->\n      <table class=\"i-table\">\n        <thead>\n          <!-- Outer filter row -->\n          @if (filterable && groupColumns().length > 0) {\n            <tr class=\"i-table-filter-row\">\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of groupColumns();\n                track trackByColumn($index, column)\n              ) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n              <th class=\"i-table-group-count-header\"></th>\n            </tr>\n          }\n\n          <!-- Group column header row -->\n          <tr>\n            <th class=\"i-table-expand-header\"></th>\n            @if (groupColumns().length === 0) {\n              <th>Group</th>\n            } @else {\n              @for (\n                column of groupColumns();\n                track trackByColumn($index, column)\n              ) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n            }\n            @if (showActions && actions.length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n            <th class=\"i-table-group-count-header\"></th>\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (groupedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td\n                [attr.colspan]=\"\n                  (groupColumns().length || 1) +\n                  1 +\n                  1 +\n                  (showActions && actions.length > 0 ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (group of groupedData(); track $index) {\n            <!-- Group summary row -->\n            <tr\n              class=\"i-table-group-summary-row\"\n              [ngClass]=\"group.styleClass\"\n              [class.i-table-group-expanded]=\"isGroupExpanded(group.label)\"\n              (click)=\"toggleGroupExpansion(group.label)\"\n            >\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isGroupExpanded(group.label)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  (clicked)=\"\n                    toggleGroupExpansion(group.label); $event.stopPropagation()\n                  \"\n                ></i-button>\n              </td>\n              @if (groupColumns().length === 0) {\n                <!-- No groupColumns: show label + count in a single cell -->\n                <td>\n                  <div class=\"i-table-group-header-content\">\n                    <span class=\"i-table-group-label\">{{ group.label }}</span>\n                    <span class=\"i-table-group-count\"\n                      >({{ group.data.length }})</span\n                    >\n                  </div>\n                </td>\n              } @else {\n                @for (\n                  column of groupColumns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(group.row ?? {}, column)\n                        ? 'i-table-cell-' +\n                          getCellSeverity(group.row ?? {}, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(group.row ?? {}, column)\"\n                        [class.i-severity-icon]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(group.row ?? {}, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <td\n                  class=\"i-table-actions-cell\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <div class=\"i-table-actions\">\n                    @for (action of actions; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, group.row ?? {})\"\n                        [iTooltip]=\"getActionTooltip(action, group.row ?? {})\"\n                        [class.i-action-hidden]=\"\n                          !isActionVisible(action, group.row ?? {})\n                        \"\n                        (clicked)=\"\n                          onActionClick(action, group.row ?? {}, $event)\n                        \"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n              <td\n                class=\"i-table-group-count-cell\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <span class=\"i-table-group-count\"\n                  >({{ group.data.length }})</span\n                >\n              </td>\n            </tr>\n\n            <!-- Group detail row (visible when expanded) -->\n            @if (isGroupExpanded(group.label)) {\n              <tr class=\"i-table-group-detail-row\">\n                <td\n                  [attr.colspan]=\"\n                    (groupColumns().length || 1) +\n                    1 +\n                    1 +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                  class=\"i-table-group-detail-cell\"\n                >\n                  <i-table\n                    [data]=\"group.data\"\n                    [columns]=\"getGroupColumns(group)\"\n                    [sortable]=\"sortable\"\n                    [filterable]=\"filterable\"\n                    [showActions]=\"showActions\"\n                    [actions]=\"actions\"\n                    [selectionMode]=\"selectionMode\"\n                    [selection]=\"selection\"\n                    [striped]=\"striped\"\n                    [hoverable]=\"hoverable\"\n                    [bordered]=\"bordered\"\n                    [size]=\"size\"\n                    [dataKey]=\"dataKey\"\n                    [rowExpandable]=\"rowExpandable\"\n                    [resizableColumns]=\"resizableColumns\"\n                    (onSort)=\"onSort.emit($event)\"\n                    (onFilter)=\"onFilter.emit($event)\"\n                    (onAction)=\"onAction.emit($event)\"\n                    (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                    (selectionChange)=\"selectionChange.emit($event)\"\n                    (onRowSelect)=\"onRowSelect.emit($event)\"\n                    (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    (onRowExpand)=\"onRowExpand.emit($event)\"\n                    (onRowCollapse)=\"onRowCollapse.emit($event)\"\n                  ></i-table>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    } @else {\n      <!-- Non-Virtual Scroll Table -->\n      <table class=\"i-table\">\n        <!-- Table Header (sticky when scrollable) -->\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @if (rowExpandable) {\n              <th class=\"i-table-expand-header\"></th>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (showActions && actions.length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Table Body - Regular Mode -->\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td\n                [attr.colspan]=\"\n                  columns().length +\n                  (selectionMode === 'multiple' ? 1 : 0) +\n                  (rowExpandable ? 1 : 0) +\n                  (showActions && actions.length > 0 ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          } @else {\n            @for (\n              row of processedData();\n              track trackByRow($index, row);\n              let rowIndex = $index\n            ) {\n              <tr\n                [class.i-table-row-odd]=\"$odd\"\n                [class.i-table-row-selected]=\"isRowSelected(row)\"\n                (click)=\"toggleRowSelection(row)\"\n              >\n                @if (selectionMode === \"multiple\") {\n                  <td class=\"i-table-selection-cell\">\n                    <i-checkbox\n                      [checked]=\"isRowSelected(row)\"\n                      (onChange)=\"toggleRowSelection(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                    ></i-checkbox>\n                  </td>\n                }\n                @if (rowExpandable) {\n                  <td class=\"i-table-expand-cell\">\n                    <i-button\n                      severity=\"secondary\"\n                      [text]=\"true\"\n                      size=\"xtra-small\"\n                      [icon]=\"\n                        isRowExpanded(row)\n                          ? 'pi pi-chevron-down'\n                          : 'pi pi-chevron-right'\n                      \"\n                      (clicked)=\"toggleRowExpansion(row, $event)\"\n                    ></i-button>\n                  </td>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(row, column)\n                        ? 'i-table-cell-' + getCellSeverity(row, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(row, column)\"\n                        [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else if (isListColumn(column)) {\n                      <div class=\"i-table-list-cell\">\n                        @for (\n                          item of getCellListItems(row, column);\n                          track item\n                        ) {\n                          <i-chip [label]=\"item\"></i-chip>\n                        }\n                      </div>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(row, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n                @if (showActions && actions.length > 0) {\n                  <td class=\"i-table-actions-cell\">\n                    <div class=\"i-table-actions\">\n                      @for (action of actions; track action.id) {\n                        <i-button\n                          [severity]=\"action.severity || 'secondary'\"\n                          [text]=\"true\"\n                          size=\"small\"\n                          [icon]=\"action.icon || ''\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [iTooltip]=\"getActionTooltip(action, row)\"\n                          [class.i-action-hidden]=\"\n                            !isActionVisible(action, row)\n                          \"\n                          (clicked)=\"onActionClick(action, row, $event)\"\n                        >\n                          @if (action.label) {\n                            {{ action.label }}\n                          }\n                        </i-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n              <!-- Expanded Row Content -->\n              @if (rowExpandable && isRowExpanded(row)) {\n                <tr class=\"i-table-expanded-row\">\n                  <td\n                    [attr.colspan]=\"\n                      columns().length +\n                      (selectionMode === 'multiple' ? 1 : 0) +\n                      1 +\n                      (showActions && actions.length > 0 ? 1 : 0)\n                    \"\n                  >\n                    <div class=\"i-table-expanded-content\">\n                      <pre>{{ row | json }}</pre>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          }\n        </tbody>\n      </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"] }]
+                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              placeholder=\"Search...\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"false\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"i-table-loading-overlay\">\n      <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n    </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n      <!-- Sticky Header Table (outside viewport) -->\n      <div class=\"i-table-virtual-header\">\n        <table class=\"i-table\">\n          <thead>\n            <!-- Column Filters Row -->\n            @if (filterable) {\n              <tr class=\"i-table-filter-row\">\n                @if (selectionMode === \"multiple\") {\n                  <th class=\"i-table-selection-header\"></th>\n                }\n                @if (rowExpandable) {\n                  <th class=\"i-table-expand-header\"></th>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  @if (column.filterable !== false) {\n                    <th [style.width]=\"getColumnWidth(column)\">\n                      <input\n                        type=\"text\"\n                        class=\"i-table-column-filter\"\n                        placeholder=\"Filter...\"\n                        [ngModel]=\"columnFilters()[column.field] || ''\"\n                        (ngModelChange)=\"\n                          onColumnFilterInput(column.field, $event)\n                        \"\n                      />\n                    </th>\n                  } @else {\n                    <th [style.width]=\"getColumnWidth(column)\"></th>\n                  }\n                }\n                @if (tableRowActions().length > 0) {\n                  <th class=\"i-table-actions-header\"></th>\n                }\n              </tr>\n            }\n\n            <!-- Column Headers Row -->\n            <tr>\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\">\n                  <i-checkbox\n                    [checked]=\"areAllRowsSelected()\"\n                    [indeterminate]=\"areSomeRowsSelected()\"\n                    (onChange)=\"toggleAllSelection()\"\n                  ></i-checkbox>\n                </th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n              @if (tableRowActions().length > 0) {\n                <th class=\"i-table-actions-header\">Actions</th>\n              }\n            </tr>\n          </thead>\n        </table>\n      </div>\n\n      <!-- Virtual Scroll Viewport (body only) -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        <table class=\"i-table i-table-virtual-body\">\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (tableRowActions().length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            }\n            <!-- Virtual Scroll Rows -->\n            <tr\n              *cdkVirtualFor=\"\n                let row of processedData();\n                let rowIndex = index;\n                trackBy: trackByRow\n              \"\n              [style.height.px]=\"virtualScrollItemSize\"\n              [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n              [class.i-table-row-selected]=\"isRowSelected(row)\"\n              (click)=\"toggleRowSelection(row)\"\n            >\n              @if (selectionMode === \"multiple\") {\n                <td class=\"i-table-selection-cell\">\n                  <i-checkbox\n                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @if (rowExpandable) {\n                <td class=\"i-table-expand-cell\">\n                  <i-button\n                    severity=\"secondary\"\n                    [text]=\"true\"\n                    size=\"xtra-small\"\n                    [icon]=\"\n                      isRowExpanded(row)\n                        ? 'pi pi-chevron-down'\n                        : 'pi pi-chevron-right'\n                    \"\n                    (clicked)=\"toggleRowExpansion(row, $event)\"\n                  ></i-button>\n                </td>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (tableRowActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of tableRowActions(); track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"onActionClick(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else if (isGroupedMode()) {\n      <!-- Grouped Mode: single scrollable table \u2014 group summary rows expand to reveal nested tables -->\n      <table class=\"i-table\">\n        <thead>\n          <!-- Outer filter row -->\n          @if (filterable && groupColumns().length > 0) {\n            <tr class=\"i-table-filter-row\">\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of groupColumns();\n                track trackByColumn($index, column)\n              ) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (hasAnyGroupActions()) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n              <th class=\"i-table-group-count-header\"></th>\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllGroupRowsSelected()\"\n                  [indeterminate]=\"areSomeGroupRowsSelected()\"\n                  (onChange)=\"toggleAllGroupSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of groupColumns();\n              track trackByColumn($index, column)\n            ) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (hasAnyGroupActions()) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n            <th class=\"i-table-group-count-header\"></th>\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (groupedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td\n                [attr.colspan]=\"\n                  (groupColumns().length || 1) +\n                  1 +\n                  1 +\n                  (hasAnyGroupActions() ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (group of groupedData(); track $index) {\n            <!-- Group summary row -->\n            <tr\n              class=\"i-table-group-summary-row\"\n              [ngClass]=\"group.styleClass\"\n              [class.i-table-group-expanded]=\"isGroupExpanded(group.label)\"\n              (click)=\"toggleGroupExpansion(group.label)\"\n            >\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isGroupExpanded(group.label)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  (clicked)=\"\n                    toggleGroupExpansion(group.label); $event.stopPropagation()\n                  \"\n                ></i-button>\n              </td>\n              @if (groupColumns().length === 0) {\n                <!-- No groupColumns: show label + count in a single cell -->\n                <td>\n                  <div class=\"i-table-group-header-content\">\n                    <span class=\"i-table-group-label\">{{ group.label }}</span>\n                    <span class=\"i-table-group-count\"\n                      >({{ group.data.length }})</span\n                    >\n                  </div>\n                </td>\n              } @else {\n                @for (\n                  column of groupColumns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(group.row ?? {}, column)\n                        ? 'i-table-cell-' +\n                          getCellSeverity(group.row ?? {}, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(group.row ?? {}, column)\"\n                        [class.i-severity-icon]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"\n                          getCellSeverity(group.row ?? {}, column)\n                        \"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(group.row ?? {}, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n              }\n              @if ((group.groupActions?.length ?? 0) > 0) {\n                <td\n                  class=\"i-table-actions-cell\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <div class=\"i-table-actions\">\n                    @for (action of group.groupActions ?? []; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, group.row ?? {})\"\n                        [iTooltip]=\"getActionTooltip(action, group.row ?? {})\"\n                        [class.i-action-hidden]=\"\n                          !isActionVisible(action, group.row ?? {})\n                        \"\n                        (clicked)=\"onGroupActionClick(group, action, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n              <td\n                class=\"i-table-group-count-cell\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <span class=\"i-table-group-count\"\n                  >({{ group.data.length }})</span\n                >\n              </td>\n            </tr>\n\n            <!-- Group detail row (visible when expanded) -->\n            @if (isGroupExpanded(group.label)) {\n              <tr class=\"i-table-group-detail-row\">\n                <td\n                  [attr.colspan]=\"\n                    (groupColumns().length || 1) +\n                    1 +\n                    1 +\n                    (hasAnyGroupActions() ? 1 : 0)\n                  \"\n                  class=\"i-table-group-detail-cell\"\n                >\n                  <i-table\n                    [data]=\"getGroupTableData(group)\"\n                    [columns]=\"getGroupColumns(group)\"\n                    [sortable]=\"sortable\"\n                    [filterable]=\"filterable\"\n                    [selectionMode]=\"selectionMode\"\n                    [selection]=\"selection\"\n                    [striped]=\"striped\"\n                    [hoverable]=\"hoverable\"\n                    [bordered]=\"bordered\"\n                    [size]=\"size\"\n                    [dataKey]=\"dataKey\"\n                    [rowExpandable]=\"rowExpandable\"\n                    [resizableColumns]=\"resizableColumns\"\n                    (onSort)=\"onSort.emit($event)\"\n                    (onFilter)=\"onFilter.emit($event)\"\n                    (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                    (selectionChange)=\"selectionChange.emit($event)\"\n                    (onRowSelect)=\"onRowSelect.emit($event)\"\n                    (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    (onRowExpand)=\"onRowExpand.emit($event)\"\n                    (onRowCollapse)=\"onRowCollapse.emit($event)\"\n                  ></i-table>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    } @else {\n      <!-- Non-Virtual Scroll Table -->\n      <table class=\"i-table\">\n        <!-- Table Header (sticky when scrollable) -->\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (tableRowActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @if (rowExpandable) {\n              <th class=\"i-table-expand-header\"></th>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (tableRowActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns().length +\n                  (selectionMode === 'multiple' ? 1 : 0) +\n                  (rowExpandable ? 1 : 0) +\n                  (tableRowActions().length > 0 ? 1 : 0)\n                \"\n              >\n                <i-no-content />\n              </td>\n            </tr>\n          } @else {\n            @for (row of processedData(); track trackByRow($index, row)) {\n              <tr\n                [class.i-table-row-odd]=\"$odd\"\n                [class.i-table-row-selected]=\"isRowSelected(row)\"\n                (click)=\"toggleRowSelection(row)\"\n              >\n                @if (selectionMode === \"multiple\") {\n                  <td class=\"i-table-selection-cell\">\n                    <i-checkbox\n                      [checked]=\"isRowSelected(row)\"\n                      (onChange)=\"toggleRowSelection(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                    ></i-checkbox>\n                  </td>\n                }\n                @if (rowExpandable) {\n                  <td class=\"i-table-expand-cell\">\n                    <i-button\n                      severity=\"secondary\"\n                      [text]=\"true\"\n                      size=\"xtra-small\"\n                      [icon]=\"\n                        isRowExpanded(row)\n                          ? 'pi pi-chevron-down'\n                          : 'pi pi-chevron-right'\n                      \"\n                      (clicked)=\"toggleRowExpansion(row, $event)\"\n                    ></i-button>\n                  </td>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  <td\n                    [style.text-align]=\"column.align || 'left'\"\n                    [style.width]=\"getColumnWidth(column)\"\n                    [class]=\"\n                      getCellSeverity(row, column)\n                        ? 'i-table-cell-' + getCellSeverity(row, column)\n                        : ''\n                    \"\n                  >\n                    @if (isIconColumn(column)) {\n                      <i\n                        [class]=\"getCellIcon(row, column)\"\n                        [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                        [style.font-size]=\"column.iconSize || '1rem'\"\n                      ></i>\n                    } @else if (isListColumn(column)) {\n                      <div class=\"i-table-list-cell\">\n                        @for (\n                          item of getCellListItems(row, column);\n                          track item\n                        ) {\n                          <i-chip [label]=\"item\"></i-chip>\n                        }\n                      </div>\n                    } @else {\n                      <span\n                        [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                      >\n                        {{\n                          formatCellValue(\n                            getCellValue(row, column.field),\n                            column\n                          )\n                        }}\n                      </span>\n                    }\n                  </td>\n                }\n                @if (tableRowActions().length > 0) {\n                  <td class=\"i-table-actions-cell\">\n                    <div class=\"i-table-actions\">\n                      @for (action of tableRowActions(); track action.id) {\n                        <i-button\n                          [severity]=\"action.severity || 'secondary'\"\n                          [text]=\"true\"\n                          size=\"small\"\n                          [icon]=\"action.icon || ''\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [iTooltip]=\"getActionTooltip(action, row)\"\n                          [class.i-action-hidden]=\"\n                            !isActionVisible(action, row)\n                          \"\n                          (clicked)=\"onActionClick(action, row, $event)\"\n                        >\n                          @if (action.label) {\n                            {{ action.label }}\n                          }\n                        </i-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n              <!-- Expanded Row Content -->\n              @if (rowExpandable && isRowExpanded(row)) {\n                <tr class=\"i-table-expanded-row\">\n                  <td\n                    [attr.colspan]=\"\n                      columns().length +\n                      (selectionMode === 'multiple' ? 1 : 0) +\n                      1 +\n                      (tableRowActions().length > 0 ? 1 : 0)\n                    \"\n                  >\n                    <div class=\"i-table-expanded-content\">\n                      <pre>{{ row | json }}</pre>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          }\n        </tbody>\n      </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], groupedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedData", required: false }] }], groupColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColumns", required: false }] }], emptyMessage: [{
                 type: Input
             }], sortable: [{
@@ -8669,12 +8712,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Output
             }], onRowUnselect: [{
                 type: Output
-            }], showActions: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], onAction: [{
-                type: Output
             }], striped: [{
                 type: Input
             }], hoverable: [{