mis-crystal-design-system 18.1.4 → 18.1.5

package/fesm2022/mis-crystal-design-system-table.mjs

@@ -280,10 +280,9 @@ function TableComponent_Conditional_9_ng_container_8_div_1_span_1_Template(rf, c
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_6_0;
     const pageNumber_r22 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r22 == ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.selectedPage)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r22 === ctx_r1.selectedPage()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(pageNumber_r22);
 } }
@@ -326,7 +325,7 @@ function TableComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(3, TableComponent_Conditional_9_Conditional_3_Template, 2, 6, "div", 46);
     i0.ɵɵelementStart(4, "div", 47)(5, "span", 48);
-    i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_5_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) > 1 && ctx_r1.updateSelectedPage(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) - 1)); });
+    i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectedPage() > 1 && ctx_r1.updateSelectedPage(ctx_r1.selectedPage() - 1)); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(6, "svg", 49);
     i0.ɵɵelement(7, "path", 50);
@@ -334,27 +333,25 @@ function TableComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(8, TableComponent_Conditional_9_ng_container_8_Template, 2, 1, "ng-container", 19);
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(9, "span", 48);
-    i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_9_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) < ((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.noOfPages) && ctx_r1.updateSelectedPage(((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) + 1)); });
+    i0.ɵɵlistener("click", function TableComponent_Conditional_9_Template_span_click_9_listener() { let tmp_3_0; i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectedPage() < ((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.noOfPages) && ctx_r1.updateSelectedPage(ctx_r1.selectedPage() + 1)); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(10, "svg", 49);
     i0.ɵɵelement(11, "path", 51);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    let tmp_2_0;
-    let tmp_4_0;
     let tmp_5_0;
     let tmp_6_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate3(" Showing ", (((tmp_2_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_2_0.selectedPage) - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + 1, "-", (((tmp_2_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_2_0.selectedPage) - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + ctx_r1.tableLength(), " of ", ctx_r1.tableConfig().paginationConfig.totalNoOfRows, " items ");
+    i0.ɵɵtextInterpolate3(" Showing ", (ctx_r1.selectedPage() - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + 1, "-", (ctx_r1.selectedPage() - 1) * ctx_r1.tableConfig().paginationConfig.rowsPerPage + ctx_r1.tableLength(), " of ", ctx_r1.tableConfig().paginationConfig.totalNoOfRows, " items ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.showPageSizeDropdown() ? 3 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("page-nav-inactive", ((tmp_4_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_4_0.selectedPage) === 1);
+    i0.ɵɵclassProp("page-nav-inactive", ctx_r1.selectedPage() === 1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", !((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.disablePageJumping));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("page-nav-inactive", ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.selectedPage) === ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.noOfPages));
+    i0.ɵɵclassProp("page-nav-inactive", ctx_r1.selectedPage() === ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.noOfPages));
 } }
 class TableComponent {
     constructor(renderer) {
@@ -374,6 +371,7 @@ class TableComponent {
         // Pagination related variables
         this.pages = signal([]);
         this.tableLength = signal(0);
+        this.selectedPage = signal(1); // Internal state for selected page
         this.pageSelected = output();
         this.pageSizeChanged = output();
         this.pageSizeOptions = computed(() => {
@@ -416,6 +414,35 @@ class TableComponent {
             if (this.rowCollapseConfigIndex() !== -1) {
                 this.buildExpandedMap();
             }
+            // --- PAGINATION PAGE ARRAY LOGIC (MOVED/REPLACED initializePagination) ---
+            const len = config?.paginationConfig?.noOfPages;
+            const disablePageJumping = config?.paginationConfig?.disablePageJumping;
+            // Only run if pagination is configured and page jumping is enabled
+            if (len && len > 0 && !disablePageJumping) {
+                // Read the internal state of the selected page for calculating the pages array.
+                // Since this runs on every config change, we rely on the value set 
+                // by updateSelectedPage().
+                const pageNumber = this.selectedPage();
+                if (len <= 7) {
+                    const newPages = [];
+                    for (let i = 1; i <= len; i++) {
+                        newPages.push(i);
+                    }
+                    this.pages.set(newPages);
+                }
+                else {
+                    if (pageNumber - 2 <= 1) {
+                        this.pages.set([1, 2, 3, 4, 0, len]);
+                    }
+                    else if (pageNumber - 2 > 1 && pageNumber + 2 < len) {
+                        this.pages.set([1, 0, pageNumber - 1, pageNumber, pageNumber + 1, 0, len]);
+                    }
+                    else if (pageNumber + 2 >= len) {
+                        this.pages.set([1, 0, len - 3, len - 2, len - 1, len]);
+                    }
+                }
+            }
+            // --- END PAGINATION PAGE ARRAY LOGIC ---
             if (config?.paginationConfig?.showPageSizeDropdown) {
                 const options = this.pageSizeOptions();
                 const rowsPerPage = this.tableConfig()?.paginationConfig?.rowsPerPage;
@@ -451,6 +478,18 @@ class TableComponent {
                 }
             }
         }, { allowSignalWrites: true });
+        // Reactive height calculation: maintains exact old behavior for backward compatibility
+        // Old code: height - 56 + "px" (flawed for percentages, but we maintain it)
+        // Note: Effect must be in constructor, not lifecycle hooks (NG0203 error otherwise)
+        // effect(() => {
+        //   const config = this.tableConfig();
+        //   if (!config?.paginationConfig || !this.table?.nativeElement) return;
+        //   const height = config.height;
+        //   // Old behavior: height - 56 + "px" (maintains the flaw for backward compatibility)
+        //   const result = (height as any) - 56;
+        //   const finalHeight = result + "px";
+        //   this.renderer.setStyle(this.table.nativeElement, "height", finalHeight);
+        // });
     }
     // Function to handle row click
     selectRow(index) {
@@ -500,18 +539,12 @@ class TableComponent {
         this.expandedMap.set(newExpandedMap);
     }
     ngAfterViewInit() {
+        // ViewChild is now available - manually trigger height calculation once
+        // The effect in constructor will handle subsequent config changes
         const config = this.tableConfig();
-        if (!config?.paginationConfig)
-            return;
-        const rawHeight = config.height;
-        // Handle percentage values - use calc() to subtract 56px
-        if (typeof rawHeight === 'string' && rawHeight.includes('%')) {
-            const calcHeight = `calc(${rawHeight} - 56px)`;
-            this.renderer.setStyle(this.table.nativeElement, "height", calcHeight);
-        }
-        else {
-            // Handle pixel values - subtract 56px (same as old code)
-            const result = rawHeight - 56;
+        if (config?.paginationConfig && this.table?.nativeElement) {
+            const height = config.height;
+            const result = height - 56;
             const finalHeight = result + "px";
             this.renderer.setStyle(this.table.nativeElement, "height", finalHeight);
         }
@@ -584,6 +617,9 @@ class TableComponent {
     // Pagination related functions
     initializePagination() {
         if (this.tableConfig().paginationConfig) {
+            // Initialize selectedPage from config if provided, otherwise default to 1
+            // const configSelectedPage = this.tableConfig().paginationConfig.selectedPage;
+            // this.selectedPage.set(configSelectedPage ?? 1);
             let len = this.tableConfig().paginationConfig.noOfPages;
             if (len <= 7) {
                 const newPages = [];
@@ -601,9 +637,11 @@ class TableComponent {
         // Guard clause to prevent out-of-range updates
         if (pageNumber < 1 || pageNumber > this.tableConfig().paginationConfig.noOfPages)
             return;
+        // Update internal selectedPage state immediately
+        this.selectedPage.set(pageNumber);
         // Reset header checkbox when navigating to a different page
         this.selectAllCheckbox.set(false);
-        // Note: We can't directly modify input signals, this should be handled by parent component
+        // Update page numbers display for pagination with many pages
         let len = this.tableConfig().paginationConfig.noOfPages;
         if (len > 7) {
             if (pageNumber - 2 <= 1) {
@@ -616,6 +654,7 @@ class TableComponent {
                 this.pages.set([1, 0, len - 3, len - 2, len - 1, len]);
             }
         }
+        // Emit to parent so they can update their config
         this.pageSelected.emit(pageNumber);
     }
     // Main container related functions
@@ -738,6 +777,14 @@ class TableComponent {
     onPageSizeChange(selectedOption) {
         this.pageSizeChanged.emit(parseInt(selectedOption.value));
     }
+    shouldShowPagination() {
+        const config = this.tableConfig()?.paginationConfig;
+        if (!config)
+            return false;
+        const hasMultiplePages = config.noOfPages > 1;
+        const hasEnoughData = this.tableLength() > config.rowsPerPage;
+        return this.showPageSizeDropdown() || hasMultiplePages || hasEnoughData;
+    }
     static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$3, 5);
@@ -762,7 +809,6 @@ class TableComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             let tmp_5_0;
-            let tmp_7_0;
             i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.tableConfig().canScrollHorizontally ? "auto" : "unset"));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showFilter());
@@ -775,12 +821,12 @@ class TableComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.tableData());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showPageSizeDropdown() || ((tmp_7_0 = ctx.tableConfig()) == null ? null : tmp_7_0.paginationConfig) && (ctx.tableLength() >= ctx.tableConfig().paginationConfig.rowsPerPage || ((tmp_7_0 = ctx.tableConfig().paginationConfig) == null ? null : tmp_7_0.selectedPage) !== 1) ? 9 : -1);
+            i0.ɵɵconditional(ctx.shouldShowPagination() ? 9 : -1);
         } }, styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container[_ngcontent-%COMP%]{display:flex;align-items:center;position:sticky;background-color:var(--bg-primary, #FFFFFF);width:100%;z-index:1;min-height:44px;border-bottom:1px solid var(--border-primary, #E0E0E0);top:0;left:0;right:0}.col-header[_ngcontent-%COMP%]{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.filter-icon[_ngcontent-%COMP%]{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active[_ngcontent-%COMP%]{height:8px;width:8px;background:var(--brand-accent, #10ADAE);border-radius:50%;position:absolute;top:4px;right:4px}.sub-row[_ngcontent-%COMP%]{height:auto;border-bottom:none}.loader[_ngcontent-%COMP%]     .mat-progress-spinner circle, .mat-spinner[_ngcontent-%COMP%]   circle[_ngcontent-%COMP%]{stroke:var(--brand-primary, #0937B2)}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:var(--bg-primary, #FFFFFF);width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.active-row[_ngcontent-%COMP%]{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;overflow-wrap:anywhere;min-width:0}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid var(--border-primary, #E0E0E0)}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid var(--border-primary, #E0E0E0)}.t-col[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%}.t-col-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.text-ellipsis[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}#pagination-container[_ngcontent-%COMP%], #pagination-content-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:var(--text-secondary, #6A737D);margin:0 16px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D);margin-right:8px;cursor:pointer}.page.page-jumping-enabled[_ngcontent-%COMP%]{border:1px solid var(--text-secondary, #6A737D)}.page-seperator[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot[_ngcontent-%COMP%]{height:3px;width:3px;border-radius:50%;background:var(--text-secondary, #6A737D)}.page-active[_ngcontent-%COMP%]{color:var(--brand-primary, #0937B2);border:1px solid var(--brand-primary, #0937B2)}.sort-icon[_ngcontent-%COMP%]{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:16px;height:16px;transition:opacity .2s ease}.sort-icon[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]:hover{opacity:.8}.disabled-row[_ngcontent-%COMP%]   .t-col-container[_ngcontent-%COMP%]{opacity:.4;pointer-events:none}.disabled-row[_ngcontent-%COMP%]   .t-col-container[_ngcontent-%COMP%]:has(mis-actions-cell){opacity:1;pointer-events:auto}.row[_ngcontent-%COMP%]{transition:background-color .2s}.row[_ngcontent-%COMP%]:hover:not(.disabled-row), .row.selected[_ngcontent-%COMP%]:not(.disabled-row){background-color:var(--brand-primary-active, #DAE1F3)}.disabled-row[_ngcontent-%COMP%]   .t-col-container[_ngcontent-%COMP%]{pointer-events:none;opacity:.4}.disabled-row[_ngcontent-%COMP%]   .t-col-container[_ngcontent-%COMP%]:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions[_ngcontent-%COMP%]{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-nav-inactive[_ngcontent-%COMP%]{pointer-events:none;opacity:.5;cursor:default}.page-size-selector[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;margin-right:16px}.collapsed-cell[_ngcontent-%COMP%]{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block}@supports (-webkit-line-clamp: 2){.collapsed-cell[_ngcontent-%COMP%]{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
         type: Component,
-        args: [{ selector: "mis-table", template: "<div\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth(),\n    'overflow-x': tableConfig().canScrollHorizontally ? 'auto' : 'unset'\n  }\"\n  id=\"main-container\"\n>\n  <mis-table-filter\n    #filter\n    (filtersApplied)=\"updateAppliedFilters($event)\"\n    *ngIf=\"showFilter()\"\n    [containerStyles]=\"filterContainerStyles()\"\n    [filtersData]=\"filterData()\"\n  ></mis-table-filter>\n  <div\n    #table\n    id=\"table-container\"\n    [ngClass]=\"{ 'no-scrollbar': expandedIndex() < 0, scrollbar: !(expandedIndex() < 0), 'scroll-horizontally': tableConfig().canScrollHorizontally }\"\n  >\n    <div\n    [ngStyle]=\"getColHeadersRowStyles()\"\n      id=\"col-headers-container\"\n    >\n      <div\n        #colHeaderRef\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of tableConfig()?.colHeaderConfig\"\n        class=\"col-header\"\n        [ngStyle]=\"{\n          width: colHeader?.style?.width || '',\n          cursor: colHeader.action ? 'pointer' : 'default',\n          'justify-content': colHeader?.style?.justifyContent\n            ? colHeader?.style?.justifyContent\n            : colHeader.type === 'number'\n            ? 'flex-end'\n            : 'space-between'\n        }\"\n      >\n        <p *ngIf=\"colHeader?.type !== 'custom' && colHeader?.type !== 'checkbox'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <span\n          (click)=\"filterData.set(colHeader.filters); toggleFilter(colHeader.data); $event.stopPropagation()\"\n          *ngIf=\"colHeader?.type !== 'custom' && colHeader?.filters && colHeader?.filters?.length > 0\"\n          class=\"filter-icon\"\n        >\n          <span *ngIf=\"appliedFilters()[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n          <svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              clip-rule=\"evenodd\"\n              d=\"M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z\"\n              fill=\"#181F33\"\n              fill-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n        <span\n          (click)=\"toggleCheckbox(); $event.stopPropagation()\"\n          *ngIf=\"colHeader?.type === 'checkbox'\"\n          class=\"checkbox-icon\"\n        >\n          <mis-checkbox [checked]=\"selectAllCheckbox()\"></mis-checkbox>\n        </span>\n        <span *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n          [column]=\"colHeader\"\n          [activeSort]=\"currentSort()\"\n          [activeSorts]=\"multiColumnSort()\"\n          [multiColumnSort]=\"tableConfig().multiColumnSort\"\n          (sortChange)=\"onSortChange($event)\"\n          class=\"sort-icon\">\n        </span>\n      <ng-template *ngIf=\"colHeader?.type === 'custom'\" customTableCell [customComponent]=\"colHeader?.componentRef\" [data]=\"colHeader.data\"></ng-template>\n      </div>\n    </div>\n    \n    <div id=\"data-container\">\n      <div class=\"row-wrapper\" *ngFor=\"let row of tableData(); let i = index; let rowIndex = index\">\n        <div\n          class=\"t-row\"\n          [ngClass]=\"{ 't-row-hover': tableConfig().cellHover, 'active-row': activeRowIndex().includes(i) }\"\n          [ngStyle]=\"{ 'min-height': tableConfig()?.rowConfig?.height ? tableConfig().rowConfig.height : '44px' }\"\n          (click)=\"selectRow(i)\"\n          [class.disabled-row]=\"isRowDisabled(row)\"\n          >\n          <div\n            (click)=\"tableConfig()?.colConfig[colIndex]?.action && tableConfig()?.colConfig[colIndex]?.actionType !== 'checkbox' ? tableConfig()?.colConfig[colIndex]?.action(col) : null\"\n            *ngFor=\"let col of row; let colIndex = index\"\n            [ngStyle]=\"{\n              width: tableConfig()?.colConfig[colIndex]?.style?.width || tableConfig()?.colHeaderConfig[colIndex]?.style?.width || ''\n            }\"\n            class=\"t-col-container\"\n            [ngClass]=\"{ 't-col-container-hover': tableConfig().cellHover }\"\n          >\n            <div\n              class=\"t-col\"\n              [style]=\"tableConfig().colConfig[colIndex]?.style\"\n              [ngStyle]=\"{\n                width: '100%',\n                cursor: tableConfig().colConfig[colIndex]?.action ? 'pointer' : 'default',\n                'justify-content': tableConfig().colConfig[colIndex]?.style?.justifyContent\n                  ? tableConfig().colConfig[colIndex]?.style?.justifyContent\n                  : tableConfig().colConfig[colIndex]?.type === 'number'\n                  ? 'flex-end'\n                  : 'space-between'\n              }\"\n            >\n            <div\n            *ngIf=\"tableConfig().colConfig[colIndex]?.type !== 'custom' && tableConfig().colConfig[colIndex]?.type !== 'actions'\"\n            [ngStyle]=\"{\n              color: tableConfig()?.colConfig[colIndex]?.style?.color || '',\n              '--collapsed-lines': previewLines() || 3\n            }\"\n            [ngClass]=\"{\n              'collapsed-cell': collapseColIndex() == colIndex && expandedMap()[rowIndex]\n            }\"\n            class=\"t-col-text\"\n          >\n            <!-- Render as HTML -->\n            <ng-container *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'html'; else plainText\">\n              <span [innerHTML]=\"col\"></span>\n            </ng-container>\n          \n            <!-- Render as plain text -->\n            <ng-template #plainText>\n              <span>{{ col }}</span>\n            </ng-template>\n          </div>\n        \n              <ng-template\n                *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'custom'\"\n                [customComponent]=\"tableConfig().colConfig[colIndex].componentRef\"\n                [data]=\"col\"\n                customTableCell\n              ></ng-template>\n                <mis-actions-cell\n                  *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'actions'\"\n                  [cellData]=\"col\"\n                  [config]=\"tableConfig().colConfig[colIndex]\"\n                  (actionClick)=\"onActionClick($event, rowIndex)\"\n                  [ngClass]=\"{\n                    'disable-actions': (tableConfig().colConfig[colIndex]?.actionType === 'checkbox' || tableConfig().colConfig[colIndex]?.actionType === 'row-collapse') && isRowDisabled(row)\n                  }\"\n                ></mis-actions-cell>\n\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"tableConfig()?.canExpand && expandedIndex() === i\" class=\"sub-row\">\n          <ng-container *ngIf=\"subTableDataLoading()\">\n            <div [ngStyle]=\"{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              padding: '16px'\n            }\">\n              Loading...\n            </div>\n          </ng-container>\n          \n          <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length === 0\">\n            <div [ngStyle]=\"{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              padding: '16px'\n            }\">\n              No Data Available...\n            </div>\n          </ng-container>\n          \n          <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length > 0\">\n            <sub-table [config]=\"subTableconfig()\" [tableData]=\"subTableData()\"></sub-table>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div id=\"pagination-content-container\">\n    @if(showPageSizeDropdown() || (tableConfig()?.paginationConfig && (tableLength() >= tableConfig().paginationConfig.rowsPerPage || tableConfig().paginationConfig?.selectedPage !== 1))){\n      <div \n        id=\"pagination-container\"\n      >\n        <p id=\"pagination-text\">\n          Showing\n          {{ (tableConfig().paginationConfig?.selectedPage - 1) * tableConfig().paginationConfig.rowsPerPage + 1 }}-{{\n            (tableConfig().paginationConfig?.selectedPage - 1) * tableConfig().paginationConfig.rowsPerPage + tableLength()\n          }}\n          of {{ tableConfig().paginationConfig.totalNoOfRows }} items\n        </p>\n        @if(showPageSizeDropdown()) {\n          <div class=\"page-size-selector\">\n            <mis-dropdown\n              [data]=\"pageSizeOptions()\"\n              [selectedItem]=\"selectedPageSizeOption()\"\n              [width]=\"'90px'\"\n              [height]=\"'32px'\"\n              [searchEnabled]=\"false\"\n              [dropdownListHeight]=\"'100px'\"\n              (onChange)=\"onPageSizeChange($event)\"\n              class=\"page-size-dropdown\"\n            ></mis-dropdown>\n          </div>\n        }\n        <div id=\"pages-container\">\n          <span   (click)=\"tableConfig().paginationConfig?.selectedPage > 1 && updateSelectedPage(tableConfig().paginationConfig?.selectedPage - 1)\" class=\"page\" [class.page-nav-inactive]=\"tableConfig().paginationConfig?.selectedPage === 1\">\n            <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n                fill=\"#181F33\"\n                fill-rule=\"evenodd\"\n              />\n            </svg>\n          </span>\n            <!-- Page numbers (only show if disablePageJumping is false) -->\n            <ng-container *ngIf=\"!tableConfig().paginationConfig?.disablePageJumping\">\n              <div *ngFor=\"let pageNumber of pages()\">\n                <span\n                  (click)=\"updateSelectedPage(pageNumber)\"\n                  *ngIf=\"pageNumber != 0\"\n                  [ngClass]=\"{ 'page-active': pageNumber == tableConfig().paginationConfig?.selectedPage }\"\n                  class=\"page page-jumping-enabled\"\n                >{{ pageNumber }}</span>\n                <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n                  <div [ngStyle]=\"{ display: 'flex' }\">\n                    <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n                    <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n                    <span class=\"dot\"></span>\n                  </div>          \n                </span>\n              </div>\n            </ng-container>\n        \n          <span [class.page-nav-inactive]=\"tableConfig().paginationConfig?.selectedPage === tableConfig().paginationConfig?.noOfPages\"\n          (click)=\"tableConfig().paginationConfig?.selectedPage < tableConfig().paginationConfig?.noOfPages && updateSelectedPage(tableConfig().paginationConfig?.selectedPage + 1)\" class=\"page\">\n            <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z\"\n                fill=\"#181F33\"\n                fill-rule=\"evenodd\"\n              />\n            </svg>\n          </span>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:sticky;background-color:var(--bg-primary, #FFFFFF);width:100%;z-index:1;min-height:44px;border-bottom:1px solid var(--border-primary, #E0E0E0);top:0;left:0;right:0}.col-header{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon{display:flex;justify-content:center;align-items:center}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:var(--brand-accent, #10ADAE);border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:var(--brand-primary, #0937B2)}.t-row{display:flex;min-height:44px;background-color:var(--bg-primary, #FFFFFF);width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.active-row{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container{padding:0 16px;overflow-wrap:anywhere;min-width:0}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container-hover:first-child{border-left:1px solid var(--border-primary, #E0E0E0)}.t-col-container-hover{border-right:1px solid var(--border-primary, #E0E0E0)}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}#pagination-container,#pagination-content-container{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:var(--text-secondary, #6A737D);margin:0 16px 0 0}#pages-container{display:flex;margin-right:32px}.page{display:flex;justify-content:center;align-items:center;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D);margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid var(--text-secondary, #6A737D)}.page-seperator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot{height:3px;width:3px;border-radius:50%;background:var(--text-secondary, #6A737D)}.page-active{color:var(--brand-primary, #0937B2);border:1px solid var(--brand-primary, #0937B2)}.sort-icon{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon img{width:16px;height:16px;transition:opacity .2s ease}.sort-icon img:hover{opacity:.8}.disabled-row .t-col-container{opacity:.4;pointer-events:none}.disabled-row .t-col-container:has(mis-actions-cell){opacity:1;pointer-events:auto}.row{transition:background-color .2s}.row:hover:not(.disabled-row),.row.selected:not(.disabled-row){background-color:var(--brand-primary-active, #DAE1F3)}.disabled-row .t-col-container{pointer-events:none;opacity:.4}.disabled-row .t-col-container:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-nav-inactive{pointer-events:none;opacity:.5;cursor:default}.page-size-selector{display:flex;align-items:center;gap:8px;margin-right:16px}.collapsed-cell{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block}@supports (-webkit-line-clamp: 2){.collapsed-cell{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}\n"] }]
+        args: [{ selector: "mis-table", template: "<div\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth(),\n    'overflow-x': tableConfig().canScrollHorizontally ? 'auto' : 'unset'\n  }\"\n  id=\"main-container\"\n>\n  <mis-table-filter\n    #filter\n    (filtersApplied)=\"updateAppliedFilters($event)\"\n    *ngIf=\"showFilter()\"\n    [containerStyles]=\"filterContainerStyles()\"\n    [filtersData]=\"filterData()\"\n  ></mis-table-filter>\n  <div\n    #table\n    id=\"table-container\"\n    [ngClass]=\"{ 'no-scrollbar': expandedIndex() < 0, scrollbar: !(expandedIndex() < 0), 'scroll-horizontally': tableConfig().canScrollHorizontally }\"\n  >\n    <div\n    [ngStyle]=\"getColHeadersRowStyles()\"\n      id=\"col-headers-container\"\n    >\n      <div\n        #colHeaderRef\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of tableConfig()?.colHeaderConfig\"\n        class=\"col-header\"\n        [ngStyle]=\"{\n          width: colHeader?.style?.width || '',\n          cursor: colHeader.action ? 'pointer' : 'default',\n          'justify-content': colHeader?.style?.justifyContent\n            ? colHeader?.style?.justifyContent\n            : colHeader.type === 'number'\n            ? 'flex-end'\n            : 'space-between'\n        }\"\n      >\n        <p *ngIf=\"colHeader?.type !== 'custom' && colHeader?.type !== 'checkbox'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <span\n          (click)=\"filterData.set(colHeader.filters); toggleFilter(colHeader.data); $event.stopPropagation()\"\n          *ngIf=\"colHeader?.type !== 'custom' && colHeader?.filters && colHeader?.filters?.length > 0\"\n          class=\"filter-icon\"\n        >\n          <span *ngIf=\"appliedFilters()[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n          <svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              clip-rule=\"evenodd\"\n              d=\"M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z\"\n              fill=\"#181F33\"\n              fill-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n        <span\n          (click)=\"toggleCheckbox(); $event.stopPropagation()\"\n          *ngIf=\"colHeader?.type === 'checkbox'\"\n          class=\"checkbox-icon\"\n        >\n          <mis-checkbox [checked]=\"selectAllCheckbox()\"></mis-checkbox>\n        </span>\n        <span *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n          [column]=\"colHeader\"\n          [activeSort]=\"currentSort()\"\n          [activeSorts]=\"multiColumnSort()\"\n          [multiColumnSort]=\"tableConfig().multiColumnSort\"\n          (sortChange)=\"onSortChange($event)\"\n          class=\"sort-icon\">\n        </span>\n      <ng-template *ngIf=\"colHeader?.type === 'custom'\" customTableCell [customComponent]=\"colHeader?.componentRef\" [data]=\"colHeader.data\"></ng-template>\n      </div>\n    </div>\n    \n    <div id=\"data-container\">\n      <div class=\"row-wrapper\" *ngFor=\"let row of tableData(); let i = index; let rowIndex = index\">\n        <div\n          class=\"t-row\"\n          [ngClass]=\"{ 't-row-hover': tableConfig().cellHover, 'active-row': activeRowIndex().includes(i) }\"\n          [ngStyle]=\"{ 'min-height': tableConfig()?.rowConfig?.height ? tableConfig().rowConfig.height : '44px' }\"\n          (click)=\"selectRow(i)\"\n          [class.disabled-row]=\"isRowDisabled(row)\"\n          >\n          <div\n            (click)=\"tableConfig()?.colConfig[colIndex]?.action && tableConfig()?.colConfig[colIndex]?.actionType !== 'checkbox' ? tableConfig()?.colConfig[colIndex]?.action(col) : null\"\n            *ngFor=\"let col of row; let colIndex = index\"\n            [ngStyle]=\"{\n              width: tableConfig()?.colConfig[colIndex]?.style?.width || tableConfig()?.colHeaderConfig[colIndex]?.style?.width || ''\n            }\"\n            class=\"t-col-container\"\n            [ngClass]=\"{ 't-col-container-hover': tableConfig().cellHover }\"\n          >\n            <div\n              class=\"t-col\"\n              [style]=\"tableConfig().colConfig[colIndex]?.style\"\n              [ngStyle]=\"{\n                width: '100%',\n                cursor: tableConfig().colConfig[colIndex]?.action ? 'pointer' : 'default',\n                'justify-content': tableConfig().colConfig[colIndex]?.style?.justifyContent\n                  ? tableConfig().colConfig[colIndex]?.style?.justifyContent\n                  : tableConfig().colConfig[colIndex]?.type === 'number'\n                  ? 'flex-end'\n                  : 'space-between'\n              }\"\n            >\n            <div\n            *ngIf=\"tableConfig().colConfig[colIndex]?.type !== 'custom' && tableConfig().colConfig[colIndex]?.type !== 'actions'\"\n            [ngStyle]=\"{\n              color: tableConfig()?.colConfig[colIndex]?.style?.color || '',\n              '--collapsed-lines': previewLines() || 3\n            }\"\n            [ngClass]=\"{\n              'collapsed-cell': collapseColIndex() == colIndex && expandedMap()[rowIndex]\n            }\"\n            class=\"t-col-text\"\n          >\n            <!-- Render as HTML -->\n            <ng-container *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'html'; else plainText\">\n              <span [innerHTML]=\"col\"></span>\n            </ng-container>\n          \n            <!-- Render as plain text -->\n            <ng-template #plainText>\n              <span>{{ col }}</span>\n            </ng-template>\n          </div>\n        \n              <ng-template\n                *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'custom'\"\n                [customComponent]=\"tableConfig().colConfig[colIndex].componentRef\"\n                [data]=\"col\"\n                customTableCell\n              ></ng-template>\n                <mis-actions-cell\n                  *ngIf=\"tableConfig().colConfig[colIndex]?.type === 'actions'\"\n                  [cellData]=\"col\"\n                  [config]=\"tableConfig().colConfig[colIndex]\"\n                  (actionClick)=\"onActionClick($event, rowIndex)\"\n                  [ngClass]=\"{\n                    'disable-actions': (tableConfig().colConfig[colIndex]?.actionType === 'checkbox' || tableConfig().colConfig[colIndex]?.actionType === 'row-collapse') && isRowDisabled(row)\n                  }\"\n                ></mis-actions-cell>\n\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"tableConfig()?.canExpand && expandedIndex() === i\" class=\"sub-row\">\n          <ng-container *ngIf=\"subTableDataLoading()\">\n            <div [ngStyle]=\"{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              padding: '16px'\n            }\">\n              Loading...\n            </div>\n          </ng-container>\n          \n          <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length === 0\">\n            <div [ngStyle]=\"{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              padding: '16px'\n            }\">\n              No Data Available...\n            </div>\n          </ng-container>\n          \n          <ng-container *ngIf=\"!subTableDataLoading() && subTableData().length > 0\">\n            <sub-table [config]=\"subTableconfig()\" [tableData]=\"subTableData()\"></sub-table>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div id=\"pagination-content-container\">\n    @if(shouldShowPagination()){\n      <div \n        id=\"pagination-container\"\n      >\n        <p id=\"pagination-text\">\n          Showing\n          {{ (selectedPage() - 1) * tableConfig().paginationConfig.rowsPerPage + 1 }}-{{\n            (selectedPage() - 1) * tableConfig().paginationConfig.rowsPerPage + tableLength()\n          }}\n          of {{ tableConfig().paginationConfig.totalNoOfRows }} items\n        </p>\n        @if(showPageSizeDropdown()) {\n          <div class=\"page-size-selector\">\n            <mis-dropdown\n              [data]=\"pageSizeOptions()\"\n              [selectedItem]=\"selectedPageSizeOption()\"\n              [width]=\"'90px'\"\n              [height]=\"'32px'\"\n              [searchEnabled]=\"false\"\n              [dropdownListHeight]=\"'100px'\"\n              (onChange)=\"onPageSizeChange($event)\"\n              class=\"page-size-dropdown\"\n            ></mis-dropdown>\n          </div>\n        }\n        <div id=\"pages-container\">\n          <span   (click)=\"selectedPage() > 1 && updateSelectedPage(selectedPage() - 1)\" class=\"page\" [class.page-nav-inactive]=\"selectedPage() === 1\">\n            <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n                fill=\"#181F33\"\n                fill-rule=\"evenodd\"\n              />\n            </svg>\n          </span>\n            <!-- Page numbers (only show if disablePageJumping is false) -->\n            <ng-container *ngIf=\"!tableConfig().paginationConfig?.disablePageJumping\">\n              <div *ngFor=\"let pageNumber of pages()\">\n                <span\n                  (click)=\"updateSelectedPage(pageNumber)\"\n                  *ngIf=\"pageNumber != 0\"\n                  [ngClass]=\"{ 'page-active': pageNumber === selectedPage() }\"\n                  class=\"page page-jumping-enabled\"\n                >{{ pageNumber }}</span>\n                <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n                  <div [ngStyle]=\"{ display: 'flex' }\">\n                    <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n                    <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n                    <span class=\"dot\"></span>\n                  </div>          \n                </span>\n              </div>\n            </ng-container>\n        \n          <span [class.page-nav-inactive]=\"selectedPage() === tableConfig().paginationConfig?.noOfPages\"\n          (click)=\"selectedPage() < tableConfig().paginationConfig?.noOfPages && updateSelectedPage(selectedPage() + 1)\" class=\"page\">\n            <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z\"\n                fill=\"#181F33\"\n                fill-rule=\"evenodd\"\n              />\n            </svg>\n          </span>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB);border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:sticky;background-color:var(--bg-primary, #FFFFFF);width:100%;z-index:1;min-height:44px;border-bottom:1px solid var(--border-primary, #E0E0E0);top:0;left:0;right:0}.col-header{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon{display:flex;justify-content:center;align-items:center}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:var(--brand-accent, #10ADAE);border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:var(--brand-primary, #0937B2)}.t-row{display:flex;min-height:44px;background-color:var(--bg-primary, #FFFFFF);width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.active-row{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container{padding:0 16px;overflow-wrap:anywhere;min-width:0}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:var(--brand-primary-active, #DAE1F3)}.t-col-container-hover:first-child{border-left:1px solid var(--border-primary, #E0E0E0)}.t-col-container-hover{border-right:1px solid var(--border-primary, #E0E0E0)}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}#pagination-container,#pagination-content-container{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:var(--text-secondary, #6A737D);margin:0 16px 0 0}#pages-container{display:flex;margin-right:32px}.page{display:flex;justify-content:center;align-items:center;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:var(--text-secondary, #6A737D);margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid var(--text-secondary, #6A737D)}.page-seperator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot{height:3px;width:3px;border-radius:50%;background:var(--text-secondary, #6A737D)}.page-active{color:var(--brand-primary, #0937B2);border:1px solid var(--brand-primary, #0937B2)}.sort-icon{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon img{width:16px;height:16px;transition:opacity .2s ease}.sort-icon img:hover{opacity:.8}.disabled-row .t-col-container{opacity:.4;pointer-events:none}.disabled-row .t-col-container:has(mis-actions-cell){opacity:1;pointer-events:auto}.row{transition:background-color .2s}.row:hover:not(.disabled-row),.row.selected:not(.disabled-row){background-color:var(--brand-primary-active, #DAE1F3)}.disabled-row .t-col-container{pointer-events:none;opacity:.4}.disabled-row .t-col-container:has(mis-actions-cell){pointer-events:auto!important;opacity:1!important;color:inherit!important}mis-actions-cell.disable-actions{pointer-events:none;opacity:.4;filter:grayscale(.5)}.page-nav-inactive{pointer-events:none;opacity:.5;cursor:default}.page-size-selector{display:flex;align-items:center;gap:8px;margin-right:16px}.collapsed-cell{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;display:block}@supports (-webkit-line-clamp: 2){.collapsed-cell{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:var(--collapsed-lines, 2);white-space:normal!important}}\n"] }]
     }], () => [{ type: i0.Renderer2 }], { filter: [{
             type: ViewChild,
             args: ["filter"]
@@ -1239,6 +1285,18 @@ class SortIconsDirective {
         this.multiSortChange = output();
         // Internal state as signals
         this.currentDirection = signal('');
+        // Watch for changes in activeSort, activeSorts, and currentDirection signals
+        // Signal inputs don't trigger ngOnChanges, so we need to use effect()
+        effect(() => {
+            // Access the signals to create a dependency (we don't need to store the values)
+            this.activeSort();
+            this.activeSorts();
+            this.currentDirection(); // Also watch internal direction changes
+            // Update icon styles when signals change (only after icons are created)
+            if (this.upIcon && this.downIcon) {
+                this.updateIconStyles();
+            }
+        });
     }
     ngOnInit() {
         // Create a container for the icons
@@ -1334,10 +1392,17 @@ class SortIconsDirective {
         }
     }
     updateSingleColumnIconStyles() {
-        const isActiveColumn = this.activeSort()?.column === this.column()?.data;
+        // Check both parent's activeSort AND internal currentDirection
+        // Parent's activeSort may not be updated immediately, so we also check internal state
+        const parentActiveSort = this.activeSort();
+        const isActiveColumnFromParent = parentActiveSort?.column === this.column()?.data;
+        const internalDirection = this.currentDirection();
+        const isActiveColumn = isActiveColumnFromParent || (internalDirection !== '');
         setTimeout(() => {
-            this.renderer?.setStyle(this.upIcon, 'opacity', isActiveColumn && this.currentDirection() === 'ASC' ? '1' : '0.5');
-            this.renderer?.setStyle(this.downIcon, 'opacity', isActiveColumn && this.currentDirection() === 'DESC' ? '1' : '0.5');
+            // Use parent's direction if available, otherwise use internal direction
+            const activeDirection = parentActiveSort?.direction || internalDirection;
+            this.renderer?.setStyle(this.upIcon, 'opacity', isActiveColumn && activeDirection === 'ASC' ? '1' : '0.5');
+            this.renderer?.setStyle(this.downIcon, 'opacity', isActiveColumn && activeDirection === 'DESC' ? '1' : '0.5');
         }, 0);
     }
     updateMultiColumnIconStyles() {