@apexara/ng-components 1.0.6-test.2 → 1.0.6-test.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, HostListener, Output, Input, ViewChild, ViewChildren, Component } from '@angular/core';
+import { EventEmitter, signal, afterNextRender, HostListener, Output, Input, ViewChild, ViewChildren, Component } from '@angular/core';
 import { formatDate, NgStyle, NgClass, NgTemplateOutlet, DecimalPipe } from '@angular/common';
 import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -26,11 +26,12 @@ var ApexTableColumnType;
     ApexTableColumnType[ApexTableColumnType["List"] = 8] = "List";
 })(ApexTableColumnType || (ApexTableColumnType = {}));
 class ApexTableComponent {
-    constructor(elementRef, osService, formBuilder, scrollBlockService) {
+    constructor(elementRef, osService, formBuilder, scrollBlockService, injector) {
         this.elementRef = elementRef;
         this.osService = osService;
         this.formBuilder = formBuilder;
         this.scrollBlockService = scrollBlockService;
+        this.injector = injector;
         this.DropdownElement = null;
         // Sorting configuration
         this.sortIndex = 0;
@@ -458,10 +459,9 @@ class ApexTableComponent {
             this.unlockScroll();
         }
     }
-    async toggleActionDropdown(row, column, event) {
+    toggleActionDropdown(row, column, event) {
         // Prevent the event to be processed by the Hostlistener
         event.stopPropagation();
-        let actionPos;
         const prevRow = this.currentActiveRow();
         if (prevRow) {
             prevRow.isDropdown = false;
@@ -469,26 +469,30 @@ class ApexTableComponent {
         row.isDropdown = !row.isDropdown;
         this.currentActiveRow.set(row);
         this.currentActiveColumn.set(column);
-        for (let i of this.moreActionsList) {
-            if (i.nativeElement.classList.contains('opened')) {
-                actionPos = i.nativeElement.getBoundingClientRect();
+        // Wait for Angular to render the dropdown element via @if before positioning it.
+        afterNextRender(() => {
+            let actionPos;
+            for (let i of this.moreActionsList) {
+                if (i.nativeElement.classList.contains('opened')) {
+                    actionPos = i.nativeElement.getBoundingClientRect();
+                }
             }
-        }
-        if (this.DropdownElement) {
-            if (this.osService.mobileOS === MobileOS.iOS) {
-                actionPos.y += window.visualViewport.offsetTop;
-                actionPos.x += window.visualViewport.offsetLeft;
+            if (this.DropdownElement) {
+                if (this.osService.mobileOS === MobileOS.iOS) {
+                    actionPos.y += window.visualViewport.offsetTop;
+                    actionPos.x += window.visualViewport.offsetLeft;
+                }
+                const dropdownWidth = this.DropdownElement.nativeElement.offsetWidth;
+                const left = actionPos.x + dropdownWidth / 2 < window.innerWidth - 10 ? actionPos.x : window.innerWidth - 10 - dropdownWidth;
+                this.DropdownElement.nativeElement.style.transform = left === actionPos.x ? 'translateX(-50%)' : '';
+                this.DropdownElement.nativeElement.style.left = left + 'px';
+                this.DropdownElement.nativeElement.style.top = `${actionPos.y + actionPos.height}px`;
+                this.lockScroll();
             }
-            const dropdownWidth = this.DropdownElement.nativeElement.offsetWidth;
-            const left = actionPos.x + dropdownWidth / 2 < window.innerWidth - 10 ? actionPos.x : window.innerWidth - 10 - dropdownWidth;
-            this.DropdownElement.nativeElement.style.transform = left === actionPos.x ? 'translateX(-50%)' : '';
-            this.DropdownElement.nativeElement.style.left = left + 'px';
-            this.DropdownElement.nativeElement.style.top = `${actionPos.y + actionPos.height}px`;
-            this.lockScroll();
-        }
-        else {
-            this.unlockScroll();
-        }
+            else {
+                this.unlockScroll();
+            }
+        }, { injector: this.injector });
     }
     onViewportScroll() {
         // Safety net: close dropdown if scroll somehow fires while it's open
@@ -729,7 +733,7 @@ class ApexTableComponent {
             this.calculateTotalPages();
             this.updateVisibleRange(start, end);
             this.updatePageData();
-            this.cdkViewport?.checkViewportSize();
+            this.refreshLayout();
         });
     }
     calculatePages() {
@@ -743,7 +747,7 @@ class ApexTableComponent {
             this.tableChange.emit({ from: start, to: end, filter: this.filter, sort: { columnValue: this.columns[this.sortIndex].value, sortDirection: this.sortDirection } });
         }
     }
-    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 }], target: i0.ɵɵFactoryTarget.Component }); }
+    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: "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]=\"getCellColor(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\">\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\">\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\" fill=\"#5D6068\"/>\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)\"> {{ getChipLabel(row, column) }}</apex-chip>\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.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)}.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)}.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexTableComponent, decorators: [{
@@ -760,7 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         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]=\"getCellColor(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\">\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\">\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\" fill=\"#5D6068\"/>\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)\"> {{ getChipLabel(row, column) }}</apex-chip>\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.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)}.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)}.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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OSService }, { type: i2.FormBuilder }, { type: i1.ScrollBlockService }], propDecorators: { theadRef: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OSService }, { type: i2.FormBuilder }, { type: i1.ScrollBlockService }, { type: i0.Injector }], propDecorators: { theadRef: [{
                 type: ViewChild,
                 args: ['theadRef']
             }], moreActionsList: [{