mis-crystal-design-system 18.0.24 → 18.1.0-signal-test

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, ViewChild, ViewChildren, Input, Directive, input, output, signal, HostListener, NgModule } from '@angular/core';
+import { signal, output, input, Component, ViewChild, ViewChildren, effect, Directive, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/cdk/scrolling';
@@ -35,7 +35,7 @@ function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("containerStyles", ctx_r1.filterContainerStyles)("filtersData", ctx_r1.filterData);
+    i0.ɵɵproperty("containerStyles", ctx_r1.filterContainerStyles())("filtersData", ctx_r1.filterData());
 } }
 function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 19);
@@ -52,7 +52,7 @@ function TableComponent_div_5_span_3_span_1_Template(rf, ctx) { if (rf & 1) {
 function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 20);
-    i0.ɵɵlistener("click", function TableComponent_div_5_span_3_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const colHeader_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.filterData = colHeader_r4.filters; ctx_r1.toggleFilter(colHeader_r4.data); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function TableComponent_div_5_span_3_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const colHeader_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.filterData.set(colHeader_r4.filters); ctx_r1.toggleFilter(colHeader_r4.data); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span", 21);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(2, "svg", 22);
@@ -73,7 +73,7 @@ function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.selectAllCheckbox);
+    i0.ɵɵproperty("checked", ctx_r1.selectAllCheckbox());
 } }
 function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -83,7 +83,7 @@ function TableComponent_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const colHeader_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("column", colHeader_r4)("activeSort", ctx_r1.currentSort)("activeSorts", ctx_r1.multiColumnSort)("multiColumnSort", ctx_r1.config.multiColumnSort);
+    i0.ɵɵproperty("column", colHeader_r4)("activeSort", ctx_r1.currentSort())("activeSorts", ctx_r1.multiColumnSort())("multiColumnSort", ctx_r1.tableConfig().multiColumnSort);
 } }
 function TableComponent_div_5_6_ng_template_0_Template(rf, ctx) { }
 function TableComponent_div_5_6_Template(rf, ctx) { if (rf & 1) {
@@ -135,13 +135,15 @@ function TableComponent_div_7_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(1, TableComponent_div_7_div_2_div_2_ng_container_1_Template, 2, 1, "ng-container", 38)(2, TableComponent_div_7_div_2_div_2_ng_template_2_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_10_0;
+    let tmp_12_0;
     const plainText_r14 = i0.ɵɵreference(3);
     const i_r13 = i0.ɵɵnextContext().index;
     const rowIndex_r15 = i0.ɵɵnextContext().index;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(4, _c11, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.color) || "", ctx_r1.previewLines || 3))("ngClass", i0.ɵɵpureFunction1(7, _c12, ctx_r1.collapseColIndex == i_r13 && ctx_r1.expandedMap[rowIndex_r15]));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(4, _c11, ((tmp_10_0 = ctx_r1.tableConfig()) == null ? null : tmp_10_0.colConfig[i_r13] == null ? null : tmp_10_0.colConfig[i_r13].style == null ? null : tmp_10_0.colConfig[i_r13].style.color) || "", ctx_r1.previewLines || 3))("ngClass", i0.ɵɵpureFunction1(7, _c12, ctx_r1.collapseColIndex == i_r13 && ctx_r1.expandedMap[rowIndex_r15]));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "html")("ngIfElse", plainText_r14);
+    i0.ɵɵproperty("ngIf", ((tmp_12_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_12_0.type) === "html")("ngIfElse", plainText_r14);
 } }
 function TableComponent_div_7_div_2_3_ng_template_0_Template(rf, ctx) { }
 function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
@@ -151,7 +153,7 @@ function TableComponent_div_7_div_2_3_Template(rf, ctx) { if (rf & 1) {
     const col_r12 = ctx_r15.$implicit;
     const i_r13 = ctx_r15.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[i_r13].componentRef)("data", col_r12);
+    i0.ɵɵproperty("customComponent", ctx_r1.tableConfig().colConfig[i_r13].componentRef)("data", col_r12);
 } }
 function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
@@ -159,33 +161,40 @@ function TableComponent_div_7_div_2_mis_actions_cell_4_Template(rf, ctx) { if (r
     i0.ɵɵlistener("actionClick", function TableComponent_div_7_div_2_mis_actions_cell_4_Template_mis_actions_cell_actionClick_0_listener($event) { i0.ɵɵrestoreView(_r17); const rowIndex_r15 = i0.ɵɵnextContext(2).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick($event, rowIndex_r15)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_11_0;
     const ctx_r15 = i0.ɵɵnextContext();
     const col_r12 = ctx_r15.$implicit;
     const i_r13 = ctx_r15.index;
     const row_r18 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("cellData", col_r12)("config", ctx_r1.config.colConfig[i_r13])("ngClass", i0.ɵɵpureFunction1(3, _c13, ((ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].actionType) === "checkbox" || (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].actionType) === "row-collapse") && ctx_r1.isRowDisabled(row_r18)));
+    i0.ɵɵproperty("cellData", col_r12)("config", ctx_r1.tableConfig().colConfig[i_r13])("ngClass", i0.ɵɵpureFunction1(3, _c13, (((tmp_11_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_11_0.actionType) === "checkbox" || ((tmp_11_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_11_0.actionType) === "row-collapse") && ctx_r1.isRowDisabled(row_r18)));
 } }
 function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const ctx_r10 = i0.ɵɵrestoreView(_r10); const col_r12 = ctx_r10.$implicit; const i_r13 = ctx_r10.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].action) && (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].actionType) !== "checkbox" ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].action(col_r12) : null); });
+    i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { let tmp_9_0; const ctx_r10 = i0.ɵɵrestoreView(_r10); const col_r12 = ctx_r10.$implicit; const i_r13 = ctx_r10.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.colConfig[i_r13] == null ? null : tmp_9_0.colConfig[i_r13].action) && ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.colConfig[i_r13] == null ? null : tmp_9_0.colConfig[i_r13].actionType) !== "checkbox" ? (tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.colConfig[i_r13] == null ? null : tmp_9_0.colConfig[i_r13].action(col_r12) : null); });
     i0.ɵɵelementStart(1, "div", 34);
     i0.ɵɵtemplate(2, TableComponent_div_7_div_2_div_2_Template, 4, 9, "div", 35)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 18)(4, TableComponent_div_7_div_2_mis_actions_cell_4_Template, 1, 5, "mis-actions-cell", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    let tmp_8_0;
+    let tmp_10_0;
+    let tmp_11_0;
+    let tmp_12_0;
+    let tmp_13_0;
+    let tmp_14_0;
     const i_r13 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c8, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.width) || (ctx_r1.config == null ? null : ctx_r1.config.colHeaderConfig[i_r13] == null ? null : ctx_r1.config.colHeaderConfig[i_r13].style == null ? null : ctx_r1.config.colHeaderConfig[i_r13].style.width) || ""))("ngClass", i0.ɵɵpureFunction1(10, _c9, ctx_r1.config.cellHover));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c8, ((tmp_8_0 = ctx_r1.tableConfig()) == null ? null : tmp_8_0.colConfig[i_r13] == null ? null : tmp_8_0.colConfig[i_r13].style == null ? null : tmp_8_0.colConfig[i_r13].style.width) || ((tmp_8_0 = ctx_r1.tableConfig()) == null ? null : tmp_8_0.colHeaderConfig[i_r13] == null ? null : tmp_8_0.colHeaderConfig[i_r13].style == null ? null : tmp_8_0.colHeaderConfig[i_r13].style.width) || ""))("ngClass", i0.ɵɵpureFunction1(10, _c9, ctx_r1.tableConfig().cellHover));
     i0.ɵɵadvance();
-    i0.ɵɵstyleMap(ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(12, _c10, (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].action) ? "pointer" : "default", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.justifyContent) ? ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].style == null ? null : ctx_r1.config.colConfig[i_r13].style.justifyContent : (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵstyleMap((tmp_10_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_10_0.style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(12, _c10, ((tmp_11_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_11_0.action) ? "pointer" : "default", ((tmp_11_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_11_0.style == null ? null : tmp_11_0.style.justifyContent) ? (tmp_11_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_11_0.style == null ? null : tmp_11_0.style.justifyContent : ((tmp_11_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_11_0.type) === "number" ? "flex-end" : "space-between"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) !== "custom" && (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) !== "actions");
+    i0.ɵɵproperty("ngIf", ((tmp_12_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_12_0.type) !== "custom" && ((tmp_12_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_12_0.type) !== "actions");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "custom");
+    i0.ɵɵproperty("ngIf", ((tmp_13_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_13_0.type) === "custom");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r13] == null ? null : ctx_r1.config.colConfig[i_r13].type) === "actions");
+    i0.ɵɵproperty("ngIf", ((tmp_14_0 = ctx_r1.tableConfig().colConfig[i_r13]) == null ? null : tmp_14_0.type) === "actions");
 } }
 function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -238,16 +247,18 @@ function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_7_0;
+    let tmp_9_0;
     const row_r18 = ctx.$implicit;
     const i_r9 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵclassProp("disabled-row", ctx_r1.isRowDisabled(row_r18));
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(6, _c6$1, ctx_r1.config.cellHover, ctx_r1.activeRowIndex.includes(i_r9)))("ngStyle", i0.ɵɵpureFunction1(9, _c7$1, (ctx_r1.config == null ? null : ctx_r1.config.rowConfig == null ? null : ctx_r1.config.rowConfig.height) ? ctx_r1.config.rowConfig.height : "44px"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(6, _c6$1, ctx_r1.tableConfig().cellHover, ctx_r1.activeRowIndex().includes(i_r9)))("ngStyle", i0.ɵɵpureFunction1(9, _c7$1, ((tmp_7_0 = ctx_r1.tableConfig()) == null ? null : tmp_7_0.rowConfig == null ? null : tmp_7_0.rowConfig.height) ? ctx_r1.tableConfig().rowConfig.height : "44px"));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", row_r18);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r9);
+    i0.ɵɵproperty("ngIf", ((tmp_9_0 = ctx_r1.tableConfig()) == null ? null : tmp_9_0.canExpand) && ctx_r1.expandedIndex === i_r9);
 } }
 function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
@@ -256,9 +267,10 @@ function TableComponent_div_8_ng_container_7_div_1_span_1_Template(rf, ctx) { if
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_6_0;
     const pageNumber_r21 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r21 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c15, pageNumber_r21 == ((tmp_6_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_6_0.selectedPage)));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(pageNumber_r21);
 } }
@@ -292,7 +304,7 @@ function TableComponent_div_8_ng_container_7_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.pages);
+    i0.ɵɵproperty("ngForOf", ctx_r1.pages());
 } }
 function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
@@ -300,7 +312,7 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 46)(4, "span", 47);
-    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) > 1 && ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1)); });
+    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_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.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(5, "svg", 48);
     i0.ɵɵelement(6, "path", 49);
@@ -308,67 +320,79 @@ function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(7, TableComponent_div_8_ng_container_7_Template, 2, 1, "ng-container", 18);
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(8, "span", 47);
-    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) < (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.noOfPages) && ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) + 1)); });
+    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_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.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(9, "svg", 48);
     i0.ɵɵelement(10, "path", 50);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
+    let tmp_2_0;
+    let tmp_3_0;
+    let tmp_4_0;
+    let tmp_5_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate3(" Showing ", ((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1) * ctx_r1.config.paginationConfig.rowsPerPage + 1, "-", ((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1) * ctx_r1.config.paginationConfig.rowsPerPage + ctx_r1.tableLength, " of ", ctx_r1.config.paginationConfig.totalNoOfRows, " items ");
+    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.ɵɵadvance(2);
-    i0.ɵɵclassProp("page-nav-inactive", (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) === 1);
+    i0.ɵɵclassProp("page-nav-inactive", ((tmp_3_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_3_0.selectedPage) === 1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !(ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.disablePageJumping));
+    i0.ɵɵproperty("ngIf", !((tmp_4_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_4_0.disablePageJumping));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("page-nav-inactive", (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) === (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.noOfPages));
+    i0.ɵɵclassProp("page-nav-inactive", ((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.selectedPage) === ((tmp_5_0 = ctx_r1.tableConfig().paginationConfig) == null ? null : tmp_5_0.noOfPages));
 } }
 class TableComponent {
     constructor(renderer) {
         this.renderer = renderer;
         // Initialize with -1 to indicate no row is colored at the beginning
-        this.activeRowIndex = [];
-        this.hasCheckboxActions = false;
-        this.selectAllCheckbox = false;
+        this.activeRowIndex = signal([]);
+        this.hasCheckboxActions = signal(false);
+        this.selectAllCheckbox = signal(false);
         // Filter related variables
-        this.showFilter = false;
-        this.filterName = "";
-        this.filterData = [];
-        this.filterContainerStyles = {};
-        this.appliedFilters = {};
-        this.filtersUpdated = new EventEmitter();
+        this.showFilter = signal(false);
+        this.filterName = signal("");
+        this.filterData = signal([]);
+        this.filterContainerStyles = signal({});
+        this.appliedFilters = signal({});
+        // Convert outputs to signal-based outputs
+        this.filtersUpdated = output();
         // Pagination related variables
-        this.pages = [];
-        this.pageSelected = new EventEmitter();
-        this.tableData = [];
-        this.subTableData = [];
-        this.collapseColIndex = -1;
-        this.previewLines = 0;
-        this.rowCollapseConfigIndex = -1;
-        this.expandedMap = {};
+        this.pages = signal([]);
+        this.tableLength = signal(0);
+        this.pageSelected = output();
+        // Convert inputs to signal-based inputs
+        this.tableConfig = input();
+        this.subTableconfig = input();
+        this.tableDataLoading = input();
+        this.expandedIndex = input();
+        this.tableData = input([]);
+        this.subTableData = input([]);
+        this.subTableDataLoading = input();
+        this.currentSort = input();
+        this.collapseColIndex = signal(-1);
+        this.previewLines = signal(0);
+        this.rowCollapseConfigIndex = signal(-1);
+        this.expandedMap = signal({});
         // Sorting related properties
-        this.currentSort = null;
-        this.multiColumnSort = [];
-        this.sortChange = new EventEmitter();
-        this.headerAction = new EventEmitter();
+        this.multiColumnSort = signal([]);
+        this.sortChange = output();
+        this.headerAction = output();
     }
     // Function to handle row click
     selectRow(index) {
-        if (this.hasCheckboxActions)
+        if (this.hasCheckboxActions())
             return;
-        this.activeRowIndex = [index]; // Set the selected index to the clicked row's index
-        !!this.config.rowConfig.action && this.config.rowConfig.action(index);
+        this.activeRowIndex.set([index]); // Set the selected index to the clicked row's index
+        !!this.tableConfig().rowConfig.action && this.tableConfig().rowConfig.action(index);
     }
     ngOnInit() {
-        this.hasCheckboxActions = this.config.colConfig?.some(col => col.type === "actions" && col.actionType === "checkbox");
-        this.tableLength = !!this.tableData ? this.tableData.length : 0;
+        this.hasCheckboxActions.set(this.tableConfig().colConfig?.some(col => col.type === "actions" && col.actionType === "checkbox"));
+        this.tableLength.set(!!this.tableData() ? this.tableData().length : 0);
         this.initializeFilters();
-        if (this.config.paginationConfig) {
+        if (this.tableConfig().paginationConfig) {
             this.initializePagination();
         }
-        if (this.config.canScrollHorizontally === undefined) {
-            this.config.canScrollHorizontally = false;
+        if (this.tableConfig().canScrollHorizontally === undefined) {
+            // Note: We can't directly modify input signals, this should be handled by parent component
         }
         document.addEventListener("click", event => {
             if (this.filter) {
@@ -376,45 +400,48 @@ class TableComponent {
                 let targetElement = event.target;
                 if (targetElement.className === "checkmark") {
                     isCheckBoxClicked = true;
-                    this.showFilter = true;
+                    this.showFilter.set(true);
                 }
                 let isClickInsideElement = this.filter.container.nativeElement.contains(event.target);
                 if (!isClickInsideElement && !isCheckBoxClicked) {
-                    this.toggleFilter(this.filterName);
+                    this.toggleFilter(this.filterName());
                 }
             }
         });
         // fetch collapseColIndex and previewLines if present
-        this.rowCollapseConfigIndex = this.config?.colConfig?.findIndex(col => col.type === 'actions' && col.actionType === 'row-collapse');
-        if (this.rowCollapseConfigIndex !== -1) {
-            this.collapseColIndex = this.config.colConfig[this.rowCollapseConfigIndex].collapseColumnIndex ?? null;
-            this.collapseColIndex = this.config.colConfig[this.rowCollapseConfigIndex].collapseColumnIndex ?? null;
-            this.previewLines = this.config.colConfig[this.rowCollapseConfigIndex].previewLines ?? null;
+        this.rowCollapseConfigIndex.set(this.tableConfig()?.colConfig?.findIndex(col => col.type === 'actions' && col.actionType === 'row-collapse'));
+        if (this.rowCollapseConfigIndex() !== -1) {
+            this.collapseColIndex.set(this.tableConfig().colConfig[this.rowCollapseConfigIndex()].collapseColumnIndex ?? null);
+            this.previewLines.set(this.tableConfig().colConfig[this.rowCollapseConfigIndex()].previewLines ?? null);
             this.buildExpandedMap();
         }
     }
     buildExpandedMap() {
-        this.expandedMap = {};
-        this.tableData.forEach((row, rowIndex) => {
-            this.expandedMap[`${rowIndex}`] =
-                row[this.rowCollapseConfigIndex];
+        const newExpandedMap = {};
+        this.tableData().forEach((row, rowIndex) => {
+            newExpandedMap[`${rowIndex}`] =
+                row[this.rowCollapseConfigIndex()];
         });
+        this.expandedMap.set(newExpandedMap);
     }
     ngAfterViewInit() {
-        if (this.config.paginationConfig) {
-            let height = this.config.height;
+        if (this.tableConfig().paginationConfig) {
+            let height = parseInt(this.tableConfig().height.toString().replace('px', '')) || 0;
             this.renderer.setStyle(this.table.nativeElement, "height", height - 56 + "px");
         }
     }
     ngOnChanges() {
-        this.tableLength = this.tableData?.length ?? 0;
-        if (this.config.activeRowIndex !== null) {
-            this.activeRowIndex = Array.isArray(this.config.activeRowIndex) ? this.config.activeRowIndex : [this.config.activeRowIndex];
+        this.tableLength.set(this.tableData()?.length ?? 0);
+        if (this.tableConfig().activeRowIndex !== null && this.tableConfig().activeRowIndex !== undefined) {
+            const activeRowIndex = this.tableConfig().activeRowIndex;
+            this.activeRowIndex.set(Array.isArray(activeRowIndex) ? activeRowIndex : [activeRowIndex]);
         }
     }
     // Filter related functions
     initializeFilters() {
-        for (let colHeader of this.config?.colHeaderConfig) {
+        const newAppliedFilters = {};
+        const allFilters = [];
+        for (let colHeader of this.tableConfig()?.colHeaderConfig) {
             if (colHeader.filters) {
                 let filters = [];
                 for (let filter of colHeader.filters) {
@@ -424,16 +451,20 @@ class TableComponent {
                             value: filter.value
                         });
                     }
+                    // Add all filters to the filterData array
+                    allFilters.push(filter);
                 }
                 if (filters.length > 0)
-                    this.appliedFilters[colHeader.data] = filters;
+                    newAppliedFilters[colHeader.data] = filters;
             }
         }
+        this.appliedFilters.set(newAppliedFilters);
+        this.filterData.set(allFilters);
     }
     toggleFilter(filterName) {
-        if (!this.showFilter) {
-            this.filterName = filterName;
-            this.showFilter = true;
+        if (!this.showFilter()) {
+            this.filterName.set(filterName);
+            this.showFilter.set(true);
             let offSet = 0;
             let colHeadersReversed = this.colHeaders.toArray().reverse();
             for (let header of colHeadersReversed) {
@@ -441,81 +472,82 @@ class TableComponent {
                     break;
                 offSet += header.nativeElement.offsetWidth;
             }
-            this.filterContainerStyles = {
+            this.filterContainerStyles.set({
                 top: "44px",
                 right: offSet > 0 ? offSet - 116 + "px" : "12px"
-            };
+            });
         }
         else {
-            this.filterName = "";
-            this.filterData = [];
-            this.showFilter = false;
+            this.filterName.set("");
+            this.filterData.set([]);
+            this.showFilter.set(false);
         }
     }
     updateAppliedFilters(appliedFilters) {
+        const currentFilters = this.appliedFilters();
         if (appliedFilters.length == 0) {
-            delete this.appliedFilters[this.filterName];
+            delete currentFilters[this.filterName()];
         }
         else {
-            this.appliedFilters[this.filterName] = appliedFilters;
+            currentFilters[this.filterName()] = appliedFilters;
         }
-        this.filtersUpdated.emit({ ...this.appliedFilters });
-        this.toggleFilter(this.filterName);
+        this.appliedFilters.set({ ...currentFilters });
+        this.filtersUpdated.emit({ ...this.appliedFilters() });
+        this.toggleFilter(this.filterName());
     }
     // Pagination related functions
     initializePagination() {
-        if (this.config.paginationConfig) {
-            let len = this.config.paginationConfig.noOfPages;
+        if (this.tableConfig().paginationConfig) {
+            let len = this.tableConfig().paginationConfig.noOfPages;
             if (len <= 7) {
+                const newPages = [];
                 for (let i = 1; i <= len; i++) {
-                    this.pages.push(i);
+                    newPages.push(i);
                 }
+                this.pages.set(newPages);
             }
             else {
-                this.pages = [1, 2, 3, 4, 0, len];
+                this.pages.set([1, 2, 3, 4, 0, len]);
             }
         }
     }
     updateSelectedPage(pageNumber) {
         // Guard clause to prevent out-of-range updates
-        if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
+        if (pageNumber < 1 || pageNumber > this.tableConfig().paginationConfig.noOfPages)
             return;
-        if (this.config.colHeaderConfig?.some(col => col.type === "checkbox")) {
-            this.selectAllCheckbox = false;
-        }
-        if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
-            return;
-        this.config.paginationConfig.selectedPage = pageNumber;
-        let len = this.config.paginationConfig.noOfPages;
+        // 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
+        let len = this.tableConfig().paginationConfig.noOfPages;
         if (len > 7) {
             if (pageNumber - 2 <= 1) {
-                this.pages = [1, 2, 3, 4, 0, len];
+                this.pages.set([1, 2, 3, 4, 0, len]);
             }
             else if (pageNumber - 2 > 1 && pageNumber + 2 < len) {
-                this.pages = [1, 0, pageNumber - 1, pageNumber, pageNumber + 1, 0, len];
+                this.pages.set([1, 0, pageNumber - 1, pageNumber, pageNumber + 1, 0, len]);
             }
             else if (pageNumber + 2 >= len) {
-                this.pages = [1, 0, len - 3, len - 2, len - 1, len];
+                this.pages.set([1, 0, len - 3, len - 2, len - 1, len]);
             }
         }
-        this.pageSelected.emit(this.config.paginationConfig?.selectedPage);
+        this.pageSelected.emit(pageNumber);
     }
     // Main container related functions
     getContainerHeight() {
-        if (this.config?.height)
-            return this.config.height;
+        if (this.tableConfig()?.height)
+            return this.tableConfig().height;
         else
             return "";
     }
     getContainerWidth() {
-        if (this.config?.width)
-            return this.config.width;
+        if (this.tableConfig()?.width)
+            return this.tableConfig().width;
         else
             return "";
     }
     // Column Headers related functions
     getColHeadersRowStyles() {
-        const { colHeadersRowConfig } = this.config;
+        const { colHeadersRowConfig } = this.tableConfig();
         const minHeight = colHeadersRowConfig?.height || "44px";
         const borderTop = colHeadersRowConfig?.style?.borderTop || "";
         const borderBottom = colHeadersRowConfig?.style?.borderBottom || "1px solid #E0E0E0";
@@ -530,22 +562,28 @@ class TableComponent {
         };
     }
     onSortChange(sortState) {
-        this.currentSort = sortState;
-        if (this.config.multiColumnSort) {
-            const index = this.multiColumnSort.findIndex(sort => sort.column === sortState.column);
+        // Emit the sort change to the parent component
+        this.sortChange.emit(sortState);
+        // Handle multi-column sort if enabled
+        if (this.tableConfig().multiColumnSort) {
+            const currentMultiSort = this.multiColumnSort();
+            const index = currentMultiSort.findIndex(sort => sort.column === sortState.column);
             if (index !== -1) {
                 if (sortState.direction === null) {
-                    this.multiColumnSort.splice(index, 1);
+                    const newMultiSort = [...currentMultiSort];
+                    newMultiSort.splice(index, 1);
+                    this.multiColumnSort.set(newMultiSort);
                 }
                 else {
-                    this.multiColumnSort[index] = sortState;
+                    const newMultiSort = [...currentMultiSort];
+                    newMultiSort[index] = sortState;
+                    this.multiColumnSort.set(newMultiSort);
                 }
             }
             else if (sortState.direction !== null) {
-                this.multiColumnSort.push(sortState);
+                this.multiColumnSort.set([...currentMultiSort, sortState]);
             }
         }
-        this.sortChange.emit(sortState);
     }
     getActionsCellStyle(style) {
         if (!style)
@@ -555,32 +593,33 @@ class TableComponent {
     }
     onActionClick(event, rowIndex) {
         if (event.actionType === 'checkbox') {
+            const currentActiveRows = this.activeRowIndex();
             if (event.value) {
-                this.activeRowIndex.push(rowIndex);
+                this.activeRowIndex.set([...currentActiveRows, rowIndex]);
             }
             else {
-                this.activeRowIndex = this.activeRowIndex.filter(index => index !== rowIndex);
+                this.activeRowIndex.set(currentActiveRows.filter(index => index !== rowIndex));
             }
             const actionInfo = this.findActionConfig('checkbox');
-            if (actionInfo && this.tableData[rowIndex]) {
+            if (actionInfo && this.tableData()[rowIndex]) {
                 const { index, config } = actionInfo;
-                this.tableData[rowIndex][index] = event.value;
-                const checkedItems = this.tableData.filter(row => row[index] === true);
+                // Note: We can't directly modify input signals, this should be handled by parent component
+                const checkedItems = this.tableData().filter(row => row[index] === true);
                 config.action?.(checkedItems);
             }
         }
         else if (event.actionType === 'row-collapse') {
             const rowCollapse = this.findActionConfig('row-collapse');
-            if (rowCollapse && this.tableData[rowIndex]) {
-                this.tableData[rowIndex][rowCollapse.index] = event.value;
-                rowCollapse.config.action?.(this.tableData);
+            if (rowCollapse && this.tableData()[rowIndex]) {
+                // Note: We can't directly modify input signals, this should be handled by parent component
+                rowCollapse.config.action?.(this.tableData());
                 this.buildExpandedMap();
             }
         }
     }
     findActionConfig(actionType) {
-        for (let i = 0; i < this.config.colConfig.length; i++) {
-            const col = this.config.colConfig[i];
+        for (let i = 0; i < this.tableConfig().colConfig.length; i++) {
+            const col = this.tableConfig().colConfig[i];
             if (col.type === 'actions' && col.actionType === actionType) {
                 return { index: i, config: col };
             }
@@ -588,27 +627,25 @@ class TableComponent {
         return null;
     }
     isRowDisabled(row) {
-        return typeof this.config.rowConfig.disableRow === "function" ? this.config.rowConfig.disableRow(row) : false;
+        return typeof this.tableConfig().rowConfig.disableRow === "function" ? this.tableConfig().rowConfig.disableRow(row) : false;
     }
     toggleCheckbox() {
-        this.selectAllCheckbox = !this.selectAllCheckbox;
-        const checkboxColIndex = this.config.colConfig.findIndex(col => col.type === 'actions' && col.actionType === 'checkbox');
+        this.selectAllCheckbox.set(!this.selectAllCheckbox());
+        const checkboxColIndex = this.tableConfig().colConfig.findIndex(col => col.type === 'actions' && col.actionType === 'checkbox');
         if (checkboxColIndex !== -1) {
-            this.tableData = this.tableData.map((row) => {
+            // Note: We can't directly modify input signals, this should be handled by parent component
+            const updatedTableData = this.tableData().map((row) => {
                 const updatedRow = [...row];
                 const currentCheckbox = updatedRow[checkboxColIndex];
                 const isDisabled = this.isRowDisabled(row);
                 if (!isDisabled) {
-                    updatedRow[checkboxColIndex] = {
-                        ...currentCheckbox,
-                        value: this.selectAllCheckbox
-                    };
+                    updatedRow[checkboxColIndex] = this.selectAllCheckbox();
                 }
                 return updatedRow;
             });
             this.headerAction?.emit({
                 type: "checkboxToggle",
-                payload: this.tableData
+                payload: updatedTableData
             });
         }
     }
@@ -622,7 +659,7 @@ class TableComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
-        } }, inputs: { config: [0, "tableConfig", "config"], subTableconfig: "subTableconfig", tableDataLoading: "tableDataLoading", expandedIndex: "expandedIndex", tableData: "tableData", subTableData: "subTableData", subTableDataLoading: "subTableDataLoading" }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange", headerAction: "headerAction" }, features: [i0.ɵɵNgOnChangesFeature], decls: 9, vars: 15, consts: [["table", ""], ["filter", ""], ["colHeaderRef", ""], ["plainText", ""], ["id", "main-container", 3, "ngStyle"], [3, "containerStyles", "filtersData", "filtersApplied", 4, "ngIf"], ["id", "table-container", 3, "ngClass"], ["id", "col-headers-container", 3, "ngStyle"], ["class", "col-header", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], ["id", "data-container"], ["class", "row-wrapper", 4, "ngFor", "ngForOf"], ["id", "pagination-container", 4, "ngIf"], [3, "filtersApplied", "containerStyles", "filtersData"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], ["class", "filter-icon", 3, "click", 4, "ngIf"], ["class", "checkbox-icon", 3, "click", 4, "ngIf"], ["appSortIcons", "", "class", "sort-icon", 3, "column", "activeSort", "activeSorts", "multiColumnSort", "sortChange", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], [1, "filter-icon", 3, "click"], ["id", "filter-active", 4, "ngIf"], ["fill", "none", "height", "10", "viewBox", "0 0 13 10", "width", "13", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z", "fill", "#181F33", "fill-rule", "evenodd"], ["id", "filter-active"], [1, "checkbox-icon", 3, "click"], [3, "checked"], ["appSortIcons", "", 1, "sort-icon", 3, "sortChange", "column", "activeSort", "activeSorts", "multiColumnSort"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper"], [1, "t-row", 3, "click", "ngClass", "ngStyle"], ["class", "t-col-container", 3, "ngStyle", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "sub-row", 4, "ngIf"], [1, "t-col-container", 3, "click", "ngStyle", "ngClass"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", "ngClass", 4, "ngIf"], [3, "cellData", "config", "ngClass", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [4, "ngIf", "ngIfElse"], [3, "innerHTML"], [3, "actionClick", "cellData", "config", "ngClass"], [1, "sub-row"], [3, "ngStyle"], [3, "config", "tableData"], ["id", "pagination-container"], ["id", "pagination-text"], ["id", "pages-container"], [1, "page", 3, "click"], ["fill", "none", "height", "10", "viewBox", "0 0 7 10", "width", "7", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "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", "fill", "#181F33", "fill-rule", "evenodd"], ["clip-rule", "evenodd", "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", "fill", "#181F33", "fill-rule", "evenodd"], [4, "ngFor", "ngForOf"], ["class", "page page-jumping-enabled", 3, "ngClass", "click", 4, "ngIf"], ["class", "page-seperator", 4, "ngIf"], [1, "page", "page-jumping-enabled", 3, "click", "ngClass"], [1, "page-seperator"], [1, "dot", 3, "ngStyle"], [1, "dot"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { tableConfig: [1, "tableConfig"], subTableconfig: [1, "subTableconfig"], tableDataLoading: [1, "tableDataLoading"], expandedIndex: [1, "expandedIndex"], tableData: [1, "tableData"], subTableData: [1, "subTableData"], subTableDataLoading: [1, "subTableDataLoading"], currentSort: [1, "currentSort"] }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange", headerAction: "headerAction" }, features: [i0.ɵɵNgOnChangesFeature], decls: 9, vars: 15, consts: [["table", ""], ["filter", ""], ["colHeaderRef", ""], ["plainText", ""], ["id", "main-container", 3, "ngStyle"], [3, "containerStyles", "filtersData", "filtersApplied", 4, "ngIf"], ["id", "table-container", 3, "ngClass"], ["id", "col-headers-container", 3, "ngStyle"], ["class", "col-header", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], ["id", "data-container"], ["class", "row-wrapper", 4, "ngFor", "ngForOf"], ["id", "pagination-container", 4, "ngIf"], [3, "filtersApplied", "containerStyles", "filtersData"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], ["class", "filter-icon", 3, "click", 4, "ngIf"], ["class", "checkbox-icon", 3, "click", 4, "ngIf"], ["appSortIcons", "", "class", "sort-icon", 3, "column", "activeSort", "activeSorts", "multiColumnSort", "sortChange", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], [1, "filter-icon", 3, "click"], ["id", "filter-active", 4, "ngIf"], ["fill", "none", "height", "10", "viewBox", "0 0 13 10", "width", "13", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z", "fill", "#181F33", "fill-rule", "evenodd"], ["id", "filter-active"], [1, "checkbox-icon", 3, "click"], [3, "checked"], ["appSortIcons", "", 1, "sort-icon", 3, "sortChange", "column", "activeSort", "activeSorts", "multiColumnSort"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper"], [1, "t-row", 3, "click", "ngClass", "ngStyle"], ["class", "t-col-container", 3, "ngStyle", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "sub-row", 4, "ngIf"], [1, "t-col-container", 3, "click", "ngStyle", "ngClass"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", "ngClass", 4, "ngIf"], [3, "cellData", "config", "ngClass", "actionClick", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle", "ngClass"], [4, "ngIf", "ngIfElse"], [3, "innerHTML"], [3, "actionClick", "cellData", "config", "ngClass"], [1, "sub-row"], [3, "ngStyle"], [3, "config", "tableData"], ["id", "pagination-container"], ["id", "pagination-text"], ["id", "pages-container"], [1, "page", 3, "click"], ["fill", "none", "height", "10", "viewBox", "0 0 7 10", "width", "7", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "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", "fill", "#181F33", "fill-rule", "evenodd"], ["clip-rule", "evenodd", "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", "fill", "#181F33", "fill-rule", "evenodd"], [4, "ngFor", "ngForOf"], ["class", "page page-jumping-enabled", 3, "ngClass", "click", 4, "ngIf"], ["class", "page-seperator", 4, "ngIf"], [1, "page", "page-jumping-enabled", 3, "click", "ngClass"], [1, "page-seperator"], [1, "dot", 3, "ngStyle"], [1, "dot"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 4);
             i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 5);
             i0.ɵɵelementStart(2, "div", 6, 0)(4, "div", 7);
@@ -634,73 +671,60 @@ class TableComponent {
             i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 8, "div", 11);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3$1, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.config.canScrollHorizontally ? "auto" : "unset"));
+            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);
+            i0.ɵɵproperty("ngIf", ctx.showFilter());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c4$1, ctx.expandedIndex < 0, !(ctx.expandedIndex < 0), ctx.config.canScrollHorizontally));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c4$1, ctx.expandedIndex() < 0, !(ctx.expandedIndex() < 0), ctx.tableConfig().canScrollHorizontally));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngStyle", ctx.getColHeadersRowStyles());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.config == null ? null : ctx.config.colHeaderConfig);
+            i0.ɵɵproperty("ngForOf", (tmp_5_0 = ctx.tableConfig()) == null ? null : tmp_5_0.colHeaderConfig);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.tableData);
+            i0.ɵɵproperty("ngForOf", ctx.tableData());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", (ctx.config == null ? null : ctx.config.paginationConfig) && (ctx.tableLength >= ctx.config.paginationConfig.rowsPerPage || (ctx.config.paginationConfig == null ? null : ctx.config.paginationConfig.selectedPage) !== 1));
+            i0.ɵɵproperty("ngIf", ((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));
         } }, 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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.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:#e6ebf7}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid #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%]{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:#6a737d;margin:0 56px 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:#6a737d;margin-right:8px;cursor:pointer}.page.page-jumping-enabled[_ngcontent-%COMP%]{border:1px solid #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:#6a737d}.page-active[_ngcontent-%COMP%]{color:#0937b2;border:1px solid #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:#e6f5fd}.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}.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': config.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': config.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 config?.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 = 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]=\"config.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    <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': config.cellHover, 'active-row': activeRowIndex.includes(i) }\"\n          [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n          (click)=\"selectRow(i)\"\n          [class.disabled-row]=\"isRowDisabled(row)\"\n          >\n          <div\n            (click)=\"config?.colConfig[i]?.action && config?.colConfig[i]?.actionType !== 'checkbox' ? config?.colConfig[i]?.action(col) : null\"\n            *ngFor=\"let col of row; let i = index\"\n            [ngStyle]=\"{\n              width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n            }\"\n            class=\"t-col-container\"\n            [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\n          >\n            <div\n              class=\"t-col\"\n              [style]=\"config.colConfig[i]?.style\"\n              [ngStyle]=\"{\n                width: '100%',\n                cursor: config.colConfig[i]?.action ? 'pointer' : 'default',\n                'justify-content': config.colConfig[i]?.style?.justifyContent\n                  ? config.colConfig[i]?.style?.justifyContent\n                  : config.colConfig[i]?.type === 'number'\n                  ? 'flex-end'\n                  : 'space-between'\n              }\"\n            >\n            <div\n            *ngIf=\"config.colConfig[i]?.type !== 'custom' && config.colConfig[i]?.type !== 'actions'\"\n            [ngStyle]=\"{\n              color: config?.colConfig[i]?.style?.color || '',\n              '--collapsed-lines': previewLines || 3\n            }\"\n            [ngClass]=\"{\n              'collapsed-cell': collapseColIndex == i && expandedMap[rowIndex]\n            }\"\n            class=\"t-col-text\"\n          >\n            <!-- Render as HTML -->\n            <ng-container *ngIf=\"config.colConfig[i]?.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\n          \n              <ng-template\n                *ngIf=\"config.colConfig[i]?.type === 'custom'\"\n                [customComponent]=\"config.colConfig[i].componentRef\"\n                [data]=\"col\"\n                customTableCell\n              ></ng-template>\n                <mis-actions-cell\n                  *ngIf=\"config.colConfig[i]?.type === 'actions'\"\n                  [cellData]=\"col\"\n                  [config]=\"config.colConfig[i]\"\n                  (actionClick)=\"onActionClick($event, rowIndex)\"\n                  [ngClass]=\"{\n                    'disable-actions': (config.colConfig[i]?.actionType === 'checkbox' || config.colConfig[i]?.actionType === 'row-collapse') && isRowDisabled(row)\n                  }\"\n                ></mis-actions-cell>\n\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"config?.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\n    *ngIf=\"config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)\"\n    id=\"pagination-container\"\n  >\n    <p id=\"pagination-text\">\n      Showing\n      {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n        (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n      }}\n      of {{ config.paginationConfig.totalNoOfRows }} items\n    </p>\n    <div id=\"pages-container\">\n      <span   (click)=\"config.paginationConfig?.selectedPage > 1 && updateSelectedPage(config.paginationConfig?.selectedPage - 1)\" class=\"page\" [class.page-nav-inactive]=\"config.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=\"!config.paginationConfig?.disablePageJumping\">\n          <div *ngFor=\"let pageNumber of pages\">\n            <span\n              (click)=\"updateSelectedPage(pageNumber)\"\n              *ngIf=\"pageNumber != 0\"\n              [ngClass]=\"{ 'page-active': pageNumber == config.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]=\"config.paginationConfig?.selectedPage === config.paginationConfig?.noOfPages\"\n      (click)=\"config.paginationConfig?.selectedPage < config.paginationConfig?.noOfPages && updateSelectedPage(config.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</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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.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:#e6ebf7}.t-col-container-hover:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover{border-right:1px solid #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{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:#6a737d;margin:0 56px 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:#6a737d;margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid #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:#6a737d}.page-active{color:#0937b2;border:1px solid #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:#e6f5fd}.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}.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 }], { filtersUpdated: [{
-            type: Output
-        }], filter: [{
+        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    <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[i]?.action && tableConfig()?.colConfig[i]?.actionType !== 'checkbox' ? tableConfig()?.colConfig[i]?.action(col) : null\"\n            *ngFor=\"let col of row; let i = index\"\n            [ngStyle]=\"{\n              width: tableConfig()?.colConfig[i]?.style?.width || tableConfig()?.colHeaderConfig[i]?.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[i]?.style\"\n              [ngStyle]=\"{\n                width: '100%',\n                cursor: tableConfig().colConfig[i]?.action ? 'pointer' : 'default',\n                'justify-content': tableConfig().colConfig[i]?.style?.justifyContent\n                  ? tableConfig().colConfig[i]?.style?.justifyContent\n                  : tableConfig().colConfig[i]?.type === 'number'\n                  ? 'flex-end'\n                  : 'space-between'\n              }\"\n            >\n            <div\n            *ngIf=\"tableConfig().colConfig[i]?.type !== 'custom' && tableConfig().colConfig[i]?.type !== 'actions'\"\n            [ngStyle]=\"{\n              color: tableConfig()?.colConfig[i]?.style?.color || '',\n              '--collapsed-lines': previewLines || 3\n            }\"\n            [ngClass]=\"{\n              'collapsed-cell': collapseColIndex == i && expandedMap[rowIndex]\n            }\"\n            class=\"t-col-text\"\n          >\n            <!-- Render as HTML -->\n            <ng-container *ngIf=\"tableConfig().colConfig[i]?.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\n          \n              <ng-template\n                *ngIf=\"tableConfig().colConfig[i]?.type === 'custom'\"\n                [customComponent]=\"tableConfig().colConfig[i].componentRef\"\n                [data]=\"col\"\n                customTableCell\n              ></ng-template>\n                <mis-actions-cell\n                  *ngIf=\"tableConfig().colConfig[i]?.type === 'actions'\"\n                  [cellData]=\"col\"\n                  [config]=\"tableConfig().colConfig[i]\"\n                  (actionClick)=\"onActionClick($event, rowIndex)\"\n                  [ngClass]=\"{\n                    'disable-actions': (tableConfig().colConfig[i]?.actionType === 'checkbox' || tableConfig().colConfig[i]?.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\n    *ngIf=\"tableConfig()?.paginationConfig && (tableLength() >= tableConfig().paginationConfig.rowsPerPage || tableConfig().paginationConfig?.selectedPage !== 1)\"\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    <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</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:#9aa7b4;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:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #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:#16cbbc;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:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.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:#e6ebf7}.t-col-container-hover:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover{border-right:1px solid #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{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:#6a737d;margin:0 56px 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:#6a737d;margin-right:8px;cursor:pointer}.page.page-jumping-enabled{border:1px solid #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:#6a737d}.page-active{color:#0937b2;border:1px solid #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:#e6f5fd}.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}.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"]
         }], colHeaders: [{
             type: ViewChildren,
             args: ["colHeaderRef"]
-        }], pageSelected: [{
-            type: Output
-        }], config: [{
-            type: Input,
-            args: ["tableConfig"]
-        }], subTableconfig: [{
-            type: Input
-        }], tableDataLoading: [{
-            type: Input
-        }], expandedIndex: [{
-            type: Input
-        }], tableData: [{
-            type: Input
-        }], subTableData: [{
-            type: Input
-        }], subTableDataLoading: [{
-            type: Input
         }], table: [{
             type: ViewChild,
             args: ["table"]
-        }], sortChange: [{
-            type: Output
-        }], headerAction: [{
-            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent" }); })();
 
 class CustomTableCellDirective {
-    set customComponent(value) {
-        this.component = value;
-        this.createComponent();
-    }
-    set data(value) {
-        this.cellData = value;
-        if (this.ref) {
-            this.ref.instance.data = this.cellData;
-        }
-    }
     constructor(viewContainerRef, componentFactoryResolver) {
         this.viewContainerRef = viewContainerRef;
         this.componentFactoryResolver = componentFactoryResolver;
+        this.customComponent = input();
+        this.data = input();
+        effect(() => {
+            const component = this.customComponent();
+            if (component) {
+                this.component = component;
+                this.createComponent();
+            }
+        });
+        effect(() => {
+            const data = this.data();
+            if (data !== undefined) {
+                this.cellData = data;
+                if (this.ref) {
+                    this.ref.instance.data = this.cellData;
+                }
+            }
+        });
     }
     createComponent() {
         if (this.component) {
@@ -714,18 +738,14 @@ class CustomTableCellDirective {
         this.ref.instance.data = this.cellData;
     }
     static { this.ɵfac = function CustomTableCellDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CustomTableCellDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CustomTableCellDirective, selectors: [["", "customTableCell", ""]], inputs: { customComponent: "customComponent", data: "data" } }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CustomTableCellDirective, selectors: [["", "customTableCell", ""]], inputs: { customComponent: [1, "customComponent"], data: [1, "data"] } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomTableCellDirective, [{
         type: Directive,
         args: [{
                 selector: "[customTableCell]"
             }]
-    }], () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }], { customComponent: [{
-            type: Input
-        }], data: [{
-            type: Input
-        }] }); })();
+    }], () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }], null); })();
 
 const _c0$2 = ["table"];
 const _c1$2 = (a0, a1) => ({ height: a0, width: a1 });
@@ -771,21 +791,23 @@ function SubTableComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(1, SubTableComponent_div_3_div_1_Template, 3, 9, "div", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_3_0;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(2, _c2$2, ctx_r2.getColHeadersRowHeight(), ctx_r2.getColHeadersRowBorderTop(), ctx_r2.getColHeadersRowBorderBottom()));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.config == null ? null : ctx_r2.config.colHeaderConfig);
+    i0.ɵɵproperty("ngForOf", (tmp_3_0 = ctx_r2.config()) == null ? null : tmp_3_0.colHeaderConfig);
 } }
 function SubTableComponent_div_6_div_2_p_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_8_0;
     const ctx_r7 = i0.ɵɵnextContext();
     const col_r6 = ctx_r7.$implicit;
     const i_r7 = ctx_r7.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c7, (ctx_r2.config == null ? null : ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].style == null ? null : ctx_r2.config.colConfig[i_r7].style.color) ? ctx_r2.config == null ? null : ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].style == null ? null : ctx_r2.config.colConfig[i_r7].style.color : ""));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c7, ((tmp_8_0 = ctx_r2.config()) == null ? null : tmp_8_0.colConfig[i_r7] == null ? null : tmp_8_0.colConfig[i_r7].style == null ? null : tmp_8_0.colConfig[i_r7].style.color) ? (tmp_8_0 = ctx_r2.config()) == null ? null : tmp_8_0.colConfig[i_r7] == null ? null : tmp_8_0.colConfig[i_r7].style == null ? null : tmp_8_0.colConfig[i_r7].style.color : ""));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", col_r6, " ");
 } }
@@ -797,26 +819,29 @@ function SubTableComponent_div_6_div_2_3_Template(rf, ctx) { if (rf & 1) {
     const col_r6 = ctx_r7.$implicit;
     const i_r7 = ctx_r7.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("customComponent", ctx_r2.config.colConfig[i_r7].componentRef)("data", col_r6);
+    i0.ɵɵproperty("customComponent", ctx_r2.config().colConfig[i_r7].componentRef)("data", col_r6);
 } }
 function SubTableComponent_div_6_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵlistener("click", function SubTableComponent_div_6_div_2_Template_div_click_0_listener() { const ctx_r4 = i0.ɵɵrestoreView(_r4); const col_r6 = ctx_r4.$implicit; const i_r7 = ctx_r4.index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r2.config == null ? null : ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].action) ? ctx_r2.config == null ? null : ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].action(col_r6) : null); });
+    i0.ɵɵlistener("click", function SubTableComponent_div_6_div_2_Template_div_click_0_listener() { let tmp_8_0; const ctx_r4 = i0.ɵɵrestoreView(_r4); const col_r6 = ctx_r4.$implicit; const i_r7 = ctx_r4.index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(((tmp_8_0 = ctx_r2.config()) == null ? null : tmp_8_0.colConfig[i_r7] == null ? null : tmp_8_0.colConfig[i_r7].action) ? (tmp_8_0 = ctx_r2.config()) == null ? null : tmp_8_0.colConfig[i_r7] == null ? null : tmp_8_0.colConfig[i_r7].action(col_r6) : null); });
     i0.ɵɵelementStart(1, "div", 17);
     i0.ɵɵtemplate(2, SubTableComponent_div_6_div_2_p_2_Template, 2, 4, "p", 18)(3, SubTableComponent_div_6_div_2_3_Template, 1, 2, null, 10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    let tmp_7_0;
+    let tmp_8_0;
+    let tmp_9_0;
     const i_r7 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c5, (ctx_r2.config == null ? null : ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].style == null ? null : ctx_r2.config.colConfig[i_r7].style.width) || (ctx_r2.config == null ? null : ctx_r2.config.colHeaderConfig[i_r7] == null ? null : ctx_r2.config.colHeaderConfig[i_r7].style == null ? null : ctx_r2.config.colHeaderConfig[i_r7].style.width) || ""));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c5, ((tmp_7_0 = ctx_r2.config()) == null ? null : tmp_7_0.colConfig[i_r7] == null ? null : tmp_7_0.colConfig[i_r7].style == null ? null : tmp_7_0.colConfig[i_r7].style.width) || ((tmp_7_0 = ctx_r2.config()) == null ? null : tmp_7_0.colHeaderConfig[i_r7] == null ? null : tmp_7_0.colHeaderConfig[i_r7].style == null ? null : tmp_7_0.colHeaderConfig[i_r7].style.width) || ""));
     i0.ɵɵadvance();
-    i0.ɵɵstyleMap(ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].style);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(8, _c6, ctx_r2.config.colConfig[i_r7].action ? "pointer" : "default", (ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].style == null ? null : ctx_r2.config.colConfig[i_r7].style.justifyContent) ? ctx_r2.config.colConfig[i_r7] == null ? null : ctx_r2.config.colConfig[i_r7].style == null ? null : ctx_r2.config.colConfig[i_r7].style.justifyContent : ctx_r2.config.colConfig[i_r7].type === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵstyleMap((tmp_8_0 = ctx_r2.config().colConfig[i_r7]) == null ? null : tmp_8_0.style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(8, _c6, ctx_r2.config().colConfig[i_r7].action ? "pointer" : "default", ((tmp_9_0 = ctx_r2.config().colConfig[i_r7]) == null ? null : tmp_9_0.style == null ? null : tmp_9_0.style.justifyContent) ? (tmp_9_0 = ctx_r2.config().colConfig[i_r7]) == null ? null : tmp_9_0.style == null ? null : tmp_9_0.style.justifyContent : ctx_r2.config().colConfig[i_r7].type === "number" ? "flex-end" : "space-between"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.config.colConfig[i_r7].type !== "custom");
+    i0.ɵɵproperty("ngIf", ctx_r2.config().colConfig[i_r7].type !== "custom");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.config.colConfig[i_r7].type === "custom");
+    i0.ɵɵproperty("ngIf", ctx_r2.config().colConfig[i_r7].type === "custom");
 } }
 function SubTableComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "div", 14);
@@ -832,51 +857,47 @@ function SubTableComponent_div_6_Template(rf, ctx) { if (rf & 1) {
 class SubTableComponent {
     constructor(renderer) {
         this.renderer = renderer;
-        this.selectedPage = 1;
-        this.pages = [];
-        this.tableData = [];
+        this.selectedPage = signal(1);
+        this.pages = signal([]);
+        this.config = input();
+        this.tableData = input([]);
     }
     ngOnInit() { }
     ngAfterViewInit() {
-        if (this.config.paginationConfig) {
-            let height = this.table.nativeElement.offsetHeight;
-            this.renderer.setStyle(this.table.nativeElement, "height", height - 56 + "px");
-        }
+        let height = this.table.nativeElement.offsetHeight;
+        this.renderer.setStyle(this.table.nativeElement, "height", height - 56 + "px");
     }
     // Main container related functions
     getContainerHeight() {
-        if (this.config.height)
-            return this.config.height;
+        if (this.config().height)
+            return this.config().height;
         else
             return "";
     }
     getContainerWidth() {
-        if (this.config.width)
-            return this.config.width;
+        if (this.config().width)
+            return this.config().width;
         else
             return "";
     }
     // Column Headers related functions
     getColHeadersRowHeight() {
-        if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {
-            return this.config.colHeadersRowConfig.height;
+        if (this.config().colHeadersRowConfig && this.config().colHeadersRowConfig.height) {
+            return this.config().colHeadersRowConfig.height;
         }
-        else
-            return "44px";
+        return "44px";
     }
     getColHeadersRowBorderTop() {
-        if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderTop) {
-            return this.config.colHeadersRowConfig.style?.borderTop;
+        if (this.config().colHeadersRowConfig && this.config().colHeadersRowConfig.style?.borderTop) {
+            return this.config().colHeadersRowConfig.style?.borderTop;
         }
-        else
-            return "";
+        return "";
     }
     getColHeadersRowBorderBottom() {
-        if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderBottom) {
-            return this.config.colHeadersRowConfig.style?.borderBottom;
+        if (this.config().colHeadersRowConfig && this.config().colHeadersRowConfig.style?.borderBottom) {
+            return this.config().colHeadersRowConfig.style?.borderBottom;
         }
-        else
-            return "1px solid #E0E0E0";
+        return "1px solid #E0E0E0";
     }
     static { this.ɵfac = function SubTableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubTableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SubTableComponent, selectors: [["sub-table"]], viewQuery: function SubTableComponent_Query(rf, ctx) { if (rf & 1) {
@@ -884,7 +905,7 @@ class SubTableComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
-        } }, inputs: { config: "config", tableData: "tableData" }, decls: 7, vars: 12, consts: [["table", ""], ["id", "main-container", 3, "ngStyle"], ["id", "table-container"], ["id", "col-headers-container", 3, "ngStyle", 4, "ngIf"], ["itemSize", "50", "id", "data-container", 3, "minBufferPx", "maxBufferPx"], ["class", "row-wrapper", 3, "ngStyle", 4, "cdkVirtualFor", "cdkVirtualForOf"], ["id", "col-headers-container", 3, "ngStyle"], ["class", "col-header", 3, "style", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper", 3, "ngStyle"], [1, "t-row"], ["class", "t-col-container", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "t-col-container", 3, "click", "ngStyle"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle"]], template: function SubTableComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { config: [1, "config"], tableData: [1, "tableData"] }, decls: 7, vars: 12, consts: [["table", ""], ["id", "main-container", 3, "ngStyle"], ["id", "table-container"], ["id", "col-headers-container", 3, "ngStyle", 4, "ngIf"], ["itemSize", "50", "id", "data-container", 3, "minBufferPx", "maxBufferPx"], ["class", "row-wrapper", 3, "ngStyle", 4, "cdkVirtualFor", "cdkVirtualForOf"], ["id", "col-headers-container", 3, "ngStyle"], ["class", "col-header", 3, "style", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper", 3, "ngStyle"], [1, "t-row"], ["class", "t-col-container", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "t-col-container", 3, "click", "ngStyle"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle"]], template: function SubTableComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2, 0);
             i0.ɵɵtemplate(3, SubTableComponent_div_3_Template, 2, 6, "div", 3);
             i0.ɵɵelementStart(4, "div")(5, "cdk-virtual-scroll-viewport", 4);
@@ -893,22 +914,18 @@ class SubTableComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(9, _c1$2, ctx.getContainerHeight(), ctx.getContainerWidth()));
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", !!ctx.config.showHeader);
+            i0.ɵɵproperty("ngIf", !!ctx.config().showHeader);
             i0.ɵɵadvance(2);
-            i0.ɵɵstyleProp("overflow", "overlay")("height", ctx.config.dataContainerMaxHeight || "400px");
-            i0.ɵɵproperty("minBufferPx", ctx.config.dataContainerMaxHeight || "400")("maxBufferPx", ctx.config.dataContainerMaxHeight + 200 || "600");
+            i0.ɵɵstyleProp("overflow", "overlay")("height", ctx.config().dataContainerMaxHeight || "400px");
+            i0.ɵɵproperty("minBufferPx", ctx.config().dataContainerMaxHeight || "400")("maxBufferPx", ctx.config().dataContainerMaxHeight + 200 || "600");
             i0.ɵɵadvance();
             i0.ɵɵproperty("cdkVirtualForOf", ctx.tableData);
         } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2.CdkFixedSizeVirtualScroll, i2.CdkVirtualForOf, i2.CdkVirtualScrollViewport, CustomTableCellDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif}#table-container[_ngcontent-%COMP%]{height:inherit}#col-headers-container[_ngcontent-%COMP%]{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container[_ngcontent-%COMP%]{overflow:scroll;width:100%}#data-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px}#data-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header[_ngcontent-%COMP%]{height:100%;width:160px;display:flex;align-items:center;padding:0 16px}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.25px;margin:0}.t-row[_ngcontent-%COMP%]{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#f1fdf8}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;height:100%}.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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center;letter-spacing:.2px;margin:0}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubTableComponent, [{
         type: Component,
-        args: [{ selector: "sub-table", template: "<div\n  id=\"main-container\"\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth()\n  }\"\n>\n  <div id=\"table-container\" #table>\n    <div\n      id=\"col-headers-container\"\n      *ngIf=\"!!config.showHeader\"\n      [ngStyle]=\"{\n        height: getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\n    >\n      <div\n        class=\"col-header\"\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of config?.colHeaderConfig\"\n        [style]=\"colHeader?.style\"\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'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <ng-template\n          *ngIf=\"colHeader?.type === 'custom'\"\n          customTableCell\n          [customComponent]=\"colHeader?.componentRef\"\n          [data]=\"colHeader.data\"\n        ></ng-template>\n      </div>\n    </div>\n    <div>\n      <cdk-virtual-scroll-viewport\n        [minBufferPx]=\"config.dataContainerMaxHeight || '400'\"\n        [maxBufferPx]=\"config.dataContainerMaxHeight + 200 || '600'\"\n        [style.overflow]=\"'overlay'\"\n        [style.height]=\"config.dataContainerMaxHeight || '400px'\"\n        itemSize=\"50\"\n        id=\"data-container\"\n      >\n        <div\n          class=\"row-wrapper\"\n          *cdkVirtualFor=\"let row of tableData; let i = index\"\n          [ngStyle]=\"{\n            backgroundColor: i % 2 === 0 ? '#FAFAFA' : null\n          }\"\n        >\n          <div class=\"t-row\">\n            <div\n              (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\n              *ngFor=\"let col of row; let i = index\"\n              [ngStyle]=\"{\n                width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n              }\"\n              class=\"t-col-container\"\n            >\n              <div\n                class=\"t-col\"\n                [style]=\"config.colConfig[i]?.style\"\n                [ngStyle]=\"{\n                  width: '100%',\n                  cursor: config.colConfig[i].action ? 'pointer' : 'default',\n                  'justify-content': config.colConfig[i]?.style?.justifyContent\n                    ? config.colConfig[i]?.style?.justifyContent\n                    : config.colConfig[i].type === 'number'\n                    ? 'flex-end'\n                    : 'space-between'\n                }\"\n              >\n                <p\n                  *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                  [ngStyle]=\"{\n                    color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n                  }\"\n                  class=\"t-col-text\"\n                >\n                  {{ col }}\n                </p>\n                <ng-template\n                  *ngIf=\"config.colConfig[i].type === 'custom'\"\n                  [customComponent]=\"config.colConfig[i].componentRef\"\n                  [data]=\"col\"\n                  customTableCell\n                ></ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header{height:100%;width:160px;display:flex;align-items:center;padding:0 16px}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center;letter-spacing:.2px;margin:0}\n"] }]
-    }], () => [{ type: i0.Renderer2 }], { config: [{
-            type: Input
-        }], tableData: [{
-            type: Input
-        }], table: [{
+        args: [{ selector: "sub-table", template: "<div\n  id=\"main-container\"\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth()\n  }\"\n>\n  <div id=\"table-container\" #table>\n    <div\n      id=\"col-headers-container\"\n      *ngIf=\"!!config().showHeader\"\n      [ngStyle]=\"{\n        height: getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\n    >\n      <div\n        class=\"col-header\"\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of config()?.colHeaderConfig\"\n        [style]=\"colHeader?.style\"\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'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <ng-template\n          *ngIf=\"colHeader?.type === 'custom'\"\n          customTableCell\n          [customComponent]=\"colHeader?.componentRef\"\n          [data]=\"colHeader.data\"\n        ></ng-template>\n      </div>\n    </div>\n    <div>\n      <cdk-virtual-scroll-viewport\n        [minBufferPx]=\"config().dataContainerMaxHeight || '400'\"\n        [maxBufferPx]=\"config().dataContainerMaxHeight + 200 || '600'\"\n        [style.overflow]=\"'overlay'\"\n        [style.height]=\"config().dataContainerMaxHeight || '400px'\"\n        itemSize=\"50\"\n        id=\"data-container\"\n      >\n        <div\n          class=\"row-wrapper\"\n          *cdkVirtualFor=\"let row of tableData; let i = index\"\n          [ngStyle]=\"{\n            backgroundColor: i % 2 === 0 ? '#FAFAFA' : null\n          }\"\n        >\n          <div class=\"t-row\">\n            <div\n              (click)=\"config()?.colConfig[i]?.action ? config()?.colConfig[i]?.action(col) : null\"\n              *ngFor=\"let col of row; let i = index\"\n              [ngStyle]=\"{\n                width: config()?.colConfig[i]?.style?.width || config()?.colHeaderConfig[i]?.style?.width || ''\n              }\"\n              class=\"t-col-container\"\n            >\n              <div\n                class=\"t-col\"\n                [style]=\"config().colConfig[i]?.style\"\n                [ngStyle]=\"{\n                  width: '100%',\n                  cursor: config().colConfig[i].action ? 'pointer' : 'default',\n                  'justify-content': config().colConfig[i]?.style?.justifyContent\n                    ? config().colConfig[i]?.style?.justifyContent\n                    : config().colConfig[i].type === 'number'\n                    ? 'flex-end'\n                    : 'space-between'\n                }\"\n              >\n                <p\n                  *ngIf=\"config().colConfig[i].type !== 'custom'\"\n                  [ngStyle]=\"{\n                    color: config()?.colConfig[i]?.style?.color ? config()?.colConfig[i]?.style?.color : ''\n                  }\"\n                  class=\"t-col-text\"\n                >\n                  {{ col }}\n                </p>\n                <ng-template\n                  *ngIf=\"config().colConfig[i].type === 'custom'\"\n                  [customComponent]=\"config().colConfig[i].componentRef\"\n                  [data]=\"col\"\n                  customTableCell\n                ></ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header{height:100%;width:160px;display:flex;align-items:center;padding:0 16px}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center;letter-spacing:.2px;margin:0}\n"] }]
+    }], () => [{ type: i0.Renderer2 }], { table: [{
             type: ViewChild,
             args: ["table"]
         }] }); })();
@@ -968,34 +985,48 @@ function TableFilterComponent_div_12_Template(rf, ctx) { if (rf & 1) {
 } }
 class TableFilterComponent {
     constructor() {
-        this.filtersData = [];
-        this.containerStyles = {};
-        this.filtersApplied = new EventEmitter();
-        this.filtersMap = {};
-        this.searchValue = "";
+        this.filtersData = input([]);
+        this.containerStyles = input({});
+        this.filtersApplied = output();
+        this.filtersMap = signal({});
+        this.searchValue = signal("");
         this.mySort = (a, b) => {
-            if (a.name < b.name)
-                return -1;
-            else if (b.name < a.name)
-                return 1;
-            else
-                return 0;
+            return a.name.localeCompare(b.name);
         };
     }
     ngOnInit() {
-        this.filtersData.forEach(filter => {
-            this.filtersMap[filter.value] = filter;
-        });
+        const newFiltersMap = {};
+        const filters = this.filtersData() || [];
+        if (Array.isArray(filters) && filters.length > 0) {
+            filters.forEach(filter => {
+                if (filter && filter.value) {
+                    newFiltersMap[filter.value] = filter;
+                }
+            });
+        }
+        this.filtersMap.set(newFiltersMap);
     }
     resetFilters() {
-        this.filtersData.forEach(filter => {
-            this.filtersMap[filter.value].checked = false;
-        });
+        const currentFiltersMap = this.filtersMap();
+        const filters = this.filtersData() || [];
+        if (filters.length > 0) {
+            filters.forEach(filter => {
+                if (filter && filter.value && currentFiltersMap[filter.value]) {
+                    currentFiltersMap[filter.value].checked = false;
+                }
+            });
+            this.filtersMap.set({ ...currentFiltersMap });
+        }
         this.filtersApplied.emit([]);
     }
     applyFilters() {
-        let list = Object.values(this.filtersMap)
-            .filter((filter) => filter.checked)
+        const filtersMap = this.filtersMap();
+        if (!filtersMap || Object.keys(filtersMap).length === 0) {
+            this.filtersApplied.emit([]);
+            return;
+        }
+        let list = Object.values(filtersMap)
+            .filter((filter) => filter && filter.checked)
             .map((filter) => {
             return {
                 name: filter.name,
@@ -1004,24 +1035,34 @@ class TableFilterComponent {
         });
         this.filtersApplied.emit(list);
     }
-    updateSearchValue(event) {
-        this.searchValue = event.target.value;
-    }
     updateFilter(data) {
-        if (this.filtersMap[data.name]) {
-            this.filtersMap[data.name].checked = !this.filtersMap[data.name].checked;
+        const currentFiltersMap = this.filtersMap();
+        if (currentFiltersMap && data && data.name && currentFiltersMap[data.name]) {
+            currentFiltersMap[data.name].checked = !currentFiltersMap[data.name].checked;
+            this.filtersMap.set({ ...currentFiltersMap });
         }
     }
+    updateSearchValue(event) {
+        this.searchValue.set(event.target.value);
+    }
     getFiltersBasedOnSearchValue() {
-        let list = Object.values(this.filtersMap);
+        const filtersMap = this.filtersMap();
+        if (!filtersMap || Object.keys(filtersMap).length === 0) {
+            return [];
+        }
+        let list = Object.values(filtersMap);
         list = list.filter((filter) => {
-            return filter.name.match(new RegExp(this.searchValue, "i"));
+            return filter && filter.name && filter.name.match(new RegExp(this.searchValue(), "i"));
         });
         return list.sort(this.mySort);
     }
     getCheckedFilters() {
-        let list = Object.values(this.filtersMap);
-        list = list.filter((filter) => filter.checked).sort(this.mySort);
+        const filtersMap = this.filtersMap();
+        if (!filtersMap || Object.keys(filtersMap).length === 0) {
+            return [];
+        }
+        let list = Object.values(filtersMap);
+        list = list.filter((filter) => filter && filter.checked).sort(this.mySort);
         return list;
     }
     static { this.ɵfac = function TableFilterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableFilterComponent)(); }; }
@@ -1030,7 +1071,7 @@ class TableFilterComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-        } }, inputs: { filtersData: "filtersData", containerStyles: "containerStyles" }, outputs: { filtersApplied: "filtersApplied" }, decls: 19, vars: 9, consts: [["mainContainer", ""], ["id", "main-container", 3, "ngStyle"], ["id", "search-bar-container"], ["type", "text", "placeholder", "Search", 3, "keyup"], ["id", "search-icon", "width", "18", "height", "18", "viewBox", "0 0 18 18", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z", "fill", "#6A737D"], ["id", "filters-main-container"], [1, "filters-sub-container"], [4, "ngFor", "ngForOf"], ["class", "separator", 3, "ngStyle", 4, "ngIf"], ["id", "no-results-container", 4, "ngIf"], [1, "separator", 3, "ngStyle"], ["id", "buttons-container"], ["id", "reset-btn", 3, "click", "ngStyle"], ["id", "apply-btn", 3, "click"], [1, "filter"], [3, "valueChange", "checked", "name"], [1, "filter-text"], ["class", "filter", 4, "ngIf"], ["id", "no-results-container"]], template: function TableFilterComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { filtersData: [1, "filtersData"], containerStyles: [1, "containerStyles"] }, outputs: { filtersApplied: "filtersApplied" }, decls: 19, vars: 9, consts: [["mainContainer", ""], ["id", "main-container", 3, "ngStyle"], ["id", "search-bar-container"], ["type", "text", "placeholder", "Search", 3, "keyup"], ["id", "search-icon", "width", "18", "height", "18", "viewBox", "0 0 18 18", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z", "fill", "#6A737D"], ["id", "filters-main-container"], [1, "filters-sub-container"], [4, "ngFor", "ngForOf"], ["class", "separator", 3, "ngStyle", 4, "ngIf"], ["id", "no-results-container", 4, "ngIf"], [1, "separator", 3, "ngStyle"], ["id", "buttons-container"], ["id", "reset-btn", 3, "click", "ngStyle"], ["id", "apply-btn", 3, "click"], [1, "filter"], [3, "valueChange", "checked", "name"], [1, "filter-text"], ["class", "filter", 4, "ngIf"], ["id", "no-results-container"]], template: function TableFilterComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1, 0)(2, "div", 2)(3, "input", 3);
             i0.ɵɵlistener("keyup", function TableFilterComponent_Template_input_keyup_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateSearchValue($event)); });
@@ -1057,11 +1098,11 @@ class TableFilterComponent {
             i0.ɵɵtext(18, "Apply");
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", ctx.containerStyles);
+            i0.ɵɵproperty("ngStyle", ctx.containerStyles());
             i0.ɵɵadvance(8);
             i0.ɵɵproperty("ngForOf", ctx.getCheckedFilters());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.getCheckedFilters().length && ctx.getCheckedFilters().length < ctx.filtersData.length);
+            i0.ɵɵproperty("ngIf", ctx.getCheckedFilters().length && ctx.getCheckedFilters().length < ctx.filtersData().length);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.getFiltersBasedOnSearchValue());
             i0.ɵɵadvance();
@@ -1070,18 +1111,12 @@ class TableFilterComponent {
             i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(7, _c1$1));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(8, _c2$1));
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent], styles: ["#main-container[_ngcontent-%COMP%]{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px}[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px}[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container[_ngcontent-%COMP%]{width:100%;position:relative;margin-bottom:8px}input[_ngcontent-%COMP%]{width:100%;padding:12px 12px 12px 42px;border:solid 1px black;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33}input[_ngcontent-%COMP%]:focus{border:solid 1px #0937b2}#search-icon[_ngcontent-%COMP%]{position:absolute;top:15px;left:12px}.filters-sub-container[_ngcontent-%COMP%]{max-height:144px;overflow-y:auto}.filter[_ngcontent-%COMP%]{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text[_ngcontent-%COMP%]{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container[_ngcontent-%COMP%]{height:36px;display:flex;justify-content:center;align-items:center}.separator[_ngcontent-%COMP%]{border:1px solid #e0e0e0}#buttons-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}button[_ngcontent-%COMP%]{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn[_ngcontent-%COMP%]{background:#0937b2;color:#fff}#reset-btn[_ngcontent-%COMP%]{background:#fff;color:#0937b2}"] }); }
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent], styles: ["#main-container[_ngcontent-%COMP%]{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;min-height:200px;max-height:400px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;overflow:hidden;box-sizing:border-box}[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px}[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container[_ngcontent-%COMP%]{width:100%;position:relative;margin-bottom:8px;box-sizing:border-box}input[_ngcontent-%COMP%]{width:100%;max-width:100%;padding:12px 12px 12px 42px;border:solid 1px black;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33;box-sizing:border-box;overflow:hidden}input[_ngcontent-%COMP%]:focus{border:solid 1px #0937b2}#search-icon[_ngcontent-%COMP%]{position:absolute;top:15px;left:12px}.filters-sub-container[_ngcontent-%COMP%]{max-height:144px;overflow-y:auto}.filter[_ngcontent-%COMP%]{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text[_ngcontent-%COMP%]{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container[_ngcontent-%COMP%]{height:36px;display:flex;justify-content:center;align-items:center}.no-filters-container[_ngcontent-%COMP%]{height:60px;display:flex;justify-content:center;align-items:center;text-align:center;padding:16px}.separator[_ngcontent-%COMP%]{border:1px solid #e0e0e0}#buttons-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}button[_ngcontent-%COMP%]{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn[_ngcontent-%COMP%]{background:#0937b2;color:#fff}#reset-btn[_ngcontent-%COMP%]{background:#fff;color:#0937b2}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableFilterComponent, [{
         type: Component,
-        args: [{ selector: "mis-table-filter", template: "<div id=\"main-container\" #mainContainer [ngStyle]=\"containerStyles\">\n  <div id=\"search-bar-container\">\n    <input (keyup)=\"updateSearchValue($event)\" type=\"text\" placeholder=\"Search\" />\n    <svg id=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z\"\n        fill=\"#6A737D\"\n      />\n    </svg>\n  </div>\n  <div id=\"filters-main-container\">\n    <div class=\"filters-sub-container\">\n      <div *ngFor=\"let filter of getCheckedFilters()\">\n        <div class=\"filter\">\n          <mis-checkbox [checked]=\"true\" [name]=\"filter.value\" (valueChange)=\"updateFilter($event)\"></mis-checkbox>\n          <span class=\"filter-text\">{{ filter.name }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"separator\" [ngStyle]=\"{ 'margin': '16px 0px' }\" *ngIf=\"getCheckedFilters().length && getCheckedFilters().length < filtersData.length\"></div>\n    <div class=\"filters-sub-container\">\n      <div *ngFor=\"let filter of getFiltersBasedOnSearchValue()\">\n        <div class=\"filter\" *ngIf=\"!filter.checked\">\n          <mis-checkbox [checked]=\"false\" [name]=\"filter.value\" (valueChange)=\"updateFilter($event)\"></mis-checkbox>\n          <span class=\"filter-text\">{{ filter.name }}</span>\n        </div>\n      </div>\n      <div id=\"no-results-container\" *ngIf=\"getFiltersBasedOnSearchValue().length < 1\">\n        <span class=\"filter-text\">No matches found</span>\n      </div>\n    </div>\n    <div class=\"separator\" [ngStyle]=\"{ 'margin': '16px 0px' }\"></div>\n    <div id=\"buttons-container\">\n      <button id=\"reset-btn\" [ngStyle]=\"{ 'margin-right': '8px' }\" (click)=\"resetFilters()\">Reset</button>\n      <button id=\"apply-btn\" (click)=\"applyFilters()\">Apply</button>\n    </div>\n  </div>\n</div>\n", styles: ["#main-container{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container{width:100%;position:relative;margin-bottom:8px}input{width:100%;padding:12px 12px 12px 42px;border:solid 1px black;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33}input:focus{border:solid 1px #0937b2}#search-icon{position:absolute;top:15px;left:12px}.filters-sub-container{max-height:144px;overflow-y:auto}.filter{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}\n"] }]
-    }], () => [], { filtersData: [{
-            type: Input
-        }], containerStyles: [{
-            type: Input
-        }], filtersApplied: [{
-            type: Output
-        }], container: [{
+        args: [{ selector: "mis-table-filter", template: "<div id=\"main-container\" #mainContainer [ngStyle]=\"containerStyles()\">\n  <div id=\"search-bar-container\">\n    <input (keyup)=\"updateSearchValue($event)\" type=\"text\" placeholder=\"Search\" />\n    <svg id=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z\"\n        fill=\"#6A737D\"\n      />\n    </svg>\n  </div>\n  <div id=\"filters-main-container\">\n      <div class=\"filters-sub-container\">\n        <div *ngFor=\"let filter of getCheckedFilters()\">\n          <div class=\"filter\">\n            <mis-checkbox [checked]=\"true\" [name]=\"filter.value\" (valueChange)=\"updateFilter($event)\"></mis-checkbox>\n            <span class=\"filter-text\">{{ filter.name }}</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"separator\" [ngStyle]=\"{ 'margin': '16px 0px' }\" *ngIf=\"getCheckedFilters().length && getCheckedFilters().length < filtersData().length\"></div>\n      <div class=\"filters-sub-container\">\n        <div *ngFor=\"let filter of getFiltersBasedOnSearchValue()\">\n          <div class=\"filter\" *ngIf=\"!filter.checked\">\n            <mis-checkbox [checked]=\"false\" [name]=\"filter.value\" (valueChange)=\"updateFilter($event)\"></mis-checkbox>\n            <span class=\"filter-text\">{{ filter.name }}</span>\n          </div>\n        </div>\n        <div id=\"no-results-container\" *ngIf=\"getFiltersBasedOnSearchValue().length < 1\">\n          <span class=\"filter-text\">No matches found</span>\n        </div>\n      </div>\n    \n    <div class=\"separator\" [ngStyle]=\"{ 'margin': '16px 0px' }\"></div>\n    <div id=\"buttons-container\">\n      <button id=\"reset-btn\" [ngStyle]=\"{ 'margin-right': '8px' }\" (click)=\"resetFilters()\">Reset</button>\n      <button id=\"apply-btn\" (click)=\"applyFilters()\">Apply</button>\n    </div>\n  </div>\n</div>", styles: ["#main-container{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;min-height:200px;max-height:400px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:8px;overflow:hidden;box-sizing:border-box}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container{width:100%;position:relative;margin-bottom:8px;box-sizing:border-box}input{width:100%;max-width:100%;padding:12px 12px 12px 42px;border:solid 1px black;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33;box-sizing:border-box;overflow:hidden}input:focus{border:solid 1px #0937b2}#search-icon{position:absolute;top:15px;left:12px}.filters-sub-container{max-height:144px;overflow-y:auto}.filter{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.no-filters-container{height:60px;display:flex;justify-content:center;align-items:center;text-align:center;padding:16px}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}\n"] }]
+    }], () => [], { container: [{
             type: ViewChild,
             args: ["mainContainer"]
         }] }); })();
@@ -1165,22 +1200,26 @@ class SortIconsDirective {
         this.updateIconStyles();
     }
     handleMultiColumnSort(direction) {
-        const existingSortIndex = this.activeSorts().findIndex(sort => sort.column === this.column()?.data);
+        const activeSorts = this.activeSorts();
+        if (!Array.isArray(activeSorts)) {
+            return;
+        }
+        const existingSortIndex = activeSorts.findIndex(sort => sort.column === this.column()?.data);
         if (existingSortIndex !== -1) {
-            if (this.activeSorts()[existingSortIndex].direction !== direction) {
-                this.activeSorts()[existingSortIndex].direction = direction;
+            if (activeSorts[existingSortIndex].direction !== direction) {
+                activeSorts[existingSortIndex].direction = direction;
             }
             else {
                 return;
             }
         }
         else {
-            this.activeSorts().push({
+            activeSorts.push({
                 column: this.column()?.data || '',
                 direction
             });
         }
-        this.multiSortChange.emit([...this.activeSorts()]);
+        this.multiSortChange.emit([...activeSorts]);
         this.updateIconStyles();
     }
     updateIconStyles() {
@@ -1199,12 +1238,16 @@ class SortIconsDirective {
         }, 0);
     }
     updateMultiColumnIconStyles() {
-        const columnSort = this.activeSorts().find(sort => sort.column === this.column()?.data);
+        const activeSorts = this.activeSorts();
+        if (!Array.isArray(activeSorts)) {
+            return;
+        }
+        const columnSort = activeSorts.find(sort => sort.column === this.column()?.data);
         setTimeout(() => {
             this.renderer?.setStyle(this.upIcon, 'opacity', columnSort?.direction === 'ASC' ? '1' : '0.5');
             this.renderer?.setStyle(this.downIcon, 'opacity', columnSort?.direction === 'DESC' ? '1' : '0.5');
             if (this.sortOrderElement) {
-                const sortIndex = this.activeSorts().findIndex(sort => sort.column === this.column()?.data);
+                const sortIndex = activeSorts.findIndex(sort => sort.column === this.column()?.data);
                 if (sortIndex !== -1) {
                     this.renderer?.setProperty(this.sortOrderElement, 'textContent', (sortIndex + 1).toString());
                 }
@@ -1247,7 +1290,7 @@ function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.actionItems)("ngForTrackBy", ctx_r2.trackByAction);
+    i0.ɵɵproperty("ngForOf", ctx_r2.actionItems())("ngForTrackBy", ctx_r2.trackByAction);
 } }
 function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -1266,7 +1309,7 @@ function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r2.currentState)("disabled", ctx_r2.disable ? ctx_r2.disable(ctx_r2.currentState) : false);
+    i0.ɵɵproperty("checked", ctx_r2.currentState())("disabled", ctx_r2.disable() ? ctx_r2.disable()(ctx_r2.data()) : false);
 } }
 function ActionsCellComponent_div_4__svg_svg_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -1289,11 +1332,11 @@ function ActionsCellComponent_div_4_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", ctx_r2.currentState ? "Expand" : "Collapse");
+    i0.ɵɵproperty("title", ctx_r2.currentState() ? "Expand" : "Collapse");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.currentState);
+    i0.ɵɵproperty("ngIf", ctx_r2.currentState());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.currentState);
+    i0.ɵɵproperty("ngIf", !ctx_r2.currentState());
 } }
 function ActionsCellComponent_ng_template_5_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 36);
@@ -1402,40 +1445,45 @@ function ActionsCellComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.actionItems);
+    i0.ɵɵproperty("ngForOf", ctx_r2.actionItems());
 } }
 class ActionsCellComponent {
     constructor(overlay, viewContainerRef) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.actionClick = new EventEmitter();
-        this.isDropdownOpen = false;
-        this.actionItems = [];
-        this.actionType = "inline";
-        this.currentState = false;
-        this._style = {};
-        this.containerStyle = {};
+        this.cellData = input();
+        this.config = input();
+        this.actionClick = output();
+        this.isDropdownOpen = signal(false);
+        this.actionItems = signal([]);
+        this.actionType = signal("inline");
+        this.action = signal(undefined);
+        this.data = signal(undefined);
+        this.disable = signal(undefined);
+        this.currentState = signal(false);
+        this._style = signal({});
+        this.containerStyle = signal({});
         this.overlayRef = null;
     }
     ngOnInit() {
-        if (this.config) {
-            this.actionItems = this.config.actionItems;
-            this.actionType = this.config.actionType;
-            this._style = this.config.style;
-            this.action = this.config.action;
-            this.disable = this.config.disable;
+        if (this.config()) {
+            this.actionItems.set(this.config().actionItems);
+            this.actionType.set(this.config().actionType);
+            this._style.set(this.config().style);
+            this.action.set(this.config().action);
+            this.disable.set(this.config().disable);
             this.processStyle();
         }
-        if (this.cellData !== null) {
+        if (this.cellData() !== null) {
             const defaultStates = {
                 'checkbox': false,
                 'row-collapse': true,
             };
-            if (this.actionType in defaultStates) {
-                this.currentState = typeof this.cellData === 'boolean' ? this.cellData : defaultStates[this.actionType];
+            if (this.actionType() in defaultStates) {
+                this.currentState.set(typeof this.cellData() === 'boolean' ? this.cellData() : defaultStates[this.actionType()]);
             }
             else {
-                this.data = this.cellData;
+                this.data.set(this.cellData());
             }
         }
     }
@@ -1444,8 +1492,8 @@ class ActionsCellComponent {
     }
     processStyle() {
         // Remove width from style to avoid conflicts with table column width
-        const { width, ...restStyle } = this._style;
-        this.containerStyle = restStyle;
+        const { width, ...restStyle } = this._style();
+        this.containerStyle.set(restStyle);
     }
     onActionClick(item, event) {
         event.stopPropagation();
@@ -1454,7 +1502,7 @@ class ActionsCellComponent {
             return;
         // Execute action only if permitted
         if (item.action) {
-            item.action(this.data);
+            item.action(this.data());
         }
         this.actionClick.emit({ item });
     }
@@ -1467,13 +1515,13 @@ class ActionsCellComponent {
         return iconPath.toLowerCase().includes(".svg") || iconPath.toLowerCase().includes("assets/icons/");
     }
     onDocumentClick() {
-        if (this.isDropdownOpen) {
+        if (this.isDropdownOpen()) {
             this.closeDropdown();
         }
     }
     toggleDropdown(event) {
         event.stopPropagation();
-        if (this.isDropdownOpen) {
+        if (this.isDropdownOpen()) {
             this.closeDropdown();
         }
         else {
@@ -1484,7 +1532,7 @@ class ActionsCellComponent {
         if (!this.dropdownTrigger || !this.dropdownMenu)
             return;
         // Close all submenus when opening main menu
-        this.actionItems.forEach((item) => (item.showSubmenu = false));
+        this.actionItems().forEach((item) => (item.showSubmenu = false));
         const positions = this.getDropdownPositions();
         const overlayConfig = new OverlayConfig({
             hasBackdrop: true,
@@ -1502,14 +1550,14 @@ class ActionsCellComponent {
         this.overlayRef.backdropClick().subscribe(() => {
             this.closeDropdown();
         });
-        this.isDropdownOpen = true;
+        this.isDropdownOpen.set(true);
     }
     closeDropdown() {
         if (this.overlayRef) {
             this.overlayRef.dispose();
             this.overlayRef = null;
         }
-        this.isDropdownOpen = false;
+        this.isDropdownOpen.set(false);
     }
     getDropdownPositions() {
         // Use CDK Overlay's flexible positioning - it will automatically choose the best position
@@ -1532,7 +1580,7 @@ class ActionsCellComponent {
             // Toggle submenu
             item.showSubmenu = !item.showSubmenu;
             // Optionally close other submenus
-            this.actionItems.forEach((i) => {
+            this.actionItems().forEach((i) => {
                 if (i !== item)
                     i.showSubmenu = false;
             });
@@ -1540,21 +1588,23 @@ class ActionsCellComponent {
         else {
             // Handle action
             if (item.action)
-                item.action(this.data);
-            this.actionClick.emit({ item, data: this.data });
+                item.action(this.data());
+            this.actionClick.emit({ item, data: this.data() });
             this.closeDropdown(); // Only close if action was executed
         }
     }
     onClick(event) {
-        this.currentState = !this.currentState;
+        // Handle checkbox value - event might be {value: true} or just true
+        const newValue = event && typeof event === 'object' ? event.value : event;
+        this.currentState.set(newValue);
         this.actionClick.emit({
-            actionType: this.actionType,
-            value: this.currentState
+            actionType: this.actionType(),
+            value: newValue
         });
     }
     isDisabled(item) {
         if (typeof item.disable === "function") {
-            return item.disable(this.data);
+            return item.disable(this.data());
         }
         return false;
     }
@@ -1568,33 +1618,27 @@ class ActionsCellComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownTrigger = _t.first);
         } }, hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function ActionsCellComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { cellData: "cellData", config: "config" }, outputs: { actionClick: "actionClick" }, decls: 7, vars: 5, consts: [["dropdownMenu", ""], ["dropdownTrigger", ""], ["noChildren", ""], [1, "actions-cell-container", 3, "ngStyle"], ["class", "inline-actions", 4, "ngIf"], ["class", "dropdown-actions", 4, "ngIf"], ["class", "checkbox-actions", 4, "ngIf"], ["class", "collapse-toggle-action", 4, "ngIf"], [1, "inline-actions"], ["class", "action-item", 3, "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "action-item", 3, "click", "ngClass"], [1, "action-icon-svg", 3, "src", "alt"], [1, "dropdown-actions"], ["title", "More actions", 1, "dropdown-trigger", 3, "click"], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none"], ["cx", "10", "cy", "4", "r", "2", "fill", "#333"], ["cx", "10", "cy", "10", "r", "2", "fill", "#333"], ["cx", "10", "cy", "16", "r", "2", "fill", "#333"], [1, "checkbox-actions"], [3, "valueChange", "checked", "disabled"], [1, "collapse-toggle-action"], [1, "collapse-icon", 3, "click", "title"], ["width", "20", "height", "20", "viewBox", "0 0 24 24", 4, "ngIf"], ["width", "20", "height", "20", "viewBox", "0 0 24 24"], ["d", "M7 10l5 5 5-5", "stroke", "#0D1321", "stroke-width", "2", "fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round"], ["d", "M7 14l5-5 5 5", "stroke", "#0D1321", "stroke-width", "2", "fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "dropdown-menu-overlay"], ["class", "dropdown-menu-item", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "dropdown-menu-item", 3, "click", "ngClass"], [4, "ngIf", "ngIfElse"], ["class", "dropdown-icon", 4, "ngIf"], [1, "dropdown-label"], [1, "submenu-arrow"], ["width", "20", "height", "20", "viewBox", "0 0 24 24", "fill", "none"], ["d", "M9 6L15 12L9 18", "stroke", "#0D1321", "stroke-width", "2", "stroke-linecap", "round", "stroke-linejoin", "round"], ["class", "dropdown-submenu", 4, "ngIf"], [1, "dropdown-icon"], [3, "src"], [1, "dropdown-submenu"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { cellData: [1, "cellData"], config: [1, "config"] }, outputs: { actionClick: "actionClick" }, decls: 7, vars: 5, consts: [["dropdownMenu", ""], ["dropdownTrigger", ""], ["noChildren", ""], [1, "actions-cell-container", 3, "ngStyle"], ["class", "inline-actions", 4, "ngIf"], ["class", "dropdown-actions", 4, "ngIf"], ["class", "checkbox-actions", 4, "ngIf"], ["class", "collapse-toggle-action", 4, "ngIf"], [1, "inline-actions"], ["class", "action-item", 3, "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "action-item", 3, "click", "ngClass"], [1, "action-icon-svg", 3, "src", "alt"], [1, "dropdown-actions"], ["title", "More actions", 1, "dropdown-trigger", 3, "click"], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none"], ["cx", "10", "cy", "4", "r", "2", "fill", "#333"], ["cx", "10", "cy", "10", "r", "2", "fill", "#333"], ["cx", "10", "cy", "16", "r", "2", "fill", "#333"], [1, "checkbox-actions"], [3, "valueChange", "checked", "disabled"], [1, "collapse-toggle-action"], [1, "collapse-icon", 3, "click", "title"], ["width", "20", "height", "20", "viewBox", "0 0 24 24", 4, "ngIf"], ["width", "20", "height", "20", "viewBox", "0 0 24 24"], ["d", "M7 10l5 5 5-5", "stroke", "#0D1321", "stroke-width", "2", "fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round"], ["d", "M7 14l5-5 5 5", "stroke", "#0D1321", "stroke-width", "2", "fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "dropdown-menu-overlay"], ["class", "dropdown-menu-item", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "dropdown-menu-item", 3, "click", "ngClass"], [4, "ngIf", "ngIfElse"], ["class", "dropdown-icon", 4, "ngIf"], [1, "dropdown-label"], [1, "submenu-arrow"], ["width", "20", "height", "20", "viewBox", "0 0 24 24", "fill", "none"], ["d", "M9 6L15 12L9 18", "stroke", "#0D1321", "stroke-width", "2", "stroke-linecap", "round", "stroke-linejoin", "round"], ["class", "dropdown-submenu", 4, "ngIf"], [1, "dropdown-icon"], [3, "src"], [1, "dropdown-submenu"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3);
             i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 4)(2, ActionsCellComponent_div_2_Template, 7, 0, "div", 5)(3, ActionsCellComponent_div_3_Template, 2, 2, "div", 6);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, ActionsCellComponent_div_4_Template, 4, 3, "div", 7)(5, ActionsCellComponent_ng_template_5_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", ctx.containerStyle);
+            i0.ɵɵproperty("ngStyle", ctx.containerStyle());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.actionType === "inline");
+            i0.ɵɵproperty("ngIf", ctx.actionType() === "inline");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.actionType === "dropdown");
+            i0.ɵɵproperty("ngIf", ctx.actionType() === "dropdown");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.actionType === "checkbox");
+            i0.ɵɵproperty("ngIf", ctx.actionType() === "checkbox");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.actionType === "row-collapse");
+            i0.ɵɵproperty("ngIf", ctx.actionType() === "row-collapse");
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent], styles: [".actions-cell-container[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item[_ngcontent-%COMP%]:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item[_ngcontent-%COMP%]:active:not(.disabled){transform:scale(.95)}.action-item.disabled[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.action-item.disabled[_ngcontent-%COMP%]:hover{background-color:transparent;transform:none}.action-icon[_ngcontent-%COMP%]{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg[_ngcontent-%COMP%]{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg[_ngcontent-%COMP%]:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-actions[_ngcontent-%COMP%]{position:relative}.dropdown-menu-overlay[_ngcontent-%COMP%]{width:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1000}.dropdown-menu-item.disabled[_ngcontent-%COMP%]{color:#aaa;cursor:not-allowed}.dropdown-menu-item[_ngcontent-%COMP%]:hover:not(.disabled), .dropdown-menu-item.has-submenu[_ngcontent-%COMP%]:hover{background:#f5f5f5}.dropdown-menu-item[_ngcontent-%COMP%]{display:flex;align-items:center;padding:10px 18px;cursor:pointer;font-size:14px;position:relative}.dropdown-menu-item[_ngcontent-%COMP%]   .dropdown-label[_ngcontent-%COMP%]{flex:1;margin-left:8px}.dropdown-menu-item[_ngcontent-%COMP%]   .submenu-arrow[_ngcontent-%COMP%]{margin-left:auto;width:16px;height:16px}.dropdown-submenu[_ngcontent-%COMP%]{position:absolute;top:0;min-width:132px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1001}.dropdown-submenu[_ngcontent-%COMP%]{left:100%;margin-left:4px}.submenu-arrow[_ngcontent-%COMP%]{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.dropdown-menu-item.disabled[_ngcontent-%COMP%]{color:#181f33;filter:grayscale(100%) opacity(.3);cursor:not-allowed}.checkbox-actions[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.collapse-icon[_ngcontent-%COMP%]{cursor:pointer}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsCellComponent, [{
         type: Component,
-        args: [{ selector: "mis-actions-cell", template: "<div class=\"actions-cell-container\" [ngStyle]=\"containerStyle\">\n  <!-- Inline Actions -->\n  <div *ngIf=\"actionType === 'inline'\" class=\"inline-actions\">\n    <div\n      *ngFor=\"let item of actionItems; trackBy: trackByAction\"\n      class=\"action-item\"\n      [ngClass]=\"{ disabled: isDisabled(item) }\"\n      (click)=\"onActionClick(item, $event)\"\n    >\n      <img [src]=\"item.icon\" [alt]=\"item.label\" class=\"action-icon-svg\" />\n    </div>\n  </div>\n\n  <!-- Dropdown Actions -->\n  <div *ngIf=\"actionType === 'dropdown'\" class=\"dropdown-actions\">\n    <div #dropdownTrigger class=\"dropdown-trigger\" (click)=\"toggleDropdown($event)\" title=\"More actions\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#333\" />\n        <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#333\" />\n        <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#333\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Checkbox Actions -->\n  <div *ngIf=\"actionType === 'checkbox'\" class=\"checkbox-actions\">\n    <mis-checkbox [checked]=\"currentState\" (valueChange)=\"onClick($event)\" [disabled]=\"disable ? disable(currentState) : false\"> </mis-checkbox>\n  </div>\n</div>\n\n<!-- Collapse / Expand Actions -->\n<div *ngIf=\"actionType === 'row-collapse'\" class=\"collapse-toggle-action\">\n  <div class=\"collapse-icon\" (click)=\"onClick($event)\" [title]=\"currentState ? 'Expand' : 'Collapse'\">\n    <svg *ngIf=\"currentState\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\">\n      <path d=\"M7 10l5 5 5-5\" stroke=\"#0D1321\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n    <svg *ngIf=\"!currentState\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\">\n      <path d=\"M7 14l5-5 5 5\" stroke=\"#0D1321\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n  </div>\n</div>\n\n<!-- CDK Overlay Template for Dropdown Menu -->\n<ng-template #dropdownMenu>\n  <div class=\"dropdown-menu-overlay\">\n    <div\n      class=\"dropdown-menu-item\"\n      *ngFor=\"let item of actionItems\"\n      (click)=\"onDropdownItemClick(item, $event)\"\n      [ngClass]=\"{ disabled: isDisabled(item) }\"\n    >\n      <ng-container *ngIf=\"item.children?.length; else noChildren\">\n        <span class=\"dropdown-icon\" *ngIf=\"item.icon\">\n          <img [src]=\"item.icon\" />\n        </span>\n        <span class=\"dropdown-label\">{{ item.label }}</span>\n        <span class=\"submenu-arrow\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"#0D1321\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n\n        <!-- DYNAMIC SUBMENU -->\n        <div class=\"dropdown-submenu\" *ngIf=\"item.showSubmenu\">\n          <div\n            class=\"dropdown-menu-item\"\n            *ngFor=\"let child of item.children\"\n            [ngClass]=\"{ disabled: isDisabled(child) }\"\n            (click)=\"onDropdownItemClick(child, $event)\"\n          >\n            <span class=\"dropdown-icon\" *ngIf=\"child.icon\">\n              <img [src]=\"child.icon\" />\n            </span>\n            <span class=\"dropdown-label\">{{ child.label }}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #noChildren>\n        <span class=\"dropdown-icon\" *ngIf=\"item.icon\">\n          <img [src]=\"item.icon\" />\n        </span>\n        <span class=\"dropdown-label\">{{ item.label }}</span>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", styles: [".actions-cell-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item:active:not(.disabled){transform:scale(.95)}.action-item.disabled{opacity:.5;cursor:not-allowed}.action-item.disabled:hover{background-color:transparent;transform:none}.action-icon{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-actions{position:relative}.dropdown-menu-overlay{width:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1000}.dropdown-menu-item.disabled{color:#aaa;cursor:not-allowed}.dropdown-menu-item:hover:not(.disabled),.dropdown-menu-item.has-submenu:hover{background:#f5f5f5}.dropdown-menu-item{display:flex;align-items:center;padding:10px 18px;cursor:pointer;font-size:14px;position:relative}.dropdown-menu-item .dropdown-label{flex:1;margin-left:8px}.dropdown-menu-item .submenu-arrow{margin-left:auto;width:16px;height:16px}.dropdown-submenu{position:absolute;top:0;min-width:132px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1001}.dropdown-submenu{left:100%;margin-left:4px}.submenu-arrow{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon{display:flex;justify-content:center;align-items:center}.dropdown-menu-item.disabled{color:#181f33;filter:grayscale(100%) opacity(.3);cursor:not-allowed}.checkbox-actions{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.collapse-icon{cursor:pointer}\n"] }]
-    }], () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }], { cellData: [{
-            type: Input
-        }], config: [{
-            type: Input
-        }], actionClick: [{
-            type: Output
-        }], dropdownMenu: [{
+        args: [{ selector: "mis-actions-cell", template: "<div class=\"actions-cell-container\" [ngStyle]=\"containerStyle()\">\n  <!-- Inline Actions -->\n  <div *ngIf=\"actionType() === 'inline'\" class=\"inline-actions\">\n    <div\n      *ngFor=\"let item of actionItems(); trackBy: trackByAction\"\n      class=\"action-item\"\n      [ngClass]=\"{ disabled: isDisabled(item) }\"\n      (click)=\"onActionClick(item, $event)\"\n    >\n      <img [src]=\"item.icon\" [alt]=\"item.label\" class=\"action-icon-svg\" />\n    </div>\n  </div>\n\n  <!-- Dropdown Actions -->\n  <div *ngIf=\"actionType() === 'dropdown'\" class=\"dropdown-actions\">\n    <div #dropdownTrigger class=\"dropdown-trigger\" (click)=\"toggleDropdown($event)\" title=\"More actions\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <circle cx=\"10\" cy=\"4\" r=\"2\" fill=\"#333\" />\n        <circle cx=\"10\" cy=\"10\" r=\"2\" fill=\"#333\" />\n        <circle cx=\"10\" cy=\"16\" r=\"2\" fill=\"#333\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Checkbox Actions -->\n  <div *ngIf=\"actionType() === 'checkbox'\" class=\"checkbox-actions\">\n    <mis-checkbox [checked]=\"currentState()\" (valueChange)=\"onClick($event)\" [disabled]=\"disable() ? disable()(data()) : false\"> </mis-checkbox>\n  </div>\n</div>\n\n<!-- Collapse / Expand Actions -->\n<div *ngIf=\"actionType() === 'row-collapse'\" class=\"collapse-toggle-action\">\n  <div class=\"collapse-icon\" (click)=\"onClick($event)\" [title]=\"currentState() ? 'Expand' : 'Collapse'\">\n    <svg *ngIf=\"currentState()\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\">\n      <path d=\"M7 10l5 5 5-5\" stroke=\"#0D1321\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n    <svg *ngIf=\"!currentState()\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\">\n      <path d=\"M7 14l5-5 5 5\" stroke=\"#0D1321\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n  </div>\n</div>\n\n<!-- CDK Overlay Template for Dropdown Menu -->\n<ng-template #dropdownMenu>\n  <div class=\"dropdown-menu-overlay\">\n    <div\n      class=\"dropdown-menu-item\"\n      *ngFor=\"let item of actionItems()\"\n      (click)=\"onDropdownItemClick(item, $event)\"\n      [ngClass]=\"{ disabled: isDisabled(item) }\"\n    >\n      <ng-container *ngIf=\"item.children?.length; else noChildren\">\n        <span class=\"dropdown-icon\" *ngIf=\"item.icon\">\n          <img [src]=\"item.icon\" />\n        </span>\n        <span class=\"dropdown-label\">{{ item.label }}</span>\n        <span class=\"submenu-arrow\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"#0D1321\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n\n        <!-- DYNAMIC SUBMENU -->\n        <div class=\"dropdown-submenu\" *ngIf=\"item.showSubmenu\">\n          <div\n            class=\"dropdown-menu-item\"\n            *ngFor=\"let child of item.children\"\n            [ngClass]=\"{ disabled: isDisabled(child) }\"\n            (click)=\"onDropdownItemClick(child, $event)\"\n          >\n            <span class=\"dropdown-icon\" *ngIf=\"child.icon\">\n              <img [src]=\"child.icon\" />\n            </span>\n            <span class=\"dropdown-label\">{{ child.label }}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #noChildren>\n        <span class=\"dropdown-icon\" *ngIf=\"item.icon\">\n          <img [src]=\"item.icon\" />\n        </span>\n        <span class=\"dropdown-label\">{{ item.label }}</span>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", styles: [".actions-cell-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;box-sizing:border-box}.inline-actions{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;flex-wrap:nowrap;padding:4px 0;flex-direction:row}.action-item{display:flex;align-items:center;justify-content:center;height:20px;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:transparent;border:none;outline:none;flex-shrink:0;min-height:20px}.action-item:hover:not(.disabled){background-color:#0000000a;transform:scale(1.05)}.action-item:active:not(.disabled){transform:scale(.95)}.action-item.disabled{opacity:.5;cursor:not-allowed}.action-item.disabled:hover{background-color:transparent;transform:none}.action-icon{font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-icon-svg{width:18px;height:18px;object-fit:contain;filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(.6) contrast(1);flex-shrink:0}.action-icon-svg:hover{filter:brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1)}.dropdown-trigger{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-actions{position:relative}.dropdown-menu-overlay{width:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1000}.dropdown-menu-item.disabled{color:#aaa;cursor:not-allowed}.dropdown-menu-item:hover:not(.disabled),.dropdown-menu-item.has-submenu:hover{background:#f5f5f5}.dropdown-menu-item{display:flex;align-items:center;padding:10px 18px;cursor:pointer;font-size:14px;position:relative}.dropdown-menu-item .dropdown-label{flex:1;margin-left:8px}.dropdown-menu-item .submenu-arrow{margin-left:auto;width:16px;height:16px}.dropdown-submenu{position:absolute;top:0;min-width:132px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;padding:8px 0;z-index:1001}.dropdown-submenu{left:100%;margin-left:4px}.submenu-arrow{display:flex;align-items:center;margin-left:auto;z-index:9999}.dropdown-icon{display:flex;justify-content:center;align-items:center}.dropdown-menu-item.disabled{color:#181f33;filter:grayscale(100%) opacity(.3);cursor:not-allowed}.checkbox-actions{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.collapse-icon{cursor:pointer}\n"] }]
+    }], () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }], { dropdownMenu: [{
             type: ViewChild,
             args: ['dropdownMenu', { static: false }]
         }], dropdownTrigger: [{