mis-crystal-design-system 4.0.51 → 14.0.1

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

@@ -0,0 +1,895 @@
+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 {
+    constructor(viewContainerRef, componentFactoryResolver) {
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    set customComponent(value) {
+        this.component = value;
+        this.createComponent();
+    }
+    set data(value) {
+        this.cellData = value;
+        if (this.ref) {
+            this.ref.instance.data = this.cellData;
+        }
+    }
+    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;
+    }
+}
+CustomTableCellDirective.ɵfac = function CustomTableCellDirective_Factory(t) { return new (t || CustomTableCellDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
+CustomTableCellDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CustomTableCellDirective, selectors: [["", "customTableCell", ""]], inputs: { customComponent: "customComponent", data: "data" } });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomTableCellDirective, [{
+        type: Directive,
+        args: [{
+                selector: "[customTableCell]"
+            }]
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, { customComponent: [{
+            type: Input
+        }], data: [{
+            type: Input
+        }] }); })();
+
+const _c0$2 = ["table"];
+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_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", (colHeader_r4 == null ? null : colHeader_r4.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_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("customComponent", colHeader_r4 == null ? null : colHeader_r4.componentRef)("data", colHeader_r4.data);
+} }
+const _c1$1 = function (a0, a1, a2) { return { width: a0, cursor: a1, "justify-content": a2 }; };
+function SubTableComponent_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵlistener("click", function SubTableComponent_div_3_div_1_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const colHeader_r4 = restoredCtx.$implicit; return i0.ɵɵresetView((colHeader_r4 == null ? null : colHeader_r4.action) ? colHeader_r4 == null ? null : colHeader_r4.action(colHeader_r4) : null); });
+    i0.ɵɵtemplate(1, SubTableComponent_div_3_div_1_p_1_Template, 2, 1, "p", 9);
+    i0.ɵɵtemplate(2, SubTableComponent_div_3_div_1_2_Template, 1, 2, null, 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r4 = ctx.$implicit;
+    i0.ɵɵstyleMap(colHeader_r4 == null ? null : colHeader_r4.style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(5, _c1$1, (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(1);
+    i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) !== "custom");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (colHeader_r4 == null ? null : colHeader_r4.type) === "custom");
+} }
+const _c2$1 = function (a0, a1, a2) { return { height: a0, "border-top": a1, "border-bottom": a2 }; };
+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_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(2, _c2$1, ctx_r1.getColHeadersRowHeight(), ctx_r1.getColHeadersRowBorderTop(), ctx_r1.getColHeadersRowBorderBottom()));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.config == null ? null : ctx_r1.config.colHeaderConfig);
+} }
+const _c3$1 = function (a0) { return { color: a0 }; };
+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_r19 = i0.ɵɵnextContext();
+    const i_r16 = ctx_r19.index;
+    const col_r15 = ctx_r19.$implicit;
+    const ctx_r17 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c3$1, (ctx_r17.config == null ? null : ctx_r17.config.colConfig[i_r16] == null ? null : ctx_r17.config.colConfig[i_r16].style == null ? null : ctx_r17.config.colConfig[i_r16].style.color) ? ctx_r17.config == null ? null : ctx_r17.config.colConfig[i_r16] == null ? null : ctx_r17.config.colConfig[i_r16].style == null ? null : ctx_r17.config.colConfig[i_r16].style.color : ""));
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", col_r15, " ");
+} }
+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_r21 = i0.ɵɵnextContext();
+    const i_r16 = ctx_r21.index;
+    const col_r15 = ctx_r21.$implicit;
+    const ctx_r18 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("customComponent", ctx_r18.config.colConfig[i_r16].componentRef)("data", col_r15);
+} }
+const _c4$1 = function (a0) { return { width: a0 }; };
+const _c5$1 = function (a1, a2) { return { width: "100%", cursor: a1, "justify-content": a2 }; };
+function SubTableComponent_div_6_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵlistener("click", function SubTableComponent_div_6_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r23); const i_r16 = restoredCtx.index; const col_r15 = restoredCtx.$implicit; const ctx_r22 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r22.config == null ? null : ctx_r22.config.colConfig[i_r16] == null ? null : ctx_r22.config.colConfig[i_r16].action) ? ctx_r22.config == null ? null : ctx_r22.config.colConfig[i_r16] == null ? null : ctx_r22.config.colConfig[i_r16].action(col_r15) : null); });
+    i0.ɵɵelementStart(1, "div", 17);
+    i0.ɵɵtemplate(2, SubTableComponent_div_6_div_2_p_2_Template, 2, 4, "p", 18);
+    i0.ɵɵtemplate(3, SubTableComponent_div_6_div_2_3_Template, 1, 2, null, 10);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const i_r16 = ctx.index;
+    const ctx_r14 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c4$1, (ctx_r14.config == null ? null : ctx_r14.config.colConfig[i_r16] == null ? null : ctx_r14.config.colConfig[i_r16].style == null ? null : ctx_r14.config.colConfig[i_r16].style.width) || (ctx_r14.config == null ? null : ctx_r14.config.colHeaderConfig[i_r16] == null ? null : ctx_r14.config.colHeaderConfig[i_r16].style == null ? null : ctx_r14.config.colHeaderConfig[i_r16].style.width) || ""));
+    i0.ɵɵadvance(1);
+    i0.ɵɵstyleMap(ctx_r14.config.colConfig[i_r16] == null ? null : ctx_r14.config.colConfig[i_r16].style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(8, _c5$1, ctx_r14.config.colConfig[i_r16].action ? "pointer" : "default", (ctx_r14.config.colConfig[i_r16] == null ? null : ctx_r14.config.colConfig[i_r16].style == null ? null : ctx_r14.config.colConfig[i_r16].style.justifyContent) ? ctx_r14.config.colConfig[i_r16] == null ? null : ctx_r14.config.colConfig[i_r16].style == null ? null : ctx_r14.config.colConfig[i_r16].style.justifyContent : ctx_r14.config.colConfig[i_r16].type === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r14.config.colConfig[i_r16].type !== "custom");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r14.config.colConfig[i_r16].type === "custom");
+} }
+const _c6$1 = function (a0) { return { backgroundColor: a0 }; };
+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_r12 = ctx.$implicit;
+    const i_r13 = ctx.index;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c6$1, i_r13 % 2 === 0 ? "#FAFAFA" : null));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", row_r12);
+} }
+const _c7$1 = function (a0, a1) { return { height: a0, width: a1 }; };
+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";
+    }
+}
+SubTableComponent.ɵfac = function SubTableComponent_Factory(t) { return new (t || SubTableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
+SubTableComponent.ɵ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: [["id", "main-container", 3, "ngStyle"], ["id", "table-container"], ["table", ""], ["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, "ngStyle", "click"], ["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, "ngStyle", "click"], [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", 0)(1, "div", 1, 2);
+        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, _c7$1, 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(1);
+        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}"] });
+(function () { (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"] }]
+    }], function () { return [{ type: i0.Renderer2 }]; }, { config: [{
+            type: Input
+        }], tableData: [{
+            type: Input
+        }], table: [{
+            type: ViewChild,
+            args: ["table"]
+        }] }); })();
+
+const _c0$1 = ["mainContainer"];
+function TableFilterComponent_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = 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(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.updateFilter($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 17);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const filter_r5 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("checked", true)("name", filter_r5.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(filter_r5.name);
+} }
+function TableFilterComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 11);
+} }
+function TableFilterComponent_div_11_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = 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(_r11); const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.updateFilter($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 17);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const filter_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("checked", false)("name", filter_r8.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(filter_r8.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_r8 = ctx.$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", !filter_r8.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;
+    }
+}
+TableFilterComponent.ɵfac = function TableFilterComponent_Factory(t) { return new (t || TableFilterComponent)(); };
+TableFilterComponent.ɵ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: 5, consts: [["id", "main-container", 3, "ngStyle"], ["mainContainer", ""], ["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", "style", "margin: 16px 0px", 4, "ngIf"], ["id", "no-results-container", 4, "ngIf"], [1, "separator", 2, "margin", "16px 0px"], ["id", "buttons-container"], ["id", "reset-btn", 2, "margin-right", "8px", 3, "click"], ["id", "apply-btn", 3, "click"], [1, "filter"], [3, "checked", "name", "valueChange"], [1, "filter-text"], ["class", "filter", 4, "ngIf"], ["id", "no-results-container"]], template: function TableFilterComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2)(3, "input", 3);
+        i0.ɵɵlistener("keyup", function TableFilterComponent_Template_input_keyup_3_listener($event) { return 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, 0, "div", 9);
+        i0.ɵɵelementStart(10, "div", 7);
+        i0.ɵɵtemplate(11, TableFilterComponent_div_11_Template, 2, 1, "div", 8);
+        i0.ɵɵtemplate(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() { return ctx.resetFilters(); });
+        i0.ɵɵtext(16, "Reset");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(17, "button", 14);
+        i0.ɵɵlistener("click", function TableFilterComponent_Template_button_click_17_listener() { return 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(1);
+        i0.ɵɵproperty("ngIf", ctx.getCheckedFilters().length && ctx.getCheckedFilters().length < ctx.filtersData.length);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.getFiltersBasedOnSearchValue());
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.getFiltersBasedOnSearchValue().length < 1);
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2$1.CheckboxComponent], styles: ["#main-container[_ngcontent-%COMP%]{position:absolute;background:#ffffff;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:#ffffff;color:#0937b2}"] });
+(function () { (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\" style=\"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\" style=\"margin: 16px 0px\"></div>\n    <div id=\"buttons-container\">\n      <button id=\"reset-btn\" style=\"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:#ffffff;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:#ffffff;color:#0937b2}\n"] }]
+    }], function () { return []; }, { filtersData: [{
+            type: Input
+        }], containerStyles: [{
+            type: Input
+        }], filtersApplied: [{
+            type: Output
+        }], container: [{
+            type: ViewChild,
+            args: ["mainContainer"]
+        }] }); })();
+
+const _c0 = ["filter"];
+const _c1 = ["table"];
+const _c2 = ["colHeaderRef"];
+function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mis-table-filter", 9, 10);
+    i0.ɵɵlistener("filtersApplied", function TableComponent_mis_table_filter_1_Template_mis_table_filter_filtersApplied_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.updateAppliedFilters($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("containerStyles", ctx_r0.filterContainerStyles)("filtersData", ctx_r0.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_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", (colHeader_r8 == null ? null : colHeader_r8.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 _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵlistener("click", function TableComponent_div_5_span_3_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const colHeader_r8 = i0.ɵɵnextContext().$implicit; const ctx_r15 = i0.ɵɵnextContext(); ctx_r15.filterData = colHeader_r8.filters; ctx_r15.toggleFilter(colHeader_r8.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_r8 = i0.ɵɵnextContext().$implicit;
+    const ctx_r11 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (ctx_r11.appliedFilters[colHeader_r8.data] == null ? null : ctx_r11.appliedFilters[colHeader_r8.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_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("customComponent", colHeader_r8 == null ? null : colHeader_r8.componentRef)("data", colHeader_r8.data);
+} }
+const _c3 = function (a0, a1, a2) { return { width: a0, cursor: a1, "justify-content": a2 }; };
+function TableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11, 12);
+    i0.ɵɵlistener("click", function TableComponent_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r22); const colHeader_r8 = restoredCtx.$implicit; return i0.ɵɵresetView((colHeader_r8 == null ? null : colHeader_r8.action) ? colHeader_r8 == null ? null : colHeader_r8.action(colHeader_r8) : null); });
+    i0.ɵɵtemplate(2, TableComponent_div_5_p_2_Template, 2, 1, "p", 13);
+    i0.ɵɵtemplate(3, TableComponent_div_5_span_3_Template, 4, 1, "span", 14);
+    i0.ɵɵtemplate(4, TableComponent_div_5_4_Template, 1, 2, null, 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r8 = ctx.$implicit;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(4, _c3, (colHeader_r8 == null ? null : colHeader_r8.style == null ? null : colHeader_r8.style.width) || "", colHeader_r8.action ? "pointer" : "default", (colHeader_r8 == null ? null : colHeader_r8.style == null ? null : colHeader_r8.style.justifyContent) ? colHeader_r8 == null ? null : colHeader_r8.style == null ? null : colHeader_r8.style.justifyContent : colHeader_r8.type === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", (colHeader_r8 == null ? null : colHeader_r8.type) !== "custom");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (colHeader_r8 == null ? null : colHeader_r8.type) !== "custom" && (colHeader_r8 == null ? null : colHeader_r8.filters) && (colHeader_r8 == null ? null : colHeader_r8.filters == null ? null : colHeader_r8.filters.length) > 0);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (colHeader_r8 == null ? null : colHeader_r8.type) === "custom");
+} }
+const _c4 = function (a0) { return { color: a0 }; };
+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_r31 = i0.ɵɵnextContext();
+    const i_r28 = ctx_r31.index;
+    const col_r27 = ctx_r31.$implicit;
+    const ctx_r29 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c4, (ctx_r29.config == null ? null : ctx_r29.config.colConfig[i_r28] == null ? null : ctx_r29.config.colConfig[i_r28].style == null ? null : ctx_r29.config.colConfig[i_r28].style.color) ? ctx_r29.config == null ? null : ctx_r29.config.colConfig[i_r28] == null ? null : ctx_r29.config.colConfig[i_r28].style == null ? null : ctx_r29.config.colConfig[i_r28].style.color : ""));
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", col_r27, " ");
+} }
+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_r33 = i0.ɵɵnextContext();
+    const i_r28 = ctx_r33.index;
+    const col_r27 = ctx_r33.$implicit;
+    const ctx_r30 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("customComponent", ctx_r30.config.colConfig[i_r28].componentRef)("data", col_r27);
+} }
+const _c5 = function (a0) { return { width: a0 }; };
+const _c6 = function (a0) { return { "t-col-container-hover": a0 }; };
+const _c7 = function (a1, a2) { return { width: "100%", cursor: a1, "justify-content": a2 }; };
+function TableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r35); const i_r28 = restoredCtx.index; const col_r27 = restoredCtx.$implicit; const ctx_r34 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r34.config == null ? null : ctx_r34.config.colConfig[i_r28] == null ? null : ctx_r34.config.colConfig[i_r28].action) ? ctx_r34.config == null ? null : ctx_r34.config.colConfig[i_r28] == null ? null : ctx_r34.config.colConfig[i_r28].action(col_r27) : null); });
+    i0.ɵɵelementStart(1, "div", 28);
+    i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 4, "p", 29);
+    i0.ɵɵtemplate(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 15);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const i_r28 = ctx.index;
+    const ctx_r25 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(7, _c5, (ctx_r25.config == null ? null : ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].style == null ? null : ctx_r25.config.colConfig[i_r28].style.width) || (ctx_r25.config == null ? null : ctx_r25.config.colHeaderConfig[i_r28] == null ? null : ctx_r25.config.colHeaderConfig[i_r28].style == null ? null : ctx_r25.config.colHeaderConfig[i_r28].style.width) || ""))("ngClass", i0.ɵɵpureFunction1(9, _c6, ctx_r25.config.cellHover));
+    i0.ɵɵadvance(1);
+    i0.ɵɵstyleMap(ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(11, _c7, (ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].action) ? "pointer" : "default", (ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].style == null ? null : ctx_r25.config.colConfig[i_r28].style.justifyContent) ? ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].style == null ? null : ctx_r25.config.colConfig[i_r28].style.justifyContent : (ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].type) === "number" ? "flex-end" : "space-between"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].type) !== "custom");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (ctx_r25.config.colConfig[i_r28] == null ? null : ctx_r25.config.colConfig[i_r28].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();
+} }
+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();
+} }
+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_r38 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("config", ctx_r38.subTableconfig)("tableData", ctx_r38.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, 0, "ng-container", 15);
+    i0.ɵɵtemplate(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 0, "ng-container", 15);
+    i0.ɵɵtemplate(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r26 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r26.subTableDataLoading);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", !ctx_r26.subTableDataLoading && ctx_r26.subTableData.length === 0);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", !ctx_r26.subTableDataLoading && ctx_r26.subTableData.length > 0);
+} }
+const _c8 = function (a0, a1) { return { "t-row-hover": a0, "active-row": a1 }; };
+const _c9 = function (a0) { return { "min-height": a0 }; };
+function TableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
+    i0.ɵɵlistener("click", function TableComponent_div_7_Template_div_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r40); const i_r24 = restoredCtx.index; const ctx_r39 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r39.selectRow(i_r24)); });
+    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_r23 = ctx.$implicit;
+    const i_r24 = ctx.index;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c8, ctx_r3.config.cellHover, i_r24 === ctx_r3.activeRowIndex))("ngStyle", i0.ɵɵpureFunction1(7, _c9, (ctx_r3.config == null ? null : ctx_r3.config.rowConfig == null ? null : ctx_r3.config.rowConfig.height) ? ctx_r3.config.rowConfig.height : "44px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", row_r23);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (ctx_r3.config == null ? null : ctx_r3.config.canExpand) && ctx_r3.expandedIndex === i_r24);
+} }
+const _c10 = function (a0) { return { "page-active": a0 }; };
+function TableComponent_div_8_div_7_span_1_Template(rf, ctx) { if (rf & 1) {
+    const _r47 = 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(_r47); const pageNumber_r42 = i0.ɵɵnextContext().$implicit; const ctx_r45 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r45.updateSelectedPage(pageNumber_r42)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const pageNumber_r42 = i0.ɵɵnextContext().$implicit;
+    const ctx_r43 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c10, pageNumber_r42 == (ctx_r43.config.paginationConfig == null ? null : ctx_r43.config.paginationConfig.selectedPage)));
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(pageNumber_r42);
+} }
+function TableComponent_div_8_div_7_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45)(1, "div", 46);
+    i0.ɵɵelement(2, "span", 47)(3, "span", 47)(4, "span", 48);
+    i0.ɵɵelementEnd()();
+} }
+function TableComponent_div_8_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtemplate(1, TableComponent_div_8_div_7_span_1_Template, 2, 4, "span", 42);
+    i0.ɵɵtemplate(2, TableComponent_div_8_div_7_span_2_Template, 5, 0, "span", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const pageNumber_r42 = ctx.$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", pageNumber_r42 != 0);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", pageNumber_r42 == 0);
+} }
+function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r50 = 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(_r50); const ctx_r49 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r49.updateSelectedPage((ctx_r49.config.paginationConfig == null ? null : ctx_r49.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(_r50); const ctx_r51 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r51.updateSelectedPage((ctx_r51.config.paginationConfig == null ? null : ctx_r51.config.paginationConfig.selectedPage) + 1)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg", 38);
+    i0.ɵɵelement(10, "path", 41);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate3(" Showing ", ((ctx_r4.config.paginationConfig == null ? null : ctx_r4.config.paginationConfig.selectedPage) - 1) * ctx_r4.config.paginationConfig.rowsPerPage + 1, "-", ((ctx_r4.config.paginationConfig == null ? null : ctx_r4.config.paginationConfig.selectedPage) - 1) * ctx_r4.config.paginationConfig.rowsPerPage + ctx_r4.tableLength, " of ", ctx_r4.config.paginationConfig.totalNoOfRows, " items ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r4.pages);
+} }
+const _c11 = function (a0, a1, a2) { return { height: a0, width: a1, "overflow-x": a2 }; };
+const _c12 = function (a0, a1, a2) { return { "no-scrollbar": a0, scrollbar: a1, "scroll-horizontally": a2 }; };
+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
+        };
+    }
+}
+TableComponent.ɵfac = function TableComponent_Factory(t) { return new (t || TableComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
+TableComponent.ɵ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: ["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: [["id", "main-container", 3, "ngStyle"], [3, "containerStyles", "filtersData", "filtersApplied", 4, "ngIf"], ["id", "table-container", 3, "ngClass"], ["table", ""], ["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, "containerStyles", "filtersData", "filtersApplied"], ["filter", ""], [1, "col-header", 3, "ngStyle", "click"], ["colHeaderRef", ""], ["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, "ngClass", "ngStyle", "click"], ["class", "t-col-container", 3, "ngStyle", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "sub-row", 4, "ngIf"], [1, "t-col-container", 3, "ngStyle", "ngClass", "click"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle"], [1, "sub-row"], [2, "display", "flex", "justify-content", "center", "align-items", "center", "padding", "16px"], [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, "ngClass", "click"], [1, "page-seperator"], [2, "display", "flex"], [1, "dot", 2, "margin-right", "4px"], [1, "dot"]], template: function TableComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, TableComponent_mis_table_filter_1_Template, 2, 2, "mis-table-filter", 1);
+        i0.ɵɵelementStart(2, "div", 2, 3)(4, "div", 4);
+        i0.ɵɵtemplate(5, TableComponent_div_5_Template, 5, 8, "div", 5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div", 6);
+        i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 9, "div", 7);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(8, TableComponent_div_8_Template, 11, 4, "div", 8);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(7, _c11, ctx.getContainerHeight(), ctx.getContainerWidth(), ctx.config.canScrollHorizontally ? "auto" : "unset"));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.showFilter);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c12, ctx.expandedIndex < 0, !(ctx.expandedIndex < 0), ctx.config.canScrollHorizontally));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngStyle", ctx.getColHeadersRowStyles());
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx.config == null ? null : ctx.config.colHeaderConfig);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.tableData);
+        i0.ɵɵadvance(1);
+        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:-moz-fit-content;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}.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}#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}"] });
+(function () { (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                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 style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">Loading...</div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n            <div style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">No Data Available...</div>\n          </ng-container>\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 style=\"display: flex\">\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\" style=\"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:-moz-fit-content;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}.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}#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"] }]
+    }], function () { return [{ 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"]
+        }] }); })();
+
+class TableModule {
+    static forRoot() {
+        return { ngModule: TableModule, providers: [] };
+    }
+}
+TableModule.ɵfac = function TableModule_Factory(t) { return new (t || TableModule)(); };
+TableModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: TableModule });
+TableModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, CheckboxModule, ScrollingModule] });
+(function () { (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