mis-crystal-design-system 18.0.5 → 18.0.7-test

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

@@ -0,0 +1,913 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, Component, ViewChild, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+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';
+
+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;
+    }
+    createComponent() {
+        if (this.component) {
+            const cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(this.component);
+            this.viewContainerRef.clear();
+            this.ref = this.viewContainerRef.createComponent(cmpFactoryResolver);
+            this.setData();
+        }
+    }
+    setData() {
+        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" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomTableCellDirective, [{
+        type: Directive,
+        args: [{
+                selector: "[customTableCell]"
+            }]
+    }], () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }], { customComponent: [{
+            type: Input
+        }], data: [{
+            type: Input
+        }] }); })();
+
+const _c0$2 = ["table"];
+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$1 = (a0, a1, a2) => ({ width: a0, cursor: a1, "justify-content": a2 });
+const _c4$1 = a0 => ({ backgroundColor: a0 });
+const _c5$1 = a0 => ({ width: a0 });
+const _c6$1 = (a0, a1) => ({ width: "100%", cursor: a0, "justify-content": a1 });
+const _c7$1 = a0 => ({ color: a0 });
+function SubTableComponent_div_3_div_1_p_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", (colHeader_r2 == null ? null : colHeader_r2.data) || " ", " ");
+} }
+function SubTableComponent_div_3_div_1_2_ng_template_0_Template(rf, ctx) { }
+function SubTableComponent_div_3_div_1_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SubTableComponent_div_3_div_1_2_ng_template_0_Template, 0, 0, "ng-template", 12);
+} if (rf & 2) {
+    const colHeader_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("customComponent", colHeader_r2 == null ? null : colHeader_r2.componentRef)("data", colHeader_r2.data);
+} }
+function SubTableComponent_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵlistener("click", function SubTableComponent_div_3_div_1_Template_div_click_0_listener() { const colHeader_r2 = i0.ɵɵrestoreView(_r1).$implicit; return i0.ɵɵresetView((colHeader_r2 == null ? null : colHeader_r2.action) ? colHeader_r2 == null ? null : colHeader_r2.action(colHeader_r2) : null); });
+    i0.ɵɵtemplate(1, SubTableComponent_div_3_div_1_p_1_Template, 2, 1, "p", 9)(2, SubTableComponent_div_3_div_1_2_Template, 1, 2, null, 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r2 = ctx.$implicit;
+    i0.ɵɵstyleMap(colHeader_r2 == null ? null : colHeader_r2.style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(5, _c3$1, (colHeader_r2 == null ? null : colHeader_r2.style == null ? null : colHeader_r2.style.width) || "", colHeader_r2.action ? "pointer" : "default", (colHeader_r2 == null ? null : colHeader_r2.style == null ? null : colHeader_r2.style.justifyContent) ? colHeader_r2 == null ? null : colHeader_r2.style == null ? null : colHeader_r2.style.justifyContent : colHeader_r2.type === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (colHeader_r2 == null ? null : colHeader_r2.type) !== "custom");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (colHeader_r2 == null ? null : colHeader_r2.type) === "custom");
+} }
+function SubTableComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵtemplate(1, SubTableComponent_div_3_div_1_Template, 3, 9, "div", 7);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    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);
+} }
+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) {
+    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$1, (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.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", col_r6, " ");
+} }
+function SubTableComponent_div_6_div_2_3_ng_template_0_Template(rf, ctx) { }
+function SubTableComponent_div_6_div_2_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SubTableComponent_div_6_div_2_3_ng_template_0_Template, 0, 0, "ng-template", 12);
+} if (rf & 2) {
+    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("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.ɵɵ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) {
+    const i_r7 = ctx.index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c5$1, (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.ɵɵ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$1, 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.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.config.colConfig[i_r7].type !== "custom");
+    i0.ɵɵadvance();
+    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);
+    i0.ɵɵtemplate(2, SubTableComponent_div_6_div_2_Template, 4, 11, "div", 15);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r9 = ctx.$implicit;
+    const i_r10 = ctx.index;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c4$1, i_r10 % 2 === 0 ? "#FAFAFA" : null));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", row_r9);
+} }
+class SubTableComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.selectedPage = 1;
+        this.pages = [];
+        this.tableData = [];
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        if (this.config.paginationConfig) {
+            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;
+        else
+            return "";
+    }
+    getContainerWidth() {
+        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;
+        }
+        else
+            return "44px";
+    }
+    getColHeadersRowBorderTop() {
+        if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderTop) {
+            return this.config.colHeadersRowConfig.style?.borderTop;
+        }
+        else
+            return "";
+    }
+    getColHeadersRowBorderBottom() {
+        if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderBottom) {
+            return this.config.colHeadersRowConfig.style?.borderBottom;
+        }
+        else
+            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) {
+            i0.ɵɵviewQuery(_c0$2, 5);
+        } 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) {
+            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);
+            i0.ɵɵtemplate(6, SubTableComponent_div_6_Template, 3, 4, "div", 5);
+            i0.ɵɵelementEnd()()()();
+        } 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.ɵɵ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.ɵɵ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: [{
+            type: ViewChild,
+            args: ["table"]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubTableComponent, { className: "SubTableComponent" }); })();
+
+const _c0$1 = ["mainContainer"];
+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);
+    i0.ɵɵlistener("valueChange", function TableFilterComponent_div_8_Template_mis_checkbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updateFilter($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 17);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const filter_r4 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("checked", true)("name", filter_r4.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(filter_r4.name);
+} }
+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$1));
+} }
+function TableFilterComponent_div_11_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "mis-checkbox", 16);
+    i0.ɵɵlistener("valueChange", function TableFilterComponent_div_11_div_1_Template_mis_checkbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.updateFilter($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 17);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const filter_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", false)("name", filter_r6.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(filter_r6.name);
+} }
+function TableFilterComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtemplate(1, TableFilterComponent_div_11_div_1_Template, 4, 3, "div", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r6 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !filter_r6.checked);
+} }
+function TableFilterComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 17);
+    i0.ɵɵtext(2, "No matches found");
+    i0.ɵɵelementEnd()();
+} }
+class TableFilterComponent {
+    constructor() {
+        this.filtersData = [];
+        this.containerStyles = {};
+        this.filtersApplied = new EventEmitter();
+        this.filtersMap = {};
+        this.searchValue = "";
+        this.mySort = (a, b) => {
+            if (a.name < b.name)
+                return -1;
+            else if (b.name < a.name)
+                return 1;
+            else
+                return 0;
+        };
+    }
+    ngOnInit() {
+        this.filtersData.forEach(filter => {
+            this.filtersMap[filter.value] = filter;
+        });
+    }
+    resetFilters() {
+        this.filtersData.forEach(filter => {
+            this.filtersMap[filter.value].checked = false;
+        });
+        this.filtersApplied.emit([]);
+    }
+    applyFilters() {
+        let list = Object.values(this.filtersMap)
+            .filter((filter) => filter.checked)
+            .map((filter) => {
+            return {
+                name: filter.name,
+                value: filter.value
+            };
+        });
+        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;
+        }
+    }
+    getFiltersBasedOnSearchValue() {
+        let list = Object.values(this.filtersMap);
+        list = list.filter((filter) => {
+            return 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);
+        return list;
+    }
+    static { this.ɵfac = function TableFilterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableFilterComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableFilterComponent, selectors: [["mis-table-filter"]], viewQuery: function TableFilterComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$1, 5);
+        } 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) {
+            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)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(4, "svg", 4);
+            i0.ɵɵelement(5, "path", 5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(6, "div", 6)(7, "div", 7);
+            i0.ɵɵtemplate(8, TableFilterComponent_div_8_Template, 5, 3, "div", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(9, TableFilterComponent_div_9_Template, 1, 2, "div", 9);
+            i0.ɵɵelementStart(10, "div", 7);
+            i0.ɵɵtemplate(11, TableFilterComponent_div_11_Template, 2, 1, "div", 8)(12, TableFilterComponent_div_12_Template, 3, 0, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(13, "div", 11);
+            i0.ɵɵelementStart(14, "div", 12)(15, "button", 13);
+            i0.ɵɵlistener("click", function TableFilterComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.resetFilters()); });
+            i0.ɵɵtext(16, "Reset");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "button", 14);
+            i0.ɵɵlistener("click", function TableFilterComponent_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.applyFilters()); });
+            i0.ɵɵtext(18, "Apply");
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            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.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.getFiltersBasedOnSearchValue());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.getFiltersBasedOnSearchValue().length < 1);
+            i0.ɵɵadvance();
+            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}"] }); }
+}
+(() => { (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: [{
+            type: ViewChild,
+            args: ["mainContainer"]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableFilterComponent, { className: "TableFilterComponent" }); })();
+
+const _c0 = ["filter"];
+const _c1 = ["table"];
+const _c2 = ["colHeaderRef"];
+const _c3 = (a0, a1, a2) => ({ height: a0, width: a1, "overflow-x": a2 });
+const _c4 = (a0, a1, a2) => ({ "no-scrollbar": a0, scrollbar: a1, "scroll-horizontally": a2 });
+const _c5 = (a0, a1, a2) => ({ width: a0, cursor: a1, "justify-content": a2 });
+const _c6 = (a0, a1) => ({ "t-row-hover": a0, "active-row": a1 });
+const _c7 = a0 => ({ "min-height": a0 });
+const _c8 = a0 => ({ width: a0 });
+const _c9 = a0 => ({ "t-col-container-hover": a0 });
+const _c10 = (a0, a1) => ({ width: "100%", cursor: a0, "justify-content": a1 });
+const _c11 = a0 => ({ color: a0 });
+const _c12 = a0 => ({ "text-ellipsis": a0 });
+const _c13 = () => ({ display: "flex", justifyContent: "center", alignItems: "center", padding: "16px" });
+const _c14 = a0 => ({ "page-active": a0 });
+const _c15 = () => ({ display: "flex" });
+const _c16 = () => ({ "margin-right": "4px" });
+function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mis-table-filter", 11, 1);
+    i0.ɵɵlistener("filtersApplied", function TableComponent_mis_table_filter_1_Template_mis_table_filter_filtersApplied_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateAppliedFilters($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    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", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", (colHeader_r4 == null ? null : colHeader_r4.data) || " ", " ");
+} }
+function TableComponent_div_5_span_3_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 21);
+} }
+function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 17);
+    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.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span", 18);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 19);
+    i0.ɵɵelement(3, "path", 20);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const colHeader_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.appliedFilters[colHeader_r4.data] == null ? null : ctx_r1.appliedFilters[colHeader_r4.data].length) > 0);
+} }
+function TableComponent_div_5_4_ng_template_0_Template(rf, ctx) { }
+function TableComponent_div_5_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TableComponent_div_5_4_ng_template_0_Template, 0, 0, "ng-template", 22);
+} if (rf & 2) {
+    const colHeader_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("customComponent", colHeader_r4 == null ? null : colHeader_r4.componentRef)("data", colHeader_r4.data);
+} }
+function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12, 2);
+    i0.ɵɵlistener("click", function TableComponent_div_5_Template_div_click_0_listener() { const colHeader_r4 = i0.ɵɵrestoreView(_r3).$implicit; return i0.ɵɵresetView((colHeader_r4 == null ? null : colHeader_r4.action) ? colHeader_r4 == null ? null : colHeader_r4.action(colHeader_r4) : null); });
+    i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 1, "p", 13)(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 14)(4, TableComponent_div_5_4_Template, 1, 2, null, 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r4 = ctx.$implicit;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(4, _c5, (colHeader_r4 == null ? null : colHeader_r4.style == null ? null : colHeader_r4.style.width) || "", colHeader_r4.action ? "pointer" : "default", (colHeader_r4 == null ? null : colHeader_r4.style == null ? null : colHeader_r4.style.justifyContent) ? colHeader_r4 == null ? null : colHeader_r4.style == null ? null : colHeader_r4.style.justifyContent : colHeader_r4.type === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) !== "custom");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) !== "custom" && (colHeader_r4 == null ? null : colHeader_r4.filters) && (colHeader_r4 == null ? null : colHeader_r4.filters == null ? null : colHeader_r4.filters.length) > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) === "custom");
+} }
+function TableComponent_div_7_div_2_p_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 30);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r11 = i0.ɵɵnextContext();
+    const col_r10 = ctx_r11.$implicit;
+    const i_r11 = ctx_r11.index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c11, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style == null ? null : ctx_r1.config.colConfig[i_r11].style.color) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style == null ? null : ctx_r1.config.colConfig[i_r11].style.color : ""))("ngClass", i0.ɵɵpureFunction1(5, _c12, !!(ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style == null ? null : ctx_r1.config.colConfig[i_r11].style.textEllipsis)));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", col_r10, " ");
+} }
+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) {
+    i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template", 22);
+} if (rf & 2) {
+    const ctx_r11 = i0.ɵɵnextContext();
+    const col_r10 = ctx_r11.$implicit;
+    const i_r11 = ctx_r11.index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[i_r11].componentRef)("data", col_r10);
+} }
+function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const ctx_r8 = i0.ɵɵrestoreView(_r8); const col_r10 = ctx_r8.$implicit; const i_r11 = ctx_r8.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].action) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].action(col_r10) : null); });
+    i0.ɵɵelementStart(1, "div", 28);
+    i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 29)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 15);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const i_r11 = ctx.index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(7, _c8, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style == null ? null : ctx_r1.config.colConfig[i_r11].style.width) || (ctx_r1.config == null ? null : ctx_r1.config.colHeaderConfig[i_r11] == null ? null : ctx_r1.config.colHeaderConfig[i_r11].style == null ? null : ctx_r1.config.colHeaderConfig[i_r11].style.width) || ""))("ngClass", i0.ɵɵpureFunction1(9, _c9, ctx_r1.config.cellHover));
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(11, _c10, (ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].action) ? "pointer" : "default", (ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style == null ? null : ctx_r1.config.colConfig[i_r11].style.justifyContent) ? ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].style == null ? null : ctx_r1.config.colConfig[i_r11].style.justifyContent : (ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].type) === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].type) !== "custom");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].type) === "custom");
+} }
+function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 32);
+    i0.ɵɵtext(2, " Loading... ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c13));
+} }
+function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 32);
+    i0.ɵɵtext(2, " No Data Available... ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(1, _c13));
+} }
+function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "sub-table", 33);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("config", ctx_r1.subTableconfig)("tableData", ctx_r1.subTableData);
+} }
+function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container", 15)(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 2, "ng-container", 15)(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.subTableDataLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading && ctx_r1.subTableData.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.subTableDataLoading && ctx_r1.subTableData.length > 0);
+} }
+function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
+    i0.ɵɵlistener("click", function TableComponent_div_7_Template_div_click_1_listener() { const i_r7 = i0.ɵɵrestoreView(_r6).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectRow(i_r7)); });
+    i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 4, 14, "div", 25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r13 = ctx.$implicit;
+    const i_r7 = ctx.index;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c6, ctx_r1.config.cellHover, i_r7 === ctx_r1.activeRowIndex))("ngStyle", i0.ɵɵpureFunction1(7, _c7, (ctx_r1.config == null ? null : ctx_r1.config.rowConfig == null ? null : ctx_r1.config.rowConfig.height) ? ctx_r1.config.rowConfig.height : "44px"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", row_r13);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r7);
+} }
+function TableComponent_div_8_div_7_span_1_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("click", function TableComponent_div_8_div_7_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r15); const pageNumber_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r16)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const pageNumber_r16 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c14, pageNumber_r16 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(pageNumber_r16);
+} }
+function TableComponent_div_8_div_7_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45)(1, "div", 32);
+    i0.ɵɵelement(2, "span", 46)(3, "span", 46)(4, "span", 47);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(3, _c15));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c16));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(5, _c16));
+} }
+function TableComponent_div_8_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtemplate(1, TableComponent_div_8_div_7_span_1_Template, 2, 4, "span", 42)(2, TableComponent_div_8_div_7_span_2_Template, 5, 6, "span", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const pageNumber_r16 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", pageNumber_r16 != 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", pageNumber_r16 == 0);
+} }
+function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "p", 35);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 36)(4, "span", 37);
+    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) - 1)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg", 38);
+    i0.ɵɵelement(6, "path", 39);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(7, TableComponent_div_8_div_7_Template, 3, 2, "div", 40);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(8, "span", 37);
+    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateSelectedPage((ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage) + 1)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg", 38);
+    i0.ɵɵelement(10, "path", 41);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    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.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r1.pages);
+} }
+class TableComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        // Initialize with -1 to indicate no row is colored at the beginning
+        this.activeRowIndex = 0;
+        // Filter related variables
+        this.showFilter = false;
+        this.filterName = "";
+        this.filterData = [];
+        this.filterContainerStyles = {};
+        this.appliedFilters = {};
+        this.filtersUpdated = new EventEmitter();
+        // Pagination related variables
+        this.pages = [];
+        this.pageSelected = new EventEmitter();
+        this.tableData = [];
+        this.subTableData = [];
+    }
+    // Function to handle row click
+    selectRow(index) {
+        this.activeRowIndex = index; // Set the selected index to the clicked row's index
+        !!this.config.rowConfig.action && this.config.rowConfig.action(index);
+    }
+    ngOnInit() {
+        this.tableLength = !!this.tableData ? this.tableData.length : 0;
+        this.initializeFilters();
+        if (this.config.paginationConfig) {
+            this.initializePagination();
+        }
+        if (this.config.canScrollHorizontally === undefined) {
+            this.config.canScrollHorizontally = false;
+        }
+        document.addEventListener("click", event => {
+            if (this.filter) {
+                let isCheckBoxClicked = true;
+                let targetElement = event.target;
+                if (targetElement.className === "checkmark") {
+                    isCheckBoxClicked = true;
+                    this.showFilter = true;
+                }
+                let isClickInsideElement = this.filter.container.nativeElement.contains(event.target);
+                if (!isClickInsideElement && !isCheckBoxClicked) {
+                    this.toggleFilter(this.filterName);
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.config.paginationConfig) {
+            let height = this.config.height;
+            this.renderer.setStyle(this.table.nativeElement, "height", height - 56 + "px");
+        }
+    }
+    ngOnChanges() {
+        this.tableLength = !!this.tableData ? this.tableData.length : 0;
+        this.activeRowIndex = this.config.activeRowIndex || 0;
+    }
+    // Filter related functions
+    initializeFilters() {
+        for (let colHeader of this.config?.colHeaderConfig) {
+            if (colHeader.filters) {
+                let filters = [];
+                for (let filter of colHeader.filters) {
+                    if (filter.checked) {
+                        filters.push({
+                            name: filter.name,
+                            value: filter.value
+                        });
+                    }
+                }
+                if (filters.length > 0)
+                    this.appliedFilters[colHeader.data] = filters;
+            }
+        }
+    }
+    toggleFilter(filterName) {
+        if (!this.showFilter) {
+            this.filterName = filterName;
+            this.showFilter = true;
+            let offSet = 0;
+            let colHeadersReversed = this.colHeaders.toArray().reverse();
+            for (let header of colHeadersReversed) {
+                if (header.nativeElement.innerText === filterName)
+                    break;
+                offSet += header.nativeElement.offsetWidth;
+            }
+            this.filterContainerStyles = {
+                top: "44px",
+                right: offSet > 0 ? offSet - 116 + "px" : "12px"
+            };
+        }
+        else {
+            this.filterName = "";
+            this.filterData = [];
+            this.showFilter = false;
+        }
+    }
+    updateAppliedFilters(appliedFilters) {
+        if (appliedFilters.length == 0) {
+            delete this.appliedFilters[this.filterName];
+        }
+        else {
+            this.appliedFilters[this.filterName] = appliedFilters;
+        }
+        this.filtersUpdated.emit({ ...this.appliedFilters });
+        this.toggleFilter(this.filterName);
+    }
+    // Pagination related functions
+    initializePagination() {
+        if (this.config.paginationConfig) {
+            let len = this.config.paginationConfig.noOfPages;
+            if (len <= 7) {
+                for (let i = 1; i <= len; i++) {
+                    this.pages.push(i);
+                }
+            }
+            else {
+                this.pages = [1, 2, 3, 4, 0, len];
+            }
+        }
+    }
+    updateSelectedPage(pageNumber) {
+        if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
+            return;
+        this.config.paginationConfig.selectedPage = pageNumber;
+        let len = this.config.paginationConfig.noOfPages;
+        if (len > 7) {
+            if (pageNumber - 2 <= 1) {
+                this.pages = [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];
+            }
+            else if (pageNumber + 2 >= len) {
+                this.pages = [1, 0, len - 3, len - 2, len - 1, len];
+            }
+        }
+        this.pageSelected.emit(this.config.paginationConfig?.selectedPage);
+    }
+    // Main container related functions
+    getContainerHeight() {
+        if (this.config?.height)
+            return this.config.height;
+        else
+            return "";
+    }
+    getContainerWidth() {
+        if (this.config?.width)
+            return this.config.width;
+        else
+            return "";
+    }
+    // Column Headers related functions
+    getColHeadersRowStyles() {
+        const { colHeadersRowConfig } = this.config;
+        const minHeight = colHeadersRowConfig?.height || "44px";
+        const borderTop = colHeadersRowConfig?.style?.borderTop || "";
+        const borderBottom = colHeadersRowConfig?.style?.borderBottom || "1px solid #E0E0E0";
+        const backgroundColor = colHeadersRowConfig?.style?.backgroundColor || "#FFFFFF";
+        const fontSize = colHeadersRowConfig?.style?.fontSize || "14px";
+        return {
+            'min-height': minHeight,
+            'border-top': borderTop,
+            'border-bottom': borderBottom,
+            'background-color': backgroundColor,
+            'font-size': fontSize
+        };
+    }
+    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, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+            i0.ɵɵviewQuery(_c2, 5);
+        } if (rf & 2) {
+            let _t;
+            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" }, features: [i0.ɵɵNgOnChangesFeature], decls: 9, vars: 15, consts: [["table", ""], ["filter", ""], ["colHeaderRef", ""], ["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"], [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"], ["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"], [1, "t-col-text", 3, "ngStyle", "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"], [4, "ngFor", "ngForOf"], ["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"], ["class", "page", 3, "ngClass", "click", 4, "ngIf"], ["class", "page-seperator", 4, "ngIf"], [1, "page", 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", 3);
+            i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 4);
+            i0.ɵɵelementStart(2, "div", 5, 0)(4, "div", 6);
+            i0.ɵɵtemplate(5, TableComponent_div_5_Template, 5, 8, "div", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 8);
+            i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 9, "div", 9);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 4, "div", 10);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c3, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.config.canScrollHorizontally ? "auto" : "unset"));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showFilter);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c4, ctx.expandedIndex < 0, !(ctx.expandedIndex < 0), ctx.config.canScrollHorizontally));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngStyle", ctx.getColHeadersRowStyles());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.config == null ? null : ctx.config.colHeaderConfig);
+            i0.ɵɵadvance(2);
+            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));
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, SubTableComponent, TableFilterComponent, CustomTableCellDirective], 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}.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}.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 96px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;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-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}"] }); }
+}
+(() => { (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'\" 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        <ng-template\n          *ngIf=\"colHeader?.type === 'custom'\"\n          [customComponent]=\"colHeader?.componentRef\"\n          [data]=\"colHeader.data\"\n          customTableCell\n        ></ng-template>\n      </div>\n    </div>\n    <div id=\"data-container\">\n      <div class=\"row-wrapper\" *ngFor=\"let row of tableData; let i = index\">\n        <div\n          class=\"t-row\"\n          [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': i === activeRowIndex }\"\n          [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n          (click)=\"selectRow(i)\"\n          >\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            [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              <p\n                *ngIf=\"config.colConfig[i]?.type !== 'custom'\"\n                [ngStyle]=\"{\n                  color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n                }\"\n                [ngClass]=\"{'text-ellipsis': !!config?.colConfig[i]?.style?.textEllipsis}\"\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 *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)=\"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=\"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      <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\"\n          >{{ pageNumber }}</span\n        >\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      <span (click)=\"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}.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}.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 96px 0 0}#pages-container{display:flex;margin-right:32px}.page{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;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-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}\n"] }]
+    }], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
+            type: Output
+        }], 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"]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent" }); })();
+
+class TableModule {
+    static forRoot() {
+        return { ngModule: TableModule, providers: [] };
+    }
+    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] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective],
+                imports: [CommonModule, CheckboxModule, ScrollingModule],
+                exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TableModule, { declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective], imports: [CommonModule, CheckboxModule, ScrollingModule], exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomTableCellDirective, SubTableComponent, TableComponent, TableFilterComponent, TableModule };
+//# sourceMappingURL=mis-crystal-design-system-table.mjs.map