mis-crystal-design-system 18.0.19 → 18.0.20

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

@@ -6,10 +6,13 @@ import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$1 from 'mis-crystal-design-system/checkbox';
 import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
 
 const _c0$3 = ["filter"];
-const _c1$2 = ["table"];
-const _c2$2 = ["colHeaderRef"];
+const _c1$3 = ["table"];
+const _c2$3 = ["colHeaderRef"];
 const _c3$1 = (a0, a1, a2) => ({ height: a0, width: a1, "overflow-x": a2 });
 const _c4$1 = (a0, a1, a2) => ({ "no-scrollbar": a0, scrollbar: a1, "scroll-horizontally": a2 });
 const _c5$1 = (a0, a1, a2) => ({ width: a0, cursor: a1, "justify-content": a2 });
@@ -576,8 +579,8 @@ class TableComponent {
     static { this.ɵfac = function TableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableComponent, selectors: [["mis-table"]], viewQuery: function TableComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$3, 5);
-            i0.ɵɵviewQuery(_c1$2, 5);
-            i0.ɵɵviewQuery(_c2$2, 5);
+            i0.ɵɵviewQuery(_c1$3, 5);
+            i0.ɵɵviewQuery(_c2$3, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
@@ -689,8 +692,8 @@ class CustomTableCellDirective {
         }] }); })();
 
 const _c0$2 = ["table"];
-const _c1$1 = (a0, a1) => ({ height: a0, width: a1 });
-const _c2$1 = (a0, a1, a2) => ({ height: a0, "border-top": a1, "border-bottom": a2 });
+const _c1$2 = (a0, a1) => ({ height: a0, width: a1 });
+const _c2$2 = (a0, a1, a2) => ({ height: a0, "border-top": a1, "border-bottom": a2 });
 const _c3 = (a0, a1, a2) => ({ width: a0, cursor: a1, "justify-content": a2 });
 const _c4 = a0 => ({ backgroundColor: a0 });
 const _c5 = a0 => ({ width: a0 });
@@ -733,7 +736,7 @@ function SubTableComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(2, _c2$1, ctx_r2.getColHeadersRowHeight(), ctx_r2.getColHeadersRowBorderTop(), ctx_r2.getColHeadersRowBorderBottom()));
+    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);
 } }
@@ -852,7 +855,7 @@ class SubTableComponent {
             i0.ɵɵtemplate(6, SubTableComponent_div_6_Template, 3, 4, "div", 5);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(9, _c1$1, ctx.getContainerHeight(), ctx.getContainerWidth()));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(9, _c1$2, ctx.getContainerHeight(), ctx.getContainerWidth()));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", !!ctx.config.showHeader);
             i0.ɵɵadvance(2);
@@ -876,8 +879,8 @@ class SubTableComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubTableComponent, { className: "SubTableComponent" }); })();
 
 const _c0$1 = ["mainContainer"];
-const _c1 = () => ({ "margin": "16px 0px" });
-const _c2 = () => ({ "margin-right": "8px" });
+const _c1$1 = () => ({ "margin": "16px 0px" });
+const _c2$1 = () => ({ "margin-right": "8px" });
 function TableFilterComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div")(1, "div", 15)(2, "mis-checkbox", 16);
@@ -896,7 +899,7 @@ function TableFilterComponent_div_8_Template(rf, ctx) { if (rf & 1) {
 function TableFilterComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
 } if (rf & 2) {
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c1));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c1$1));
 } }
 function TableFilterComponent_div_11_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -1028,9 +1031,9 @@ class TableFilterComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.getFiltersBasedOnSearchValue().length < 1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(7, _c1));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(7, _c1$1));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(8, _c2));
+            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}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableFilterComponent, [{
@@ -1185,177 +1188,162 @@ class SortIconsDirective {
             }]
     }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], null); })();
 
-const _c0 = a0 => ({ disabled: a0 });
+const _c0 = ["dropdownMenu"];
+const _c1 = ["dropdownTrigger"];
+const _c2 = a0 => ({ disabled: a0 });
 function ActionsCellComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵlistener("click", function ActionsCellComponent_div_1_div_1_Template_div_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onActionClick(item_r2, $event)); });
-    i0.ɵɵelement(1, "img", 8);
+    i0.ɵɵelement(1, "img", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(item_r2)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r2.isDisabled(item_r2)));
     i0.ɵɵadvance();
     i0.ɵɵproperty("src", item_r2.icon, i0.ɵɵsanitizeUrl)("alt", item_r2.label);
 } }
 function ActionsCellComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 5, "div", 6);
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵtemplate(1, ActionsCellComponent_div_1_div_1_Template, 2, 5, "div", 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r2.actionItems)("ngForTrackBy", ctx_r2.trackByAction);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵelement(1, "img", 27);
+function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12, 1);
+    i0.ɵɵlistener("click", function ActionsCellComponent_div_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleDropdown($event)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(3, "svg", 13);
+    i0.ɵɵelement(4, "circle", 14)(5, "circle", 15)(6, "circle", 16);
+    i0.ɵɵelementEnd()()();
+} }
+function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "mis-checkbox", 18);
+    i0.ɵɵlistener("valueChange", function ActionsCellComponent_div_3_Template_mis_checkbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCheckboxChange($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r2.isChecked)("disabled", ctx_r2.disable ? ctx_r2.disable(ctx_r2.data) : false);
+} }
+function ActionsCellComponent_ng_template_4_div_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵelement(1, "img", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    const item_r7 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", item_r7.icon, i0.ɵɵsanitizeUrl);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵelement(1, "img", 27);
+function ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵelement(1, "img", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const child_r8 = i0.ɵɵnextContext().$implicit;
+    const child_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", child_r8.icon, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", child_r9.icon, i0.ɵɵsanitizeUrl);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template_div_click_0_listener($event) { const child_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(child_r8, $event)); });
-    i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span", 20);
-    i0.ɵɵelementStart(2, "span", 21);
+function ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("click", function ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_div_1_Template_div_click_0_listener($event) { const child_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(child_r9, $event)); });
+    i0.ɵɵtemplate(1, ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_div_1_span_1_Template, 2, 1, "span", 23);
+    i0.ɵɵelementStart(2, "span", 24);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const child_r8 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(child_r8)));
+    const child_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r2.isDisabled(child_r9)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", child_r8.icon);
+    i0.ɵɵproperty("ngIf", child_r9.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(child_r8.label);
+    i0.ɵɵtextInterpolate(child_r9.label);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div", 17);
+function ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtemplate(1, ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_div_1_Template, 4, 5, "div", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵproperty("ngClass", item_r6.submenuAlign);
+    const item_r7 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("ngClass", item_r7.submenuAlign);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", item_r6.children);
+    i0.ɵɵproperty("ngForOf", item_r7.children);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ActionsCellComponent_ng_template_4_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_span_1_Template, 2, 1, "span", 20);
-    i0.ɵɵelementStart(2, "span", 21);
+    i0.ɵɵtemplate(1, ActionsCellComponent_ng_template_4_div_1_ng_container_1_span_1_Template, 2, 1, "span", 23);
+    i0.ɵɵelementStart(2, "span", 24);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 22);
+    i0.ɵɵelementStart(4, "span", 25);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 23);
-    i0.ɵɵelement(6, "path", 24);
+    i0.ɵɵelementStart(5, "svg", 26);
+    i0.ɵɵelement(6, "path", 27);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_div_7_Template, 2, 2, "div", 25);
+    i0.ɵɵtemplate(7, ActionsCellComponent_ng_template_4_div_1_ng_container_1_div_7_Template, 2, 2, "div", 28);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext().$implicit;
+    const item_r7 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r6.icon);
+    i0.ɵɵproperty("ngIf", item_r7.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r6.label);
+    i0.ɵɵtextInterpolate(item_r7.label);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", item_r6.showSubmenu);
+    i0.ɵɵproperty("ngIf", item_r7.showSubmenu);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵelement(1, "img", 27);
+function ActionsCellComponent_ng_template_4_div_1_ng_template_2_span_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵelement(1, "img", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    const item_r7 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", item_r6.icon, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", item_r7.icon, i0.ɵɵsanitizeUrl);
 } }
-function ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_span_0_Template, 2, 1, "span", 20);
-    i0.ɵɵelementStart(1, "span", 21);
+function ActionsCellComponent_ng_template_4_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ActionsCellComponent_ng_template_4_div_1_ng_template_2_span_0_Template, 2, 1, "span", 23);
+    i0.ɵɵelementStart(1, "span", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngIf", item_r6.icon);
+    const item_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngIf", item_r7.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r6.label);
-} }
-function ActionsCellComponent_div_2_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵlistener("click", function ActionsCellComponent_div_2_div_6_div_1_Template_div_click_0_listener($event) { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(item_r6, $event)); });
-    i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_ng_container_1_Template, 8, 3, "ng-container", 19)(2, ActionsCellComponent_div_2_div_6_div_1_ng_template_2_Template, 3, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r6 = ctx.$implicit;
-    const noChildren_r9 = i0.ɵɵreference(3);
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.isDisabled(item_r6)));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r6.children == null ? null : item_r6.children.length)("ngIfElse", noChildren_r9);
+    i0.ɵɵtextInterpolate(item_r7.label);
 } }
-function ActionsCellComponent_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵtemplate(1, ActionsCellComponent_div_2_div_6_div_1_Template, 4, 5, "div", 17);
+function ActionsCellComponent_ng_template_4_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("click", function ActionsCellComponent_ng_template_4_div_1_Template_div_click_0_listener($event) { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(item_r7, $event)); });
+    i0.ɵɵtemplate(1, ActionsCellComponent_ng_template_4_div_1_ng_container_1_Template, 8, 3, "ng-container", 22)(2, ActionsCellComponent_ng_template_4_div_1_ng_template_2_Template, 3, 2, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    const item_r7 = ctx.$implicit;
+    const noChildren_r10 = i0.ɵɵreference(3);
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.menuAlign);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r2.isDisabled(item_r7)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.actionItems);
+    i0.ɵɵproperty("ngIf", item_r7.children == null ? null : item_r7.children.length)("ngIfElse", noChildren_r10);
 } }
-function ActionsCellComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
-    i0.ɵɵlistener("click", function ActionsCellComponent_div_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleDropdown($event)); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 11);
-    i0.ɵɵelement(3, "circle", 12)(4, "circle", 13)(5, "circle", 14);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, ActionsCellComponent_div_2_div_6_Template, 2, 2, "div", 15);
+function ActionsCellComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵtemplate(1, ActionsCellComponent_ng_template_4_div_1_Template, 4, 5, "div", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngIf", ctx_r2.isDropdownOpen);
-} }
-function ActionsCellComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "mis-checkbox", 30);
-    i0.ɵɵlistener("valueChange", function ActionsCellComponent_div_3_Template_mis_checkbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCheckboxChange($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r2.menuAlign);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r2.isChecked)("disabled", ctx_r2.disable ? ctx_r2.disable(ctx_r2.data) : false);
+    i0.ɵɵproperty("ngForOf", ctx_r2.actionItems);
 } }
 class ActionsCellComponent {
-    constructor() {
-        this.isChecked = false;
-        this.actionClick = new EventEmitter();
-        this.isDropdownOpen = false;
-        this.actionItems = [];
-        this.actionType = "inline";
-        this.submenuAlign = "right";
-        this.menuAlign = "left";
-        this._style = {};
-        this.containerStyle = {};
-    }
     set rowData(value) {
         if (this.actionType === 'checkbox') {
             // For checkbox, keep the rowData structure
@@ -1378,7 +1366,24 @@ class ActionsCellComponent {
         this.disable = config.disable;
         this.processStyle();
     }
+    constructor(overlay, viewContainerRef) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.isChecked = false;
+        this.actionClick = new EventEmitter();
+        this.isDropdownOpen = false;
+        this.actionItems = [];
+        this.actionType = "inline";
+        this.submenuAlign = "right";
+        this.menuAlign = "left";
+        this._style = {};
+        this.containerStyle = {};
+        this.overlayRef = null;
+    }
     ngOnInit() { }
+    ngOnDestroy() {
+        this.closeDropdown();
+    }
     processStyle() {
         // Remove width from style to avoid conflicts with table column width
         const { width, ...restStyle } = this._style;
@@ -1405,14 +1410,60 @@ class ActionsCellComponent {
     }
     onDocumentClick() {
         if (this.isDropdownOpen) {
-            this.isDropdownOpen = false;
+            this.closeDropdown();
         }
     }
     toggleDropdown(event) {
         event.stopPropagation();
-        this.isDropdownOpen = !this.isDropdownOpen;
-        // Close all submenus when opening/closing main menu
+        if (this.isDropdownOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (!this.dropdownTrigger || !this.dropdownMenu)
+            return;
+        // Close all submenus when opening main menu
         this.actionItems.forEach((item) => (item.showSubmenu = false));
+        const positions = this.getDropdownPositions();
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.dropdownTrigger)
+                .withPositions(positions)
+                .withPush(true),
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+        this.overlayRef = this.overlay.create(overlayConfig);
+        const portal = new TemplatePortal(this.dropdownMenu, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.closeDropdown();
+        });
+        this.isDropdownOpen = true;
+    }
+    closeDropdown() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.isDropdownOpen = false;
+    }
+    getDropdownPositions() {
+        const positions = [];
+        if (this.menuAlign === 'left') {
+            // Menu opens to the left of trigger
+            positions.push(new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }, 0, 4), new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }, 0, -4));
+        }
+        else {
+            // Menu opens to the right of trigger
+            positions.push(new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }, 0, 4), new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }, 0, -4));
+        }
+        return positions;
     }
     onDropdownItemClick(item, event) {
         event.stopPropagation();
@@ -1432,7 +1483,7 @@ class ActionsCellComponent {
             if (item.action)
                 item.action(this.data);
             this.actionClick.emit({ item, data: this.data });
-            this.isDropdownOpen = false; // Only close if action was executed
+            this.closeDropdown(); // Only close if action was executed
         }
     }
     onCheckboxChange(event) {
@@ -1448,13 +1499,21 @@ class ActionsCellComponent {
         }
         return false;
     }
-    static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], hostBindings: function ActionsCellComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = function ActionsCellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsCellComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCellComponent, selectors: [["mis-actions-cell"]], viewQuery: function ActionsCellComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownMenu = _t.first);
+            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: { rowData: "rowData", isChecked: "isChecked", config: "config" }, outputs: { actionClick: "actionClick" }, decls: 4, vars: 4, consts: [["noChildren", ""], [1, "actions-cell-container", 3, "ngStyle"], ["class", "inline-actions", 4, "ngIf"], ["class", "dropdown-actions", 4, "ngIf"], ["class", "checkbox-actions", 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"], ["class", "dropdown-menu", 3, "ngClass", 4, "ngIf"], [1, "dropdown-menu", 3, "ngClass"], ["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", 3, "ngClass", 4, "ngIf"], [1, "dropdown-icon"], [3, "src"], [1, "dropdown-submenu", 3, "ngClass"], [1, "checkbox-actions"], [3, "valueChange", "checked", "disabled"]], template: function ActionsCellComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, ActionsCellComponent_div_1_Template, 2, 2, "div", 2)(2, ActionsCellComponent_div_2_Template, 7, 1, "div", 3)(3, ActionsCellComponent_div_3_Template, 2, 2, "div", 4);
+        } }, inputs: { rowData: "rowData", isChecked: "isChecked", config: "config" }, outputs: { actionClick: "actionClick" }, decls: 6, vars: 4, 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"], [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, "dropdown-menu-overlay", 3, "ngClass"], ["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", 3, "ngClass", 4, "ngIf"], [1, "dropdown-icon"], [3, "src"], [1, "dropdown-submenu", 3, "ngClass"]], 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_ng_template_4_Template, 2, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵproperty("ngStyle", ctx.containerStyle);
             i0.ɵɵadvance();
@@ -1463,12 +1522,12 @@ class ActionsCellComponent {
             i0.ɵɵproperty("ngIf", ctx.actionType === "dropdown");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.actionType === "checkbox");
-        } }, 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}.dropdown-actions[_ngcontent-%COMP%]{position:relative}.dropdown-trigger[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-menu[_ngcontent-%COMP%]{position:absolute;top:100%;width:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.dropdown-menu.left[_ngcontent-%COMP%]{right:0!important;left:auto!important}.dropdown-menu.right[_ngcontent-%COMP%]{left:0!important;right:auto!important}.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}.submenu-container[_ngcontent-%COMP%]{position:absolute;top:0;left:100%;margin-left:4px;background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;z-index:1000;white-space:nowrap}.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.right[_ngcontent-%COMP%]{left:100%;margin-left:4px}.dropdown-submenu.left[_ngcontent-%COMP%]{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute;margin-right: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}"] }); }
+        } }, 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.right[_ngcontent-%COMP%]{left:100%;margin-left:4px}.dropdown-submenu.left[_ngcontent-%COMP%]{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute;margin-right: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%}"] }); }
 }
 (() => { (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 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\n    <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\" [ngClass]=\"menuAlign\">\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\" [ngClass]=\"item.submenuAlign\" *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  </div>\n\n  <!-- Checkbox Actions -->\n  <div *ngIf=\"actionType === 'checkbox'\" class=\"checkbox-actions\">\n    <mis-checkbox [checked]=\"isChecked\" (valueChange)=\"onCheckboxChange($event)\"  [disabled]=\"disable ? disable(data) : false\"\n    > </mis-checkbox>\n  </div>\n</div>\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}.dropdown-actions{position:relative}.dropdown-trigger{cursor:pointer;display:flex;align-items:center;justify-content:center}.dropdown-menu{position:absolute;top:100%;width:232px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000001f;z-index:1000;padding:8px 0}.dropdown-menu.left{right:0!important;left:auto!important}.dropdown-menu.right{left:0!important;right:auto!important}.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}.submenu-container{position:absolute;top:0;left:100%;margin-left:4px;background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;z-index:1000;white-space:nowrap}.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.right{left:100%;margin-left:4px}.dropdown-submenu.left{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute;margin-right: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}\n"] }]
-    }], null, { rowData: [{
+        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]=\"isChecked\" (valueChange)=\"onCheckboxChange($event)\"  [disabled]=\"disable ? disable(data) : false\"\n    > </mis-checkbox>\n  </div>\n</div>\n\n<!-- CDK Overlay Template for Dropdown Menu -->\n<ng-template #dropdownMenu>\n  <div class=\"dropdown-menu-overlay\" [ngClass]=\"menuAlign\">\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\" [ngClass]=\"item.submenuAlign\" *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.right{left:100%;margin-left:4px}.dropdown-submenu.left{left:auto;right:100%;background-color:#fff;border:1px solid #ddd;z-index:9999;position:absolute;margin-right: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%}\n"] }]
+    }], () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }], { rowData: [{
             type: Input
         }], isChecked: [{
             type: Input
@@ -1476,6 +1535,12 @@ class ActionsCellComponent {
             type: Input
         }], actionClick: [{
             type: Output
+        }], dropdownMenu: [{
+            type: ViewChild,
+            args: ['dropdownMenu', { static: false }]
+        }], dropdownTrigger: [{
+            type: ViewChild,
+            args: ['dropdownTrigger', { static: false }]
         }], onDocumentClick: [{
             type: HostListener,
             args: ["document:click"]
@@ -1488,7 +1553,7 @@ class TableModule {
     }
     static { this.ɵfac = function TableModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableModule)(); }; }
     static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: TableModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, CheckboxModule, ScrollingModule] }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableModule, [{
         type: NgModule,
@@ -1501,7 +1566,7 @@ class TableModule {
                     SortIconsDirective,
                     ActionsCellComponent
                 ],
-                imports: [CommonModule, CheckboxModule, ScrollingModule],
+                imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule],
                 exports: [
                     TableComponent,
                     SubTableComponent,
@@ -1517,7 +1582,7 @@ class TableModule {
         TableFilterComponent,
         CustomTableCellDirective,
         SortIconsDirective,
-        ActionsCellComponent], imports: [CommonModule, CheckboxModule, ScrollingModule], exports: [TableComponent,
+        ActionsCellComponent], imports: [CommonModule, CheckboxModule, ScrollingModule, OverlayModule, PortalModule], exports: [TableComponent,
         SubTableComponent,
         TableFilterComponent,
         CustomTableCellDirective,