@apexara/ng-components 1.0.6-test.7 → 1.0.7

package/fesm2022/apexara-ng-components-table.mjs

@@ -25,6 +25,7 @@ var ApexTableColumnType;
     ApexTableColumnType[ApexTableColumnType["Checkbox"] = 7] = "Checkbox";
     ApexTableColumnType[ApexTableColumnType["List"] = 8] = "List";
     ApexTableColumnType[ApexTableColumnType["Status"] = 9] = "Status";
+    ApexTableColumnType[ApexTableColumnType["Select"] = 10] = "Select";
 })(ApexTableColumnType || (ApexTableColumnType = {}));
 class ApexTableComponent {
     constructor(elementRef, osService, formBuilder, scrollBlockService, injector) {
@@ -50,9 +51,20 @@ class ApexTableComponent {
         this.stickyHeader = false;
         // Edit mode configuration
         this.editMode = false;
+        this.selectionPosition = 'right';
+        this.selectionHeader = 'text';
         this.tableChange = new EventEmitter();
         this.selectionChange = new EventEmitter();
         this.editModeChange = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        // A select cell's value changed — { row, column, value } where value is the
+        // chosen option's raw value (null when cleared). Lets a consumer persist it.
+        this.cellChange = new EventEmitter();
+        // Server-side "select all matching" — emits true when the user opts to select
+        // every row behind the current filter (beyond the loaded page), false when
+        // cleared or when a manual selection change cancels it. Consumers act on the
+        // whole filtered set (e.g. by re-sending the query) rather than the row list.
+        this.selectAllAcrossChange = new EventEmitter();
         this.itemSize = 42; // Must match CSS table row height
         this.tooltipPosition = TooltipPosition;
         this.TableColumnType = ApexTableColumnType;
@@ -66,9 +78,16 @@ class ApexTableComponent {
         this.isHeaderStuck = signal(false, ...(ngDevMode ? [{ debugName: "isHeaderStuck" }] : []));
         this.selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
         this.allSelected = signal(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+        // True when "select all matching" is active (server-side, beyond the page).
+        this.selectAllAcross = signal(false, ...(ngDevMode ? [{ debugName: "selectAllAcross" }] : []));
         this.virtualViewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "virtualViewportHeight" }] : []));
         this.showViewportScroll = signal(false, ...(ngDevMode ? [{ debugName: "showViewportScroll" }] : []));
         this.lastSelectedIndex = -1;
+        // One apex-select config per (row, column) select cell, kept stable across
+        // change detection so the dropdown doesn't rebuild on every tick. Keyed by the
+        // row object, so replacing the row (an immutable data update) drops the old
+        // entry and reseeds from the new value; the WeakMap collects stale rows.
+        this.selectCellOptions = new WeakMap();
     }
     onClick(event) {
         // TO DO: When two tables exists the dropdown from first table is not closed
@@ -205,7 +224,9 @@ class ApexTableComponent {
         this.pageData.set(data);
     }
     updateVisibleRange(start, end) {
-        this.visibleRange.set(`Showing ${start + 1} to ${end} of ${this._dataLength} results`);
+        // Grouped digits: "Showing 8,670,471 to 8,670,480 of 8,670,480 results".
+        const format = (value) => value.toLocaleString('en-US');
+        this.visibleRange.set(`Showing ${format(start + 1)} to ${format(end)} of ${format(this._dataLength)} results`);
     }
     calculateTotalPages() {
         this.totalPages.set(Math.ceil(this._dataLength / this.pageSize));
@@ -259,10 +280,46 @@ class ApexTableComponent {
                 return this.listCellTpl;
             case ApexTableColumnType.Status:
                 return this.statusCellTpl;
+            case ApexTableColumnType.Select:
+                return this.selectCellTpl;
             default:
                 return this.textCellTpl;
         }
     }
+    getSelectCellOptions(row, column) {
+        let byColumn = this.selectCellOptions.get(row);
+        if (!byColumn) {
+            byColumn = new Map();
+            this.selectCellOptions.set(row, byColumn);
+        }
+        const key = column.value ?? '';
+        const cached = byColumn.get(key);
+        if (cached) {
+            return cached;
+        }
+        const current = column.selectOptions?.find(option => option.value === this.getDescendantProp(row, column)) ?? null;
+        const options = {
+            label: '',
+            placeholder: column.placeholder ?? '',
+            data: column.selectOptions ?? [],
+            formGroup: this.formBuilder.group({ value: [current] }),
+            formControlName: 'value',
+        };
+        byColumn.set(key, options);
+        return options;
+    }
+    onCellSelectChange(row, column, selected) {
+        this.cellChange.emit({ row, column, value: selected?.value ?? null });
+    }
+    // Colour for the current select value (trigger text + caret); null falls back
+    // to the default styling. Mirrors getChipColor for the Chip cell.
+    getSelectCellColor(row, column) {
+        if (!column.cellOptions?.selectColor) {
+            return null;
+        }
+        const value = this.getDescendantProp(row, column);
+        return column.cellOptions.selectColor[value] || null;
+    }
     refreshLayout() {
         this.updateViewportLayout();
         setTimeout(() => {
@@ -365,6 +422,49 @@ class ApexTableComponent {
         const value = this.getDescendantProp(row, column);
         return column.cellOptions.chipBackgroundColor[value] || null;
     }
+    // Multi-chip support for the Chip column: when the bound value is an array, render
+    // one chip per item (coloured per value via cellOptions.chipColor/chipBackgroundColor)
+    // with an optional "+N" overflow once listOptions.max is exceeded. A scalar value keeps
+    // the original single-chip rendering untouched.
+    isChipArray(row, column) {
+        return Array.isArray(this.getDescendantProp(row, column));
+    }
+    getChipsVisible(row, column) {
+        const arr = this.getDescendantProp(row, column);
+        if (!Array.isArray(arr) || arr.length === 0) {
+            return [];
+        }
+        const labelKey = column.listOptions?.label;
+        const max = column.listOptions?.max;
+        const visible = typeof max === 'number' ? arr.slice(0, max) : arr;
+        return visible.map(item => {
+            const value = labelKey ? item[labelKey] : item;
+            return { label: value, value };
+        });
+    }
+    getChipsOverflowCount(row, column) {
+        const arr = this.getDescendantProp(row, column);
+        const max = column.listOptions?.max;
+        if (!Array.isArray(arr) || typeof max !== 'number') {
+            return 0;
+        }
+        return Math.max(0, arr.length - max);
+    }
+    getChipsTooltip(row, column) {
+        const arr = this.getDescendantProp(row, column);
+        const max = column.listOptions?.max;
+        if (!Array.isArray(arr) || typeof max !== 'number') {
+            return '';
+        }
+        const labelKey = column.listOptions?.label;
+        return arr.slice(max).map(item => labelKey ? item[labelKey] : item).join('<br>');
+    }
+    getChipValueColor(value, column) {
+        return column.cellOptions?.chipColor?.[value] ?? null;
+    }
+    getChipValueBackground(value, column) {
+        return column.cellOptions?.chipBackgroundColor?.[value] ?? null;
+    }
     getCellIconColor(row, column) {
         if (!column.cellOptions?.iconColor) {
             return null;
@@ -540,6 +640,7 @@ class ApexTableComponent {
         }
     }
     toggleRowSelection(row, event) {
+        this.cancelSelectAllAcross();
         const pageData = this.pageData();
         const currentIndex = pageData.indexOf(row);
         this.selectedRows.update(s => {
@@ -566,6 +667,7 @@ class ApexTableComponent {
         this.selectionChange.emit(Array.from(this.selectedRows()));
     }
     toggleSelectAll() {
+        this.cancelSelectAllAcross();
         const pageData = this.pageData();
         if (this.allSelected()) {
             this.selectedRows.set(new Set());
@@ -577,9 +679,48 @@ class ApexTableComponent {
         }
         this.selectionChange.emit(Array.from(this.selectedRows()));
     }
+    // Banner action: opt into (on=true) or out of "select all matching". Keeps the
+    // current page selected as the visual baseline; consumers act on the full
+    // filtered set (via selectAllAcrossChange) rather than the emitted row list.
+    setSelectAllAcross(on) {
+        if (on) {
+            this.selectedRows.set(new Set(this.pageData()));
+            this.allSelected.set(true);
+            this.selectAllAcross.set(true);
+            this.selectionChange.emit(Array.from(this.selectedRows()));
+        }
+        else {
+            this.selectedRows.set(new Set());
+            this.allSelected.set(false);
+            this.selectAllAcross.set(false);
+            this.selectionChange.emit([]);
+        }
+        this.selectAllAcrossChange.emit(on);
+    }
+    // A manual selection change (row toggle / header toggle) cancels an active
+    // "select all matching" so the two states can't drift apart.
+    cancelSelectAllAcross() {
+        if (this.selectAllAcross()) {
+            this.selectAllAcross.set(false);
+            this.selectAllAcrossChange.emit(false);
+        }
+    }
     isRowSelected(row) {
         return this.selectedRows().has(row);
     }
+    // Emit `rowClick` for whole-row click consumers. Skip when the click originated from
+    // an in-row interactive (action icon, kebab dropdown, selection checkbox, contenteditable
+    // cell) so existing handlers keep working without callers needing stopPropagation.
+    onRowClick(row, event) {
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        if (target.closest('.action-icon-wrapper, .select-column, .cell-select, [contenteditable="true"], .more-actions-dropdown')) {
+            return;
+        }
+        this.rowClick.emit(row);
+    }
     lockScroll() {
         this.scrollBlockService.activate();
         if (this.cdkViewport) {
@@ -783,7 +924,7 @@ class ApexTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.OSService }, { token: i2.FormBuilder }, { token: i1.ScrollBlockService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexTableComponent, isStandalone: true, selector: "apex-table", inputs: { data: "data", dataLength: "dataLength", columns: "columns", filter: "filter", serverSide: "serverSide", isLoading: "isLoading", sortIndex: "sortIndex", sortable: "sortable", sortDirection: "sortDirection", pageSize: "pageSize", currentPage: "currentPage", pageable: "pageable", pageSizeOptions: "pageSizeOptions", virtualScroll: "virtualScroll", tableMaxHeight: "tableMaxHeight", stickyHeader: "stickyHeader", editMode: "editMode" }, outputs: { tableChange: "tableChange", selectionChange: "selectionChange", editModeChange: "editModeChange" }, host: { listeners: { "document:click": "onClick($event)", "document:scroll": "onScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "DropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "textCellTpl", first: true, predicate: ["textCell"], descendants: true, static: true }, { propertyName: "numberCellTpl", first: true, predicate: ["numberCell"], descendants: true, static: true }, { propertyName: "currencyCellTpl", first: true, predicate: ["currencyCell"], descendants: true, static: true }, { propertyName: "numberMathCellTpl", first: true, predicate: ["numberMathCell"], descendants: true, static: true }, { propertyName: "dateCellTpl", first: true, predicate: ["dateCell"], descendants: true, static: true }, { propertyName: "chipCellTpl", first: true, predicate: ["chipCell"], descendants: true, static: true }, { propertyName: "checkboxCellTpl", first: true, predicate: ["checkboxCell"], descendants: true, static: true }, { propertyName: "actionCellTpl", first: true, predicate: ["actionCell"], descendants: true, static: true }, { propertyName: "listCellTpl", first: true, predicate: ["listCell"], descendants: true, static: true }, { propertyName: "statusCellTpl", first: true, predicate: ["statusCell"], descendants: true, static: true }, { propertyName: "moreActionsList", predicate: ["moreActionsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading, 'sticky-header': stickyHeader, 'header-stuck': isHeaderStuck() }\">\n    @if (virtualScroll) {\n        @if (stickyHeader) {\n            <table class=\"sticky-virtual-header\">\n                <thead>\n                    <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                </thead>\n            </table>\n        }\n\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: virtualViewportHeight() + 'px' }\" [style.overflow-y]=\"showViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                @if (!stickyHeader) {\n                    <thead #theadRef>\n                        <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                    </thead>\n                }\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of pageData(); trackBy: trackByIndex\" [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\" [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode) {\n                            <td class=\"select-column\" (click)=\"toggleRowSelection(row, $event)\">\n                                <div class=\"cell checkbox\">\n                                    <apex-checkbox [checked]=\"isRowSelected(row)\"></apex-checkbox>\n                                </div>\n                            </td>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n                <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n            </thead>\n\n            <tbody>\n                @for (row of pageData(); track $index) {\n                    <tr [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode) {\n                            <td class=\"select-column\" (click)=\"toggleRowSelection(row, $event)\">\n                                <div class=\"cell checkbox\">\n                                    <apex-checkbox [checked]=\"isRowSelected(row)\"></apex-checkbox>\n                                </div>\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (currentActiveRow()?.isDropdown && currentActiveColumn()) {\n        <ng-container *ngTemplateOutlet=\"multipleActionsDropdown; context: { row: currentActiveRow(), column: currentActiveColumn() }\"></ng-container>\n    }\n\n    @if (filter && filteredData() && filteredData().length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && pageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange() }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages() }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <apex-select class=\"table\" [options]=\"pageSizeSelectOptions\"></apex-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '', column.cellOptions?.icon ? 'has-icon' : '']\"\n        [style.color]=\"getTextColor(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition !== 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            <span class=\"cell-text\">{{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}</span>\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition === 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n\n        @if (getChangeValue(row, column) !== null) {\n            <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div ApexTooltip (click)=\"action.execute && action.execute(row)\" [apexTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <apex-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"'Action icon for ' + action.label\"></apex-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, column, $event)\">\n                <svg class=\"multiple-action-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\">\n        @if (getChipLabel(row, column)) {\n            <apex-chip [ngClass]=\"getClass(row, column)\"\n                [style.--apex-chip-color]=\"getChipColor(row, column)\"\n                [style.--apex-chip-background-color]=\"getChipBackgroundColor(row, column)\"> {{ getChipLabel(row, column) }}</apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #statusCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell status\">\n        @for (step of column.statusSteps; track step.value; let i = $index) {\n            <div class=\"status-step\" [class.completed]=\"isStatusStepCompleted(row, column, i)\">\n                <span class=\"status-step-label\">{{ step.label }}</span>\n\n                <div class=\"status-step-bar\"\n                    [style.background-color]=\"isStatusStepCompleted(row, column, i) ? step.color : null\">\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #listCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell list\">\n        <span class=\"list-text\">{{ getListDisplayText(row, column) }}</span>\n\n        @if (getListOverflowCount(row, column) > 0) {\n            <apex-chip class=\"list-overflow-badge\"\n                ApexTooltip\n                [apexTooltip]=\"getListTooltipContent(row, column)\"\n                [tooltipPosition]=\"tooltipPosition.Below\">\n                +{{ getListOverflowCount(row, column) }}\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <apex-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></apex-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" (click)=\"action.execute && action.execute(row)\">\n                    <apex-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"'Action icon for ' + action.label\"></apex-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span (click)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\">...</span>\n            <span (click)=\"goToPage(totalPages - 1)\">{{ totalPages }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages()) {\n        <span [ngClass]=\"class\" (click)=\"goToPage(page)\">{{ page + 1 }}</span>\n    }\n</ng-template>\n\n<ng-template #headerRow>\n    <tr>\n        @for (column of columns; track $index) {\n            <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                <div class=\"cell\">\n                    <span>{{ column.label }}</span>\n\n                    @if (column.type !== TableColumnType.Actions && sortable) {\n                        <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                            </svg>\n                        </div>\n                    }\n                </div>\n            </th>\n        }\n\n        @if (editMode) {\n            <th class=\"select-column\">\n                <div class=\"cell\">\n                    <span class=\"select-all-btn\" (click)=\"toggleSelectAll()\">{{ allSelected() ? 'Deselect' : 'Select all' }}</span>\n                </div>\n            </th>\n        }\n    </tr>\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}.sticky-header{overflow:visible}.sticky-header table{border-collapse:separate;border-spacing:0}.sticky-header th{position:sticky;top:0;z-index:1}.header-stuck th{background-color:var(--apex-table-header-background-color, #FFFFFF)}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--apex-table-row-bottom-border-color, #E9E9E9)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--apex-table-first-row-text-color, #5D6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}apex-chip{max-width:100%;--apex-chip-background-color: #FFF2EF;--apex-chip-color: #F96138}.cell.has-change{display:flex;align-items:center;justify-content:center}.cell.has-icon{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;line-height:20px}.cell-icon{width:16px;height:16px;min-width:16px;display:flex;align-items:center;justify-content:center}.cell-icon apex-img{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.cell-icon.has-color path{fill:var(--apex-table-cell-icon-fill);stroke:var(--apex-table-cell-icon-stroke)}.cell.has-icon .cell-text{color:inherit}apex-chip.change-positive{--apex-chip-background-color: var(--apex-table-change-positive-background, #E6F9F0);--apex-chip-color: var(--apex-table-change-positive-color, #00B67A);margin-left:8px}apex-chip.change-negative{--apex-chip-background-color: var(--apex-table-change-negative-background, #FFF2EF);--apex-chip-color: var(--apex-table-change-negative-color, #F96138);margin-left:8px}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell.checkbox{display:flex;justify-content:center;align-items:center;--apex-checkbox-disabled-opacity: 1}.select-column .cell.checkbox apex-checkbox{pointer-events:none}.cell.list{display:flex;align-items:center;justify-content:flex-start;gap:8px}.list-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}apex-chip.list-overflow-badge{--apex-chip-background-color: var(--apex-table-list-overflow-background, transparent);--apex-chip-color: var(--apex-table-list-overflow-color, #FFA753);--apex-chip-font-size: 13px;--apex-chip-height: 20px;--apex-chip-padding: 0 4px;--apex-chip-border-width: 1px;--apex-chip-border-color: var(--apex-table-list-overflow-border-color, #FFEFE1);--apex-chip-border-radius: 5px;cursor:default;flex-shrink:0;font-weight:500;line-height:20px;letter-spacing:0}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions apex-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--apex-chip-background-color: var(--apex-table-chip-background-color);--apex-chip-color: var(--apex-table-chip-color)}.cell.chip .secondary{--apex-chip-background-color: var(--apex-table-chip-background-color-secondary);--apex-chip-color: var(--apex-table-chip-color-secondary)}.cell.status{display:flex;align-items:center;gap:var(--apex-table-status-gap, 8px)}.status-step{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.status-step-label{font-size:12px;line-height:16px;color:var(--apex-table-status-label-color, #888B95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-step.completed .status-step-label{color:var(--apex-table-status-label-completed-color, #191B22);font-weight:600}.status-step-bar{height:var(--apex-table-status-bar-height, 3px);border-radius:2px;background-color:var(--apex-table-status-incomplete-color, #E5E7EB)}.select-column{width:80px;min-width:80px;max-width:80px}.select-all-btn{cursor:pointer;font-size:var(--apex-table-select-all-font-size, 12px);font-weight:var(--apex-table-select-all-font-weight, 600);color:var(--apex-table-select-all-color, #F96138);background-color:var(--apex-table-select-all-background-color, transparent);text-wrap:nowrap}.select-all-btn:hover{color:var(--apex-table-select-all-hover-color, #E0562F)}tr.selected-row{background-color:var(--apex-table-selected-row-background-color, #FFF7F5)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);padding:0 12px}.dropdown-row:hover{background-color:var(--apex-table-more-actions-dropdown-hover-background-color, #F3F3F3)}.dropdown-row apex-img{width:20px;height:20px}.dropdown-row apex-img path{fill:var(--apex-table-dropdown-action-icon-fill, #5D6068);stroke:var(--apex-table-dropdown-action-icon-stroke, #FFFFFF00)}.dropdown-row:hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--apex-table-loading-bar-color, #FF7F50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--apex-table-action-hover-background-color, #F7F8FB)}.action-icon-wrapper apex-img path{fill:var(--apex-table-action-icon-fill, #5D6068);stroke:var(--apex-table-action-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.multiple-action-icon path{fill:var(--apex-table-action-more-icon-default-fill, #5D6068);stroke:var(--apex-table-action-more-icon-default-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--apex-table-action-more-icon-fill, #F96138);stroke:var(--apex-table-action-more-icon-stroke, #FFFFFF00)}.action-icon-wrapper apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-fill, #F96138);stroke:var(--apex-table-action-secondary-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-hover-fill, #5D6068);stroke:var(--apex-table-action-secondary-icon-hover-stroke, #FFFFFF00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--apex-table-page-picker-text-color, #FFF);background:var(--apex-table-page-picker-background, #F96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon", "options"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "component", type: ApexSelectComponent, selector: "apex-select", inputs: ["options"], outputs: ["selectChange", "helperTextChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexTableComponent, isStandalone: true, selector: "apex-table", inputs: { data: "data", dataLength: "dataLength", columns: "columns", filter: "filter", serverSide: "serverSide", isLoading: "isLoading", sortIndex: "sortIndex", sortable: "sortable", sortDirection: "sortDirection", pageSize: "pageSize", currentPage: "currentPage", pageable: "pageable", pageSizeOptions: "pageSizeOptions", virtualScroll: "virtualScroll", tableMaxHeight: "tableMaxHeight", stickyHeader: "stickyHeader", editMode: "editMode", selectionPosition: "selectionPosition", selectionHeader: "selectionHeader" }, outputs: { tableChange: "tableChange", selectionChange: "selectionChange", editModeChange: "editModeChange", rowClick: "rowClick", cellChange: "cellChange", selectAllAcrossChange: "selectAllAcrossChange" }, host: { listeners: { "document:click": "onClick($event)", "document:scroll": "onScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "DropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "textCellTpl", first: true, predicate: ["textCell"], descendants: true, static: true }, { propertyName: "numberCellTpl", first: true, predicate: ["numberCell"], descendants: true, static: true }, { propertyName: "currencyCellTpl", first: true, predicate: ["currencyCell"], descendants: true, static: true }, { propertyName: "numberMathCellTpl", first: true, predicate: ["numberMathCell"], descendants: true, static: true }, { propertyName: "dateCellTpl", first: true, predicate: ["dateCell"], descendants: true, static: true }, { propertyName: "chipCellTpl", first: true, predicate: ["chipCell"], descendants: true, static: true }, { propertyName: "checkboxCellTpl", first: true, predicate: ["checkboxCell"], descendants: true, static: true }, { propertyName: "actionCellTpl", first: true, predicate: ["actionCell"], descendants: true, static: true }, { propertyName: "listCellTpl", first: true, predicate: ["listCell"], descendants: true, static: true }, { propertyName: "statusCellTpl", first: true, predicate: ["statusCell"], descendants: true, static: true }, { propertyName: "selectCellTpl", first: true, predicate: ["selectCell"], descendants: true, static: true }, { propertyName: "moreActionsList", predicate: ["moreActionsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading, 'sticky-header': stickyHeader, 'header-stuck': isHeaderStuck() }\">\n    <!-- Server-side \"select all matching\" banner: shown once the current page is\n         fully selected and the filtered total exceeds the loaded page. -->\n    @if (selectionHeader === 'checkbox' && serverSide && allSelected() && dataLength > pageData().length) {\n        <div class=\"select-all-across\">\n            @if (selectAllAcross()) {\n                <span class=\"select-all-across-text\">All {{ dataLength | number }} selected.</span>\n                <button type=\"button\" class=\"select-all-across-btn\" (click)=\"setSelectAllAcross(false)\">Clear selection</button>\n            } @else {\n                <span class=\"select-all-across-text\">All {{ pageData().length }} on this page are selected.</span>\n                <button type=\"button\" class=\"select-all-across-btn\" (click)=\"setSelectAllAcross(true)\">Select all {{ dataLength | number }}</button>\n            }\n        </div>\n    }\n\n    @if (virtualScroll) {\n        @if (stickyHeader) {\n            <table class=\"sticky-virtual-header\">\n                <thead>\n                    <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                </thead>\n            </table>\n        }\n\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: virtualViewportHeight() + 'px' }\" [style.overflow-y]=\"showViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                @if (!stickyHeader) {\n                    <thead #theadRef>\n                        <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                    </thead>\n                }\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of pageData(); trackBy: trackByIndex\"\n                        class=\"row-clickable\"\n                        [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n                        [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\"\n                        (click)=\"onRowClick(row, $event)\"\n                        (keydown.enter)=\"onRowClick(row, $event)\">\n                        @if (editMode && selectionPosition === 'left') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\" [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode && selectionPosition === 'right') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n                <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n            </thead>\n\n            <tbody>\n                @for (row of pageData(); track $index) {\n                    <tr class=\"row-clickable\"\n                        [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n                        [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\"\n                        (click)=\"onRowClick(row, $event)\"\n                        (keydown.enter)=\"onRowClick(row, $event)\">\n                        @if (editMode && selectionPosition === 'left') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode && selectionPosition === 'right') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (currentActiveRow()?.isDropdown && currentActiveColumn()) {\n        <ng-container *ngTemplateOutlet=\"multipleActionsDropdown; context: { row: currentActiveRow(), column: currentActiveColumn() }\"></ng-container>\n    }\n\n    @if (filter && filteredData() && filteredData().length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && pageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange() }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages() }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <apex-select class=\"table\" [options]=\"pageSizeSelectOptions\"></apex-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '', column.cellOptions?.icon ? 'has-icon' : '']\"\n        [style.color]=\"getTextColor(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition !== 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            <span class=\"cell-text\">{{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}</span>\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition === 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n\n        @if (getChangeValue(row, column) !== null) {\n            <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div ApexTooltip role=\"button\" [attr.tabindex]=\"action.disabled ? -1 : 0\" [attr.aria-label]=\"action.label\" [attr.aria-disabled]=\"action.disabled ? 'true' : null\" (click)=\"action.execute && action.execute(row)\" (keydown.enter)=\"action.execute && action.execute(row)\" (keydown.space)=\"$event.preventDefault(); action.execute && action.execute(row)\" [apexTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <apex-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"''\"></apex-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList role=\"button\" tabindex=\"0\" aria-label=\"More actions\" aria-haspopup=\"menu\" [attr.aria-expanded]=\"row.isDropdown ? 'true' : 'false'\" [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, column, $event)\" (keydown.enter)=\"toggleActionDropdown(row, column, $event)\">\n                <svg class=\"multiple-action-icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\" [class.chips]=\"isChipArray(row, column)\">\n        @if (isChipArray(row, column)) {\n            @for (chip of getChipsVisible(row, column); track $index) {\n                <apex-chip [ngClass]=\"getClass(row, column)\"\n                    [style.--apex-chip-color]=\"getChipValueColor(chip.value, column)\"\n                    [style.--apex-chip-background-color]=\"getChipValueBackground(chip.value, column)\">{{ chip.label }}</apex-chip>\n            }\n\n            @if (getChipsOverflowCount(row, column) > 0) {\n                <apex-chip class=\"list-overflow-badge\"\n                    ApexTooltip\n                    [apexTooltip]=\"getChipsTooltip(row, column)\"\n                    [tooltipPosition]=\"tooltipPosition.Below\">\n                    +{{ getChipsOverflowCount(row, column) }}\n                </apex-chip>\n            }\n        } @else if (getChipLabel(row, column)) {\n            <apex-chip [ngClass]=\"getClass(row, column)\"\n                [style.--apex-chip-color]=\"getChipColor(row, column)\"\n                [style.--apex-chip-background-color]=\"getChipBackgroundColor(row, column)\"> {{ getChipLabel(row, column) }}</apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #statusCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell status\">\n        @for (step of column.statusSteps; track step.value; let i = $index) {\n            <div class=\"status-step\" [class.completed]=\"isStatusStepCompleted(row, column, i)\">\n                <span class=\"status-step-label\">{{ step.label }}</span>\n\n                <div class=\"status-step-bar\"\n                    [style.background-color]=\"isStatusStepCompleted(row, column, i) ? step.color : null\">\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #listCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell list\">\n        <span class=\"list-text\">{{ getListDisplayText(row, column) }}</span>\n\n        @if (getListOverflowCount(row, column) > 0) {\n            <apex-chip class=\"list-overflow-badge\"\n                ApexTooltip\n                [apexTooltip]=\"getListTooltipContent(row, column)\"\n                [tooltipPosition]=\"tooltipPosition.Below\">\n                +{{ getListOverflowCount(row, column) }}\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <apex-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></apex-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #selectCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell cell-select\" (click)=\"$event.stopPropagation()\">\n        <apex-select\n            [options]=\"getSelectCellOptions(row, column)\"\n            [style.--apex-select-input-text-color]=\"getSelectCellColor(row, column)\"\n            [style.--apex-select-arrow-color]=\"getSelectCellColor(row, column)\"\n            (selectChange)=\"onCellSelectChange(row, column, $event)\"></apex-select>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" role=\"button\" tabindex=\"0\" (click)=\"action.execute && action.execute(row)\" (keydown.enter)=\"action.execute && action.execute(row)\" (keydown.space)=\"$event.preventDefault(); action.execute && action.execute(row)\">\n                    <apex-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"''\"></apex-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span role=\"button\" tabindex=\"0\" aria-label=\"Page 1\" (click)=\"goToPage(0)\" (keydown.enter)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\" aria-hidden=\"true\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\" aria-hidden=\"true\">...</span>\n            <span role=\"button\" tabindex=\"0\" [attr.aria-label]=\"'Page ' + totalPages\" (click)=\"goToPage(totalPages - 1)\" (keydown.enter)=\"goToPage(totalPages - 1)\">{{ totalPages | number }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages()) {\n        <span [ngClass]=\"class\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"'Page ' + (page + 1)\" [attr.aria-current]=\"class === 'highlighted' ? 'page' : null\" (click)=\"goToPage(page)\" (keydown.enter)=\"goToPage(page)\">{{ page + 1 | number }}</span>\n    }\n</ng-template>\n\n<ng-template #headerRow>\n    <tr>\n        @if (editMode && selectionPosition === 'left') {\n            <ng-container *ngTemplateOutlet=\"selectionHeaderCell\"></ng-container>\n        }\n\n        @for (column of columns; track $index) {\n            <th scope=\"col\" [attr.aria-sort]=\"sortable && columns.indexOf(column) === sortIndex ? (sortDirection === 'asc' ? 'ascending' : 'descending') : null\" [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                <div class=\"cell\">\n                    <span>{{ column.label }}</span>\n\n                    @if (column.type !== TableColumnType.Actions && sortable) {\n                        <div class=\"arranger\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"'Sort by ' + column.label\" (click)=\"sortColumn(column)\" (keydown.enter)=\"sortColumn(column)\" (keydown.space)=\"$event.preventDefault(); sortColumn(column)\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                            </svg>\n                        </div>\n                    }\n                </div>\n            </th>\n        }\n\n        @if (editMode && selectionPosition === 'right') {\n            <ng-container *ngTemplateOutlet=\"selectionHeaderCell\"></ng-container>\n        }\n    </tr>\n</ng-template>\n\n<ng-template #selectionHeaderCell>\n    <th scope=\"col\" class=\"select-column\" (click)=\"selectionHeader === 'checkbox' ? toggleSelectAll() : null\">\n        <div class=\"cell\" [class.checkbox]=\"selectionHeader === 'checkbox'\">\n            @if (selectionHeader === 'checkbox') {\n                <apex-checkbox [checked]=\"allSelected()\"></apex-checkbox>\n            } @else {\n                <span class=\"select-all-btn\" role=\"button\" tabindex=\"0\" (click)=\"toggleSelectAll()\" (keydown.enter)=\"toggleSelectAll()\" (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\">{{ allSelected() ? 'Deselect' : 'Select all' }}</span>\n            }\n        </div>\n    </th>\n</ng-template>\n\n<ng-template #selectionBodyCell let-row=\"row\">\n    <td class=\"select-column\" (click)=\"toggleRowSelection(row, $event)\">\n        <div class=\"cell checkbox\">\n            <apex-checkbox [checked]=\"isRowSelected(row)\"></apex-checkbox>\n        </div>\n    </td>\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}.sticky-header{overflow:visible}.sticky-header table{border-collapse:separate;border-spacing:0}.sticky-header th{position:sticky;top:0;z-index:1}.header-stuck th{background-color:var(--apex-table-header-background-color, #ffffff)}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--apex-table-row-bottom-border-color, #e9e9e9)}tbody tr.row-clickable{cursor:pointer;transition:background-color .15s ease}tbody tr.row-clickable:hover{background-color:var(--apex-table-row-hover-background-color, #f7f7f7)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--apex-table-first-row-text-color, #5d6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}apex-chip{max-width:100%;--apex-chip-background-color: #fff2ef;--apex-chip-color: #f96138}.cell.has-change{display:flex;align-items:center;justify-content:center}.cell.has-icon{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;line-height:20px}.cell-icon{width:16px;height:16px;min-width:16px;display:flex;align-items:center;justify-content:center}.cell-icon apex-img{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.cell-icon.has-color path{fill:var(--apex-table-cell-icon-fill);stroke:var(--apex-table-cell-icon-stroke)}.cell.has-icon .cell-text{color:inherit}apex-chip.change-positive{--apex-chip-background-color: var( --apex-table-change-positive-background, #e6f9f0 );--apex-chip-color: var(--apex-table-change-positive-color, #00b67a);margin-left:8px}apex-chip.change-negative{--apex-chip-background-color: var( --apex-table-change-negative-background, #fff2ef );--apex-chip-color: var(--apex-table-change-negative-color, #f96138);margin-left:8px}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell-select{--apex-select-input-border-width: 0;--apex-select-input-placeholder-color: #9A9A9A}.cell-select apex-select{width:100%}.cell.checkbox{display:flex;justify-content:center;align-items:center;--apex-checkbox-disabled-opacity: 1}.select-column .cell.checkbox apex-checkbox{pointer-events:none}.select-column .cell.checkbox{width:100%}.cell.list{display:flex;align-items:center;justify-content:flex-start;gap:8px}.list-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}apex-chip.list-overflow-badge{--apex-chip-background-color: var( --apex-table-list-overflow-background, transparent );--apex-chip-color: var(--apex-table-list-overflow-color, #ffa753);--apex-chip-font-size: 13px;--apex-chip-height: 20px;--apex-chip-padding: 0 4px;--apex-chip-border-width: 1px;--apex-chip-border-color: var( --apex-table-list-overflow-border-color, #ffefe1 );--apex-chip-border-radius: 5px;cursor:default;flex-shrink:0;font-weight:500;line-height:20px;letter-spacing:0}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions apex-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--apex-chip-background-color: var(--apex-table-chip-background-color);--apex-chip-color: var(--apex-table-chip-color)}.cell.chip .secondary{--apex-chip-background-color: var( --apex-table-chip-background-color-secondary );--apex-chip-color: var(--apex-table-chip-color-secondary)}.cell.chip.chips{flex-wrap:nowrap;justify-content:flex-start;min-width:0;overflow:hidden;gap:4px}.cell.chip.chips apex-chip:not(.list-overflow-badge){min-width:0;overflow:hidden;--apex-chip-background-color: var(--apex-table-chips-background, #f1e8ff);--apex-chip-color: var(--apex-table-chips-color, #000000);--apex-chip-font-size: 12px;--apex-chip-height: 28px;--apex-chip-padding: 4px 10px;--apex-chip-border-radius: 6px}.cell.status{display:flex;align-items:center;gap:var(--apex-table-status-gap, 8px)}.status-step{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.status-step-label{font-size:12px;line-height:16px;color:var(--apex-table-status-label-color, #888b95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-step.completed .status-step-label{color:var(--apex-table-status-label-completed-color, #191b22);font-weight:600}.status-step-bar{height:var(--apex-table-status-bar-height, 3px);border-radius:2px;background-color:var(--apex-table-status-incomplete-color, #e5e7eb)}.select-column{width:80px;min-width:80px;max-width:80px}.select-all-btn{cursor:pointer;font-size:var(--apex-table-select-all-font-size, 12px);font-weight:var(--apex-table-select-all-font-weight, 600);color:var(--apex-table-select-all-color, #f96138);background-color:var(--apex-table-select-all-background-color, transparent);text-wrap:nowrap}.select-all-btn:hover{color:var(--apex-table-select-all-hover-color, #e0562f)}tr.selected-row{background-color:var(--apex-table-selected-row-background-color, #fff7f5)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var( --apex-table-more-actions-dropdown-background-color, #ffffff );border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var( --apex-table-more-actions-dropdown-background-color, #ffffff );padding:0 12px}.dropdown-row:hover{background-color:var( --apex-table-more-actions-dropdown-hover-background-color, #f3f3f3 )}.dropdown-row apex-img{width:20px;height:20px}.dropdown-row apex-img path{fill:var(--apex-table-dropdown-action-icon-fill, #5d6068);stroke:var(--apex-table-dropdown-action-icon-stroke, #ffffff00)}.dropdown-row:hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #f96138);stroke:var(--apex-table-action-icon-hover-stroke, #ffffff00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--apex-table-loading-bar-color, #ff7f50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--apex-table-action-hover-background-color, #f7f8fb)}.action-icon-wrapper apex-img path{fill:var(--apex-table-action-icon-fill, #5d6068);stroke:var(--apex-table-action-icon-stroke, #ffffff00)}.action-icon-wrapper:not(.disabled):hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #f96138);stroke:var(--apex-table-action-icon-hover-stroke, #ffffff00)}.multiple-action-icon path{fill:var(--apex-table-action-more-icon-default-fill, #5d6068);stroke:var(--apex-table-action-more-icon-default-stroke, #ffffff00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--apex-table-action-more-icon-fill, #f96138);stroke:var(--apex-table-action-more-icon-stroke, #ffffff00)}.action-icon-wrapper apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-fill, #f96138);stroke:var(--apex-table-action-secondary-icon-stroke, #ffffff00)}.action-icon-wrapper:not(.disabled):hover apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-hover-fill, #5d6068);stroke:var(--apex-table-action-secondary-icon-hover-stroke, #ffffff00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;padding:0 6px;box-sizing:border-box;flex-shrink:0;white-space:nowrap;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--apex-table-page-picker-text-color, #fff);background:var(--apex-table-page-picker-background, #f96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}.select-all-across{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;font-size:13px;color:var(--apex-table-select-all-across-text-color, #5d6068);background-color:var(--apex-table-select-all-across-background-color, #fff7f5);border-bottom:1px solid var(--apex-table-row-bottom-border-color, #e9e9e9)}.select-all-across-btn{padding:0;border:none;background:none;font:inherit;font-weight:600;color:var(--apex-table-select-all-color, #f96138);cursor:pointer}.select-all-across-btn:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon", "options"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt", "loading"] }, { kind: "component", type: ApexSelectComponent, selector: "apex-select", inputs: ["options"], outputs: ["selectChange", "helperTextChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexTableComponent, decorators: [{
             type: Component,
@@ -798,7 +939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ApexTooltipDirective,
                         ApexCheckboxComponent,
                         ScrollingModule,
-                    ], template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading, 'sticky-header': stickyHeader, 'header-stuck': isHeaderStuck() }\">\n    @if (virtualScroll) {\n        @if (stickyHeader) {\n            <table class=\"sticky-virtual-header\">\n                <thead>\n                    <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                </thead>\n            </table>\n        }\n\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: virtualViewportHeight() + 'px' }\" [style.overflow-y]=\"showViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                @if (!stickyHeader) {\n                    <thead #theadRef>\n                        <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                    </thead>\n                }\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of pageData(); trackBy: trackByIndex\" [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\" [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode) {\n                            <td class=\"select-column\" (click)=\"toggleRowSelection(row, $event)\">\n                                <div class=\"cell checkbox\">\n                                    <apex-checkbox [checked]=\"isRowSelected(row)\"></apex-checkbox>\n                                </div>\n                            </td>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n                <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n            </thead>\n\n            <tbody>\n                @for (row of pageData(); track $index) {\n                    <tr [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\">\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode) {\n                            <td class=\"select-column\" (click)=\"toggleRowSelection(row, $event)\">\n                                <div class=\"cell checkbox\">\n                                    <apex-checkbox [checked]=\"isRowSelected(row)\"></apex-checkbox>\n                                </div>\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (currentActiveRow()?.isDropdown && currentActiveColumn()) {\n        <ng-container *ngTemplateOutlet=\"multipleActionsDropdown; context: { row: currentActiveRow(), column: currentActiveColumn() }\"></ng-container>\n    }\n\n    @if (filter && filteredData() && filteredData().length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && pageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange() }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages() }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <apex-select class=\"table\" [options]=\"pageSizeSelectOptions\"></apex-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '', column.cellOptions?.icon ? 'has-icon' : '']\"\n        [style.color]=\"getTextColor(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition !== 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            <span class=\"cell-text\">{{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}</span>\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition === 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n\n        @if (getChangeValue(row, column) !== null) {\n            <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div ApexTooltip (click)=\"action.execute && action.execute(row)\" [apexTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <apex-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"'Action icon for ' + action.label\"></apex-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, column, $event)\">\n                <svg class=\"multiple-action-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\">\n        @if (getChipLabel(row, column)) {\n            <apex-chip [ngClass]=\"getClass(row, column)\"\n                [style.--apex-chip-color]=\"getChipColor(row, column)\"\n                [style.--apex-chip-background-color]=\"getChipBackgroundColor(row, column)\"> {{ getChipLabel(row, column) }}</apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #statusCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell status\">\n        @for (step of column.statusSteps; track step.value; let i = $index) {\n            <div class=\"status-step\" [class.completed]=\"isStatusStepCompleted(row, column, i)\">\n                <span class=\"status-step-label\">{{ step.label }}</span>\n\n                <div class=\"status-step-bar\"\n                    [style.background-color]=\"isStatusStepCompleted(row, column, i) ? step.color : null\">\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #listCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell list\">\n        <span class=\"list-text\">{{ getListDisplayText(row, column) }}</span>\n\n        @if (getListOverflowCount(row, column) > 0) {\n            <apex-chip class=\"list-overflow-badge\"\n                ApexTooltip\n                [apexTooltip]=\"getListTooltipContent(row, column)\"\n                [tooltipPosition]=\"tooltipPosition.Below\">\n                +{{ getListOverflowCount(row, column) }}\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <apex-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></apex-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" (click)=\"action.execute && action.execute(row)\">\n                    <apex-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"'Action icon for ' + action.label\"></apex-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span (click)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\">...</span>\n            <span (click)=\"goToPage(totalPages - 1)\">{{ totalPages }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages()) {\n        <span [ngClass]=\"class\" (click)=\"goToPage(page)\">{{ page + 1 }}</span>\n    }\n</ng-template>\n\n<ng-template #headerRow>\n    <tr>\n        @for (column of columns; track $index) {\n            <th [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                <div class=\"cell\">\n                    <span>{{ column.label }}</span>\n\n                    @if (column.type !== TableColumnType.Actions && sortable) {\n                        <div class=\"arranger\" (click)=\"sortColumn(column)\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\">\n                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                            </svg>\n                        </div>\n                    }\n                </div>\n            </th>\n        }\n\n        @if (editMode) {\n            <th class=\"select-column\">\n                <div class=\"cell\">\n                    <span class=\"select-all-btn\" (click)=\"toggleSelectAll()\">{{ allSelected() ? 'Deselect' : 'Select all' }}</span>\n                </div>\n            </th>\n        }\n    </tr>\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}.sticky-header{overflow:visible}.sticky-header table{border-collapse:separate;border-spacing:0}.sticky-header th{position:sticky;top:0;z-index:1}.header-stuck th{background-color:var(--apex-table-header-background-color, #FFFFFF)}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--apex-table-row-bottom-border-color, #E9E9E9)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--apex-table-first-row-text-color, #5D6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}apex-chip{max-width:100%;--apex-chip-background-color: #FFF2EF;--apex-chip-color: #F96138}.cell.has-change{display:flex;align-items:center;justify-content:center}.cell.has-icon{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;line-height:20px}.cell-icon{width:16px;height:16px;min-width:16px;display:flex;align-items:center;justify-content:center}.cell-icon apex-img{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.cell-icon.has-color path{fill:var(--apex-table-cell-icon-fill);stroke:var(--apex-table-cell-icon-stroke)}.cell.has-icon .cell-text{color:inherit}apex-chip.change-positive{--apex-chip-background-color: var(--apex-table-change-positive-background, #E6F9F0);--apex-chip-color: var(--apex-table-change-positive-color, #00B67A);margin-left:8px}apex-chip.change-negative{--apex-chip-background-color: var(--apex-table-change-negative-background, #FFF2EF);--apex-chip-color: var(--apex-table-change-negative-color, #F96138);margin-left:8px}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell.checkbox{display:flex;justify-content:center;align-items:center;--apex-checkbox-disabled-opacity: 1}.select-column .cell.checkbox apex-checkbox{pointer-events:none}.cell.list{display:flex;align-items:center;justify-content:flex-start;gap:8px}.list-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}apex-chip.list-overflow-badge{--apex-chip-background-color: var(--apex-table-list-overflow-background, transparent);--apex-chip-color: var(--apex-table-list-overflow-color, #FFA753);--apex-chip-font-size: 13px;--apex-chip-height: 20px;--apex-chip-padding: 0 4px;--apex-chip-border-width: 1px;--apex-chip-border-color: var(--apex-table-list-overflow-border-color, #FFEFE1);--apex-chip-border-radius: 5px;cursor:default;flex-shrink:0;font-weight:500;line-height:20px;letter-spacing:0}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions apex-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--apex-chip-background-color: var(--apex-table-chip-background-color);--apex-chip-color: var(--apex-table-chip-color)}.cell.chip .secondary{--apex-chip-background-color: var(--apex-table-chip-background-color-secondary);--apex-chip-color: var(--apex-table-chip-color-secondary)}.cell.status{display:flex;align-items:center;gap:var(--apex-table-status-gap, 8px)}.status-step{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.status-step-label{font-size:12px;line-height:16px;color:var(--apex-table-status-label-color, #888B95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-step.completed .status-step-label{color:var(--apex-table-status-label-completed-color, #191B22);font-weight:600}.status-step-bar{height:var(--apex-table-status-bar-height, 3px);border-radius:2px;background-color:var(--apex-table-status-incomplete-color, #E5E7EB)}.select-column{width:80px;min-width:80px;max-width:80px}.select-all-btn{cursor:pointer;font-size:var(--apex-table-select-all-font-size, 12px);font-weight:var(--apex-table-select-all-font-weight, 600);color:var(--apex-table-select-all-color, #F96138);background-color:var(--apex-table-select-all-background-color, transparent);text-wrap:nowrap}.select-all-btn:hover{color:var(--apex-table-select-all-hover-color, #E0562F)}tr.selected-row{background-color:var(--apex-table-selected-row-background-color, #FFF7F5)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var(--apex-table-more-actions-dropdown-background-color, #FFFFFF);padding:0 12px}.dropdown-row:hover{background-color:var(--apex-table-more-actions-dropdown-hover-background-color, #F3F3F3)}.dropdown-row apex-img{width:20px;height:20px}.dropdown-row apex-img path{fill:var(--apex-table-dropdown-action-icon-fill, #5D6068);stroke:var(--apex-table-dropdown-action-icon-stroke, #FFFFFF00)}.dropdown-row:hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--apex-table-loading-bar-color, #FF7F50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--apex-table-action-hover-background-color, #F7F8FB)}.action-icon-wrapper apex-img path{fill:var(--apex-table-action-icon-fill, #5D6068);stroke:var(--apex-table-action-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #F96138);stroke:var(--apex-table-action-icon-hover-stroke, #FFFFFF00)}.multiple-action-icon path{fill:var(--apex-table-action-more-icon-default-fill, #5D6068);stroke:var(--apex-table-action-more-icon-default-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--apex-table-action-more-icon-fill, #F96138);stroke:var(--apex-table-action-more-icon-stroke, #FFFFFF00)}.action-icon-wrapper apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-fill, #F96138);stroke:var(--apex-table-action-secondary-icon-stroke, #FFFFFF00)}.action-icon-wrapper:not(.disabled):hover apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-hover-fill, #5D6068);stroke:var(--apex-table-action-secondary-icon-hover-stroke, #FFFFFF00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--apex-table-page-picker-text-color, #FFF);background:var(--apex-table-page-picker-background, #F96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}\n"] }]
+                    ], template: "<div class=\"container\" [ngClass]=\"{ 'is-loading': isLoading, 'sticky-header': stickyHeader, 'header-stuck': isHeaderStuck() }\">\n    <!-- Server-side \"select all matching\" banner: shown once the current page is\n         fully selected and the filtered total exceeds the loaded page. -->\n    @if (selectionHeader === 'checkbox' && serverSide && allSelected() && dataLength > pageData().length) {\n        <div class=\"select-all-across\">\n            @if (selectAllAcross()) {\n                <span class=\"select-all-across-text\">All {{ dataLength | number }} selected.</span>\n                <button type=\"button\" class=\"select-all-across-btn\" (click)=\"setSelectAllAcross(false)\">Clear selection</button>\n            } @else {\n                <span class=\"select-all-across-text\">All {{ pageData().length }} on this page are selected.</span>\n                <button type=\"button\" class=\"select-all-across-btn\" (click)=\"setSelectAllAcross(true)\">Select all {{ dataLength | number }}</button>\n            }\n        </div>\n    }\n\n    @if (virtualScroll) {\n        @if (stickyHeader) {\n            <table class=\"sticky-virtual-header\">\n                <thead>\n                    <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                </thead>\n            </table>\n        }\n\n        <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"cdk-table-viewport\" [ngStyle]=\"{ height: virtualViewportHeight() + 'px' }\" [style.overflow-y]=\"showViewportScroll() ? 'auto' : 'hidden'\" (scrolled)=\"onViewportScroll()\">\n            <table>\n                @if (!stickyHeader) {\n                    <thead #theadRef>\n                        <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n                    </thead>\n                }\n\n                <tbody>\n                    <tr *cdkVirtualFor=\"let row of pageData(); trackBy: trackByIndex\"\n                        class=\"row-clickable\"\n                        [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n                        [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\"\n                        (click)=\"onRowClick(row, $event)\"\n                        (keydown.enter)=\"onRowClick(row, $event)\">\n                        @if (editMode && selectionPosition === 'left') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\" [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode && selectionPosition === 'right') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n                    </tr>\n                </tbody>\n            </table>\n        </cdk-virtual-scroll-viewport>\n    } @else {\n        <table>\n            <thead>\n                <ng-container *ngTemplateOutlet=\"headerRow\"></ng-container>\n            </thead>\n\n            <tbody>\n                @for (row of pageData(); track $index) {\n                    <tr class=\"row-clickable\"\n                        [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n                        [ngClass]=\"{ 'selected-row': editMode && isRowSelected(row) }\"\n                        (click)=\"onRowClick(row, $event)\"\n                        (keydown.enter)=\"onRowClick(row, $event)\">\n                        @if (editMode && selectionPosition === 'left') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n\n                        @for (column of columns; track $index) {\n                            <td tabindex=\"-1\">\n                                <ng-container [ngTemplateOutlet]=\"getCellTemplate(column)\"\n                                              [ngTemplateOutletContext]=\"{ row: row, column: column, $index: $index }\">\n                                </ng-container>\n                            </td>\n                        }\n\n                        @if (editMode && selectionPosition === 'right') {\n                            <ng-container *ngTemplateOutlet=\"selectionBodyCell; context: { row: row }\"></ng-container>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n    }\n\n    @if (currentActiveRow()?.isDropdown && currentActiveColumn()) {\n        <ng-container *ngTemplateOutlet=\"multipleActionsDropdown; context: { row: currentActiveRow(), column: currentActiveColumn() }\"></ng-container>\n    }\n\n    @if (filter && filteredData() && filteredData().length === 0) {\n        <div class=\"row no-data\">\n            <span>No data matching the filter:</span>\n\n            <span>\"{{ filter }}\"</span>\n        </div>\n    }\n\n    @if (!filter && data && data.length === 0) {\n        <div class=\"row no-data\">No data available.</div>\n    }\n\n    @if (pageable && pageData().length !== 0) {\n        <div class=\"paging\">\n            <div class=\"visible-range\">{{ visibleRange() }}</div>\n\n            <ng-container *ngTemplateOutlet=\"pagePicker; context: { totalPages: totalPages() }\"></ng-container>\n\n            <div class=\"page-size-option-picker\">\n                <span>Items per page:</span>\n\n                <apex-select class=\"table\" [options]=\"pageSizeSelectOptions\"></apex-select>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template #textCell let-row=\"row\" let-column=\"column\" let-index=\"$index\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '', column.cellOptions?.icon ? 'has-icon' : '']\"\n        [style.color]=\"getTextColor(row, column)\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition !== 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            <span class=\"cell-text\">{{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) }}{{ column.suffix ? column.suffix : '' }}</span>\n\n            @if (getCellIcon(row, column) && column.cellOptions?.iconPosition === 'right') {\n                <div class=\"cell-icon\" [class.has-color]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-fill]=\"getCellIconColor(row, column)\" [style.--apex-table-cell-icon-stroke]=\"getCellIconColor(row, column)\">\n                    <apex-img [src]=\"'assets/img/' + getCellIcon(row, column)\" [alt]=\"'Cell icon.'\"></apex-img>\n                </div>\n            }\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #dateCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"getClass(row, column)\">\n        {{ formatDate(getDescendantProp(row, column), column.dateFormat) }}\n    </div>\n</ng-template>\n\n<ng-template #currencyCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\">\n\n        @if (getDescendantProp(row, column) !== undefined) {\n            {{ column.prefix ? column.prefix : '' }}{{ (getDescendantProp(row, column) / 100) | number }}\n        }\n\n        @if (getChangeValue(row, column) !== null) {\n            <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #numberCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #numberMathCell let-row=\"row\" let-column=\"column\" let-index=\"i\">\n    <div class=\"cell\"\n        [ngClass]=\"[getClass(row, column), column.change ? 'has-change' : '']\"\n        [attr.contenteditable]=\"column.editable\"\n        (keyup)=\"cellEdit($event, column.value, index)\">\n\n            {{ column.prefix ? column.prefix : '' }}{{ getDescendantProp(row, column) | number}}{{ column.suffix ? column.suffix : '' }}\n\n            @if (getChangeValue(row, column) !== null) {\n                <apex-chip [ngClass]=\"getChangeValue(row, column)! >= 0 ? 'change-positive' : 'change-negative'\">\n                    {{ getChangeValue(row, column)! >= 0 ? '+' : '' }}{{ getChangeValue(row, column) }}%\n                </apex-chip>\n            }\n    </div>\n</ng-template>\n\n<ng-template #actionCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell actions\">\n\n        @for (action of column.singleActions; track $index) {\n            @if (handleActionShow(action, row, column)) {\n                <div ApexTooltip role=\"button\" [attr.tabindex]=\"action.disabled ? -1 : 0\" [attr.aria-label]=\"action.label\" [attr.aria-disabled]=\"action.disabled ? 'true' : null\" (click)=\"action.execute && action.execute(row)\" (keydown.enter)=\"action.execute && action.execute(row)\" (keydown.space)=\"$event.preventDefault(); action.execute && action.execute(row)\" [apexTooltip]=\"action.label\" [tooltipPosition]=\"tooltipPosition.Above\" class=\"action-icon-wrapper\" [ngClass]=\"{ 'disabled': action.disabled }\">\n                    <apex-img [src]=\" 'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"''\"></apex-img>\n                </div>\n            }\n        }\n\n        @if (column.multipleActions) {\n            <div class=\"action-icon-wrapper\" #moreActionsList role=\"button\" tabindex=\"0\" aria-label=\"More actions\" aria-haspopup=\"menu\" [attr.aria-expanded]=\"row.isDropdown ? 'true' : 'false'\" [ngClass]=\"{ 'opened': row.isDropdown }\" (click)=\"toggleActionDropdown(row, column, $event)\" (keydown.enter)=\"toggleActionDropdown(row, column, $event)\">\n                <svg class=\"multiple-action-icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\n                    <path d=\"M10.3047 8C10.3047 8.34612 10.2021 8.68446 10.0098 8.97225C9.81747 9.26004 9.54416 9.48434 9.22438 9.61679C8.90461 9.74924 8.55275 9.7839 8.21328 9.71638C7.87381 9.64885 7.56199 9.48218 7.31725 9.23744C7.07251 8.9927 6.90584 8.68088 6.83831 8.34141C6.77079 8.00194 6.80545 7.65008 6.9379 7.33031C7.07035 7.01053 7.29465 6.73722 7.58244 6.54493C7.87023 6.35264 8.20857 6.25 8.55469 6.25C9.01868 6.25046 9.46353 6.43498 9.79162 6.76307C10.1197 7.09116 10.3042 7.53601 10.3047 8ZM8.55469 4.75C8.90081 4.75 9.23915 4.64737 9.52694 4.45507C9.81472 4.26278 10.039 3.98947 10.1715 3.6697C10.3039 3.34993 10.3386 2.99806 10.2711 2.65859C10.2035 2.31913 10.0369 2.00731 9.79213 1.76256C9.54738 1.51782 9.23556 1.35115 8.8961 1.28363C8.55663 1.2161 8.20476 1.25076 7.88499 1.38321C7.56522 1.51566 7.29191 1.73997 7.09962 2.02775C6.90732 2.31554 6.80469 2.65388 6.80469 3C6.80515 3.46399 6.98967 3.90884 7.31776 4.23693C7.64585 4.56502 8.0907 4.74954 8.55469 4.75ZM8.55469 11.25C8.20857 11.25 7.87023 11.3526 7.58244 11.5449C7.29465 11.7372 7.07035 12.0105 6.9379 12.3303C6.80545 12.6501 6.77079 13.0019 6.83831 13.3414C6.90584 13.6809 7.07251 13.9927 7.31725 14.2374C7.56199 14.4822 7.87381 14.6489 8.21328 14.7164C8.55275 14.7839 8.90461 14.7492 9.22438 14.6168C9.54416 14.4843 9.81747 14.26 10.0098 13.9722C10.2021 13.6845 10.3047 13.3461 10.3047 13C10.3042 12.536 10.1197 12.0912 9.79162 11.7631C9.46353 11.435 9.01868 11.2505 8.55469 11.25Z\"/>\n                </svg>\n            </div>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #chipCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell chip\" [class.chips]=\"isChipArray(row, column)\">\n        @if (isChipArray(row, column)) {\n            @for (chip of getChipsVisible(row, column); track $index) {\n                <apex-chip [ngClass]=\"getClass(row, column)\"\n                    [style.--apex-chip-color]=\"getChipValueColor(chip.value, column)\"\n                    [style.--apex-chip-background-color]=\"getChipValueBackground(chip.value, column)\">{{ chip.label }}</apex-chip>\n            }\n\n            @if (getChipsOverflowCount(row, column) > 0) {\n                <apex-chip class=\"list-overflow-badge\"\n                    ApexTooltip\n                    [apexTooltip]=\"getChipsTooltip(row, column)\"\n                    [tooltipPosition]=\"tooltipPosition.Below\">\n                    +{{ getChipsOverflowCount(row, column) }}\n                </apex-chip>\n            }\n        } @else if (getChipLabel(row, column)) {\n            <apex-chip [ngClass]=\"getClass(row, column)\"\n                [style.--apex-chip-color]=\"getChipColor(row, column)\"\n                [style.--apex-chip-background-color]=\"getChipBackgroundColor(row, column)\"> {{ getChipLabel(row, column) }}</apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #statusCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell status\">\n        @for (step of column.statusSteps; track step.value; let i = $index) {\n            <div class=\"status-step\" [class.completed]=\"isStatusStepCompleted(row, column, i)\">\n                <span class=\"status-step-label\">{{ step.label }}</span>\n\n                <div class=\"status-step-bar\"\n                    [style.background-color]=\"isStatusStepCompleted(row, column, i) ? step.color : null\">\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #listCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell list\">\n        <span class=\"list-text\">{{ getListDisplayText(row, column) }}</span>\n\n        @if (getListOverflowCount(row, column) > 0) {\n            <apex-chip class=\"list-overflow-badge\"\n                ApexTooltip\n                [apexTooltip]=\"getListTooltipContent(row, column)\"\n                [tooltipPosition]=\"tooltipPosition.Below\">\n                +{{ getListOverflowCount(row, column) }}\n            </apex-chip>\n        }\n    </div>\n</ng-template>\n\n<ng-template #checkboxCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell checkbox\">\n        <apex-checkbox [checked]=\"getCheckboxState(row, column)\" [disabled]=\"true\"></apex-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #selectCell let-row=\"row\" let-column=\"column\">\n    <div class=\"cell cell-select\" (click)=\"$event.stopPropagation()\">\n        <apex-select\n            [options]=\"getSelectCellOptions(row, column)\"\n            [style.--apex-select-input-text-color]=\"getSelectCellColor(row, column)\"\n            [style.--apex-select-arrow-color]=\"getSelectCellColor(row, column)\"\n            (selectChange)=\"onCellSelectChange(row, column, $event)\"></apex-select>\n    </div>\n</ng-template>\n\n<ng-template #multipleActionsDropdown let-row=\"row\" let-column=\"column\">\n    <div #multipleActionsDropdownElement #dropdownElement class=\"more-actions-dropdown\">\n        @for (action of column.multipleActions; track $index) {\n\n            @if (handleActionShow(action, row, column)) {\n                <div class=\"dropdown-row\" role=\"button\" tabindex=\"0\" (click)=\"action.execute && action.execute(row)\" (keydown.enter)=\"action.execute && action.execute(row)\" (keydown.space)=\"$event.preventDefault(); action.execute && action.execute(row)\">\n                    <apex-img [src]=\"'assets/img/' + action.icon\" [ngClass]=\"action.class\" [alt]=\"''\"></apex-img>\n\n                    <span>{{ action.label }}</span>\n                </div>\n            }\n\n        }\n    </div>\n</ng-template>\n\n<ng-template #pagePicker let-totalPages=\"totalPages\">\n    <div class=\"page-picker\">\n        <!-- If page one should be visible -->\n        @if (currentPage + 1 >= 3) {\n            <span role=\"button\" tabindex=\"0\" aria-label=\"Page 1\" (click)=\"goToPage(0)\" (keydown.enter)=\"goToPage(0)\">1</span>\n            <span class=\"style-excluded\" aria-hidden=\"true\">...</span>\n        }\n\n        <!-- Middle part of the page-picker -->\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage - 1 } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage, class: 'highlighted' } \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"page; context: { page: currentPage + 1 } \"></ng-container>\n\n        <!-- If last page should be visible -->\n        @if (currentPage + 1 <= totalPages - 2) {\n            <span class=\"style-excluded\" aria-hidden=\"true\">...</span>\n            <span role=\"button\" tabindex=\"0\" [attr.aria-label]=\"'Page ' + totalPages\" (click)=\"goToPage(totalPages - 1)\" (keydown.enter)=\"goToPage(totalPages - 1)\">{{ totalPages | number }}</span>\n        }\n\n    </div>\n</ng-template>\n\n<ng-template #page let-page=\"page\" let-class=\"class\">\n    @if (page >= 0 && page < totalPages()) {\n        <span [ngClass]=\"class\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"'Page ' + (page + 1)\" [attr.aria-current]=\"class === 'highlighted' ? 'page' : null\" (click)=\"goToPage(page)\" (keydown.enter)=\"goToPage(page)\">{{ page + 1 | number }}</span>\n    }\n</ng-template>\n\n<ng-template #headerRow>\n    <tr>\n        @if (editMode && selectionPosition === 'left') {\n            <ng-container *ngTemplateOutlet=\"selectionHeaderCell\"></ng-container>\n        }\n\n        @for (column of columns; track $index) {\n            <th scope=\"col\" [attr.aria-sort]=\"sortable && columns.indexOf(column) === sortIndex ? (sortDirection === 'asc' ? 'ascending' : 'descending') : null\" [ngStyle]=\"{ width: column.width ? column.width : '' }\">\n                <div class=\"cell\">\n                    <span>{{ column.label }}</span>\n\n                    @if (column.type !== TableColumnType.Actions && sortable) {\n                        <div class=\"arranger\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"'Sort by ' + column.label\" (click)=\"sortColumn(column)\" (keydown.enter)=\"sortColumn(column)\" (keydown.space)=\"$event.preventDefault(); sortColumn(column)\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                                <path d=\"M3.11445 5.50005H8.88795C9.31895 5.50005 9.54795 4.99005 9.26145 4.66755L6.37495 1.42005C6.32813 1.3672 6.27063 1.32489 6.20624 1.29591C6.14186 1.26694 6.07205 1.25195 6.00145 1.25195C5.93084 1.25195 5.86104 1.26694 5.79666 1.29591C5.73227 1.32489 5.67477 1.3672 5.62795 1.42005L2.74045 4.66755C2.45395 4.99005 2.68295 5.50005 3.11445 5.50005ZM5.62745 10.5795C5.67427 10.6324 5.73177 10.6747 5.79616 10.7037C5.86054 10.7327 5.93034 10.7476 6.00095 10.7476C6.07155 10.7476 6.14136 10.7327 6.20574 10.7037C6.27013 10.6747 6.32763 10.6324 6.37445 10.5795L9.26095 7.33205C9.54795 7.01005 9.31895 6.50005 8.88745 6.50005H3.11445C2.68345 6.50005 2.45445 7.01005 2.74095 7.33255L5.62745 10.5795Z\" fill=\"#C6C6C6\"/>\n                            </svg>\n                        </div>\n                    }\n                </div>\n            </th>\n        }\n\n        @if (editMode && selectionPosition === 'right') {\n            <ng-container *ngTemplateOutlet=\"selectionHeaderCell\"></ng-container>\n        }\n    </tr>\n</ng-template>\n\n<ng-template #selectionHeaderCell>\n    <th scope=\"col\" class=\"select-column\" (click)=\"selectionHeader === 'checkbox' ? toggleSelectAll() : null\">\n        <div class=\"cell\" [class.checkbox]=\"selectionHeader === 'checkbox'\">\n            @if (selectionHeader === 'checkbox') {\n                <apex-checkbox [checked]=\"allSelected()\"></apex-checkbox>\n            } @else {\n                <span class=\"select-all-btn\" role=\"button\" tabindex=\"0\" (click)=\"toggleSelectAll()\" (keydown.enter)=\"toggleSelectAll()\" (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\">{{ allSelected() ? 'Deselect' : 'Select all' }}</span>\n            }\n        </div>\n    </th>\n</ng-template>\n\n<ng-template #selectionBodyCell let-row=\"row\">\n    <td class=\"select-column\" (click)=\"toggleRowSelection(row, $event)\">\n        <div class=\"cell checkbox\">\n            <apex-checkbox [checked]=\"isRowSelected(row)\"></apex-checkbox>\n        </div>\n    </td>\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:100%;position:relative;overflow:auto;padding:24px 0}.cdk-table-viewport{width:100%;display:block;overflow:auto;scrollbar-gutter:stable}.cdk-table-viewport .cdk-virtual-scroll-content-wrapper{width:100%;display:block}table{width:100%;text-align:center;table-layout:fixed;border-collapse:collapse}thead tr{border:none}.sticky-header{overflow:visible}.sticky-header table{border-collapse:separate;border-spacing:0}.sticky-header th{position:sticky;top:0;z-index:1}.header-stuck th{background-color:var(--apex-table-header-background-color, #ffffff)}tr{height:42px;vertical-align:middle;border-bottom:1px solid var(--apex-table-row-bottom-border-color, #e9e9e9)}tbody tr.row-clickable{cursor:pointer;transition:background-color .15s ease}tbody tr.row-clickable:hover{background-color:var(--apex-table-row-hover-background-color, #f7f7f7)}th{min-width:60px;-webkit-user-select:none;user-select:none;font-weight:500;font-size:14px;color:var(--apex-table-first-row-text-color, #5d6068)}th .cell{display:flex;justify-content:center;align-items:center}td{scrollbar-width:thin;overflow:auto;text-overflow:clip;font-size:14px}td:focus{outline:none}td .cell{text-wrap:nowrap}apex-chip{max-width:100%;--apex-chip-background-color: #fff2ef;--apex-chip-color: #f96138}.cell.has-change{display:flex;align-items:center;justify-content:center}.cell.has-icon{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;line-height:20px}.cell-icon{width:16px;height:16px;min-width:16px;display:flex;align-items:center;justify-content:center}.cell-icon apex-img{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.cell-icon.has-color path{fill:var(--apex-table-cell-icon-fill);stroke:var(--apex-table-cell-icon-stroke)}.cell.has-icon .cell-text{color:inherit}apex-chip.change-positive{--apex-chip-background-color: var( --apex-table-change-positive-background, #e6f9f0 );--apex-chip-color: var(--apex-table-change-positive-color, #00b67a);margin-left:8px}apex-chip.change-negative{--apex-chip-background-color: var( --apex-table-change-negative-background, #fff2ef );--apex-chip-color: var(--apex-table-change-negative-color, #f96138);margin-left:8px}.cell{line-height:16px;box-sizing:border-box}.cell span{margin-right:4px}.cell-select{--apex-select-input-border-width: 0;--apex-select-input-placeholder-color: #9A9A9A}.cell-select apex-select{width:100%}.cell.checkbox{display:flex;justify-content:center;align-items:center;--apex-checkbox-disabled-opacity: 1}.select-column .cell.checkbox apex-checkbox{pointer-events:none}.select-column .cell.checkbox{width:100%}.cell.list{display:flex;align-items:center;justify-content:flex-start;gap:8px}.list-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}apex-chip.list-overflow-badge{--apex-chip-background-color: var( --apex-table-list-overflow-background, transparent );--apex-chip-color: var(--apex-table-list-overflow-color, #ffa753);--apex-chip-font-size: 13px;--apex-chip-height: 20px;--apex-chip-padding: 0 4px;--apex-chip-border-width: 1px;--apex-chip-border-color: var( --apex-table-list-overflow-border-color, #ffefe1 );--apex-chip-border-radius: 5px;cursor:default;flex-shrink:0;font-weight:500;line-height:20px;letter-spacing:0}.cell.actions{display:flex;justify-content:center;align-items:center;gap:4px}.cell.actions apex-img{width:16px;height:16px}.cell.chip{display:flex;justify-content:center;align-items:center}.cell.chip .primary{--apex-chip-background-color: var(--apex-table-chip-background-color);--apex-chip-color: var(--apex-table-chip-color)}.cell.chip .secondary{--apex-chip-background-color: var( --apex-table-chip-background-color-secondary );--apex-chip-color: var(--apex-table-chip-color-secondary)}.cell.chip.chips{flex-wrap:nowrap;justify-content:flex-start;min-width:0;overflow:hidden;gap:4px}.cell.chip.chips apex-chip:not(.list-overflow-badge){min-width:0;overflow:hidden;--apex-chip-background-color: var(--apex-table-chips-background, #f1e8ff);--apex-chip-color: var(--apex-table-chips-color, #000000);--apex-chip-font-size: 12px;--apex-chip-height: 28px;--apex-chip-padding: 4px 10px;--apex-chip-border-radius: 6px}.cell.status{display:flex;align-items:center;gap:var(--apex-table-status-gap, 8px)}.status-step{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.status-step-label{font-size:12px;line-height:16px;color:var(--apex-table-status-label-color, #888b95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-step.completed .status-step-label{color:var(--apex-table-status-label-completed-color, #191b22);font-weight:600}.status-step-bar{height:var(--apex-table-status-bar-height, 3px);border-radius:2px;background-color:var(--apex-table-status-incomplete-color, #e5e7eb)}.select-column{width:80px;min-width:80px;max-width:80px}.select-all-btn{cursor:pointer;font-size:var(--apex-table-select-all-font-size, 12px);font-weight:var(--apex-table-select-all-font-weight, 600);color:var(--apex-table-select-all-color, #f96138);background-color:var(--apex-table-select-all-background-color, transparent);text-wrap:nowrap}.select-all-btn:hover{color:var(--apex-table-select-all-hover-color, #e0562f)}tr.selected-row{background-color:var(--apex-table-selected-row-background-color, #fff7f5)}.no-data{display:flex;justify-content:center;font-size:14px;margin-top:16px}.more-actions-dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var( --apex-table-more-actions-dropdown-background-color, #ffffff );border-radius:8px;box-shadow:0 4px 8px #d6d6d659;z-index:10}.dropdown-row{height:44px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;font-weight:500;box-sizing:border-box;overflow:visible;cursor:pointer;background-color:var( --apex-table-more-actions-dropdown-background-color, #ffffff );padding:0 12px}.dropdown-row:hover{background-color:var( --apex-table-more-actions-dropdown-hover-background-color, #f3f3f3 )}.dropdown-row apex-img{width:20px;height:20px}.dropdown-row apex-img path{fill:var(--apex-table-dropdown-action-icon-fill, #5d6068);stroke:var(--apex-table-dropdown-action-icon-stroke, #ffffff00)}.dropdown-row:hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #f96138);stroke:var(--apex-table-action-icon-hover-stroke, #ffffff00)}.dropdown-row span{margin:0 12px;text-wrap:nowrap}.is-loading{opacity:.5;pointer-events:none}.container.is-loading:after{width:0px;height:2px;content:\" \";position:sticky;top:0;left:-50%;display:block;background-color:var(--apex-table-loading-bar-color, #ff7f50);animation:lineAnimation 1s linear infinite;border-radius:20px;z-index:1}.action-icon-wrapper{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.action-icon-wrapper:not(.disabled):hover{border-radius:4px;background:var(--apex-table-action-hover-background-color, #f7f8fb)}.action-icon-wrapper apex-img path{fill:var(--apex-table-action-icon-fill, #5d6068);stroke:var(--apex-table-action-icon-stroke, #ffffff00)}.action-icon-wrapper:not(.disabled):hover apex-img path{fill:var(--apex-table-action-icon-hover-fill, #f96138);stroke:var(--apex-table-action-icon-hover-stroke, #ffffff00)}.multiple-action-icon path{fill:var(--apex-table-action-more-icon-default-fill, #5d6068);stroke:var(--apex-table-action-more-icon-default-stroke, #ffffff00)}.action-icon-wrapper:not(.disabled):hover svg path,.opened .multiple-action-icon path{fill:var(--apex-table-action-more-icon-fill, #f96138);stroke:var(--apex-table-action-more-icon-stroke, #ffffff00)}.action-icon-wrapper apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-fill, #f96138);stroke:var(--apex-table-action-secondary-icon-stroke, #ffffff00)}.action-icon-wrapper:not(.disabled):hover apex-img.secondary path{fill:var(--apex-table-action-secondary-icon-hover-fill, #5d6068);stroke:var(--apex-table-action-secondary-icon-hover-stroke, #ffffff00)}.arranger{width:14px;height:14px;cursor:pointer}.arranger svg:hover{transform:scale(1.15)}.paging{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;margin-top:12px}.paging .items-per-page{line-height:10px;margin-right:8px}.mobile .visible-range{margin:0 12px}.page-picker{display:flex;justify-content:center;gap:14px}.page-picker span{min-width:24px;padding:0 6px;box-sizing:border-box;flex-shrink:0;white-space:nowrap;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;gap:10px;transition:color .25s,background-color .25s}.page-picker span.highlighted,.page-picker span:hover:not(.style-excluded){cursor:pointer;color:var(--apex-table-page-picker-text-color, #fff);background:var(--apex-table-page-picker-background, #f96138)}.page-size-option-picker{display:flex;align-items:center}.page-size-option-picker span{text-wrap:nowrap;margin-right:8px}@media(max-width:940px){.paging{flex-direction:column;row-gap:16px;margin-top:24px}.visible-range{order:1}}@keyframes lineAnimation{0%{width:0px}50%{left:20%;width:80%}to{left:100%;width:100%}}.select-all-across{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;font-size:13px;color:var(--apex-table-select-all-across-text-color, #5d6068);background-color:var(--apex-table-select-all-across-background-color, #fff7f5);border-bottom:1px solid var(--apex-table-row-bottom-border-color, #e9e9e9)}.select-all-across-btn{padding:0;border:none;background:none;font:inherit;font-weight:600;color:var(--apex-table-select-all-color, #f96138);cursor:pointer}.select-all-across-btn:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OSService }, { type: i2.FormBuilder }, { type: i1.ScrollBlockService }, { type: i0.Injector }], propDecorators: { theadRef: [{
                 type: ViewChild,
                 args: ['theadRef']
@@ -841,6 +982,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             }], statusCellTpl: [{
                 type: ViewChild,
                 args: ['statusCell', { static: true }]
+            }], selectCellTpl: [{
+                type: ViewChild,
+                args: ['selectCell', { static: true }]
             }], data: [{
                 type: Input
             }], dataLength: [{
@@ -875,12 +1019,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }], editMode: [{
                 type: Input
+            }], selectionPosition: [{
+                type: Input
+            }], selectionHeader: [{
+                type: Input
             }], tableChange: [{
                 type: Output
             }], selectionChange: [{
                 type: Output
             }], editModeChange: [{
                 type: Output
+            }], rowClick: [{
+                type: Output
+            }], cellChange: [{
+                type: Output
+            }], selectAllAcrossChange: [{
+                type: Output
             }], onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]