mis-crystal-design-system 18.0.10 → 18.0.11

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ViewChild, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
+import { Directive, Input, Component, ViewChild, EventEmitter, Output, input, output, signal, ViewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/cdk/scrolling';
@@ -407,6 +407,143 @@ class TableFilterComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableFilterComponent, { className: "TableFilterComponent" }); })();
 
+class SortIconsDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        // Convert inputs to signals
+        this.column = input();
+        this.activeSort = input();
+        this.activeSorts = input();
+        this.multiColumnSort = input(false);
+        // Convert output to signal
+        this.sortChange = output();
+        this.multiSortChange = output();
+        // Internal state as signals
+        this.currentDirection = signal('');
+    }
+    ngOnInit() {
+        // Create a container for the icons
+        const container = this.renderer.createElement('div');
+        this.renderer?.setStyle(container, 'display', 'inline-flex');
+        this.renderer?.setStyle(container, 'align-items', 'center');
+        const iconContainer = this.renderer.createElement('div');
+        this.renderer?.setStyle(iconContainer, 'display', 'inline-flex');
+        this.renderer?.setStyle(iconContainer, 'flex-direction', 'column');
+        this.renderer?.setStyle(iconContainer, 'align-items', 'center');
+        this.upIcon = this.renderer.createElement('img');
+        this.renderer?.setAttribute(this.upIcon, 'src', this.column()?.sortAscIcon);
+        this.renderer?.setStyle(this.upIcon, 'opacity', '0.5');
+        this.renderer?.setStyle(this.upIcon, 'transition', 'opacity 0.3s ease');
+        this.renderer?.setStyle(this.upIcon, 'width', '9px');
+        this.renderer?.setStyle(this.upIcon, 'cursor', 'pointer');
+        this.renderer?.listen(this.upIcon, 'click', () => this.setSortDirection('ASC'));
+        this.downIcon = this.renderer.createElement('img');
+        this.renderer?.setAttribute(this.downIcon, 'src', this.column()?.sortDescIcon);
+        this.renderer?.setStyle(this.downIcon, 'opacity', '0.5');
+        this.renderer?.setStyle(this.downIcon, 'transition', 'opacity 0.3s ease');
+        this.renderer?.setStyle(this.downIcon, 'width', '9px');
+        this.renderer?.setStyle(this.downIcon, 'cursor', 'pointer');
+        this.renderer?.listen(this.downIcon, 'click', () => this.setSortDirection('DESC'));
+        this.renderer?.appendChild(iconContainer, this.upIcon);
+        this.renderer?.appendChild(iconContainer, this.downIcon);
+        this.renderer?.appendChild(container, iconContainer);
+        if (this.multiColumnSort()) {
+            this.sortOrderElement = this.renderer.createElement('span');
+            this.renderer?.setStyle(this.sortOrderElement, 'font-size', '12px');
+            this.renderer?.setStyle(this.sortOrderElement, 'font-weight', 'bold');
+            this.renderer?.setStyle(this.sortOrderElement, 'color', '#000');
+            this.renderer?.appendChild(container, this.sortOrderElement);
+        }
+        this.renderer?.appendChild(this.el.nativeElement, container);
+        this.updateIconStyles();
+    }
+    ngOnChanges(changes) {
+        if (changes['activeSort'] || changes['activeSorts']) {
+            this.updateIconStyles();
+        }
+    }
+    setSortDirection(direction) {
+        if (this.multiColumnSort()) {
+            this.handleMultiColumnSort(direction);
+        }
+        else {
+            this.handleSingleColumnSort(direction);
+        }
+    }
+    handleSingleColumnSort(direction) {
+        if (this.currentDirection() === direction) {
+            this.currentDirection.set(''); // Reset sorting if the same direction is clicked
+        }
+        else {
+            this.currentDirection.set(direction);
+        }
+        this.sortChange.emit({
+            column: this.column()?.data || '',
+            direction: this.currentDirection()
+        });
+        this.updateIconStyles();
+    }
+    handleMultiColumnSort(direction) {
+        const existingSortIndex = this.activeSorts().findIndex(sort => sort.column === this.column()?.data);
+        if (existingSortIndex !== -1) {
+            if (this.activeSorts()[existingSortIndex].direction !== direction) {
+                this.activeSorts()[existingSortIndex].direction = direction;
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            this.activeSorts().push({
+                column: this.column()?.data || '',
+                direction
+            });
+        }
+        this.multiSortChange.emit([...this.activeSorts()]);
+        this.updateIconStyles();
+    }
+    updateIconStyles() {
+        if (this.multiColumnSort()) {
+            this.updateMultiColumnIconStyles();
+        }
+        else {
+            this.updateSingleColumnIconStyles();
+        }
+    }
+    updateSingleColumnIconStyles() {
+        const isActiveColumn = this.activeSort()?.column === this.column()?.data;
+        setTimeout(() => {
+            this.renderer?.setStyle(this.upIcon, 'opacity', isActiveColumn && this.currentDirection() === 'ASC' ? '1' : '0.5');
+            this.renderer?.setStyle(this.downIcon, 'opacity', isActiveColumn && this.currentDirection() === 'DESC' ? '1' : '0.5');
+        }, 0);
+    }
+    updateMultiColumnIconStyles() {
+        const columnSort = this.activeSorts().find(sort => sort.column === this.column()?.data);
+        setTimeout(() => {
+            this.renderer?.setStyle(this.upIcon, 'opacity', columnSort?.direction === 'ASC' ? '1' : '0.5');
+            this.renderer?.setStyle(this.downIcon, 'opacity', columnSort?.direction === 'DESC' ? '1' : '0.5');
+            if (this.sortOrderElement) {
+                const sortIndex = this.activeSorts().findIndex(sort => sort.column === this.column()?.data);
+                if (sortIndex !== -1) {
+                    this.renderer?.setProperty(this.sortOrderElement, 'textContent', (sortIndex + 1).toString());
+                }
+                else {
+                    this.renderer?.setProperty(this.sortOrderElement, 'textContent', '');
+                }
+            }
+        }, 0);
+    }
+    static { this.ɵfac = function SortIconsDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SortIconsDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SortIconsDirective, selectors: [["", "appSortIcons", ""]], inputs: { column: [1, "column"], activeSort: [1, "activeSort"], activeSorts: [1, "activeSorts"], multiColumnSort: [1, "multiColumnSort"] }, outputs: { sortChange: "sortChange", multiSortChange: "multiSortChange" }, features: [i0.ɵɵNgOnChangesFeature] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SortIconsDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[appSortIcons]',
+            }]
+    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], null); })();
+
 const _c0 = ["filter"];
 const _c1 = ["table"];
 const _c2 = ["colHeaderRef"];
@@ -434,7 +571,7 @@ function TableComponent_mis_table_filter_1_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵelementStart(0, "p", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -443,16 +580,16 @@ function TableComponent_div_5_p_2_Template(rf, ctx) { if (rf & 1) {
     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);
+    i0.ɵɵelement(0, "span", 22);
 } }
 function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵelementStart(0, "span", 18);
     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.ɵɵtemplate(1, TableComponent_div_5_span_3_span_1_Template, 1, 0, "span", 19);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 19);
-    i0.ɵɵelement(3, "path", 20);
+    i0.ɵɵelementStart(2, "svg", 20);
+    i0.ɵɵelement(3, "path", 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const colHeader_r4 = i0.ɵɵnextContext().$implicit;
@@ -460,9 +597,19 @@ function TableComponent_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
     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);
+function TableComponent_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵlistener("sortChange", function TableComponent_div_5_span_4_Template_span_sortChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSortChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const colHeader_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("column", colHeader_r4)("activeSort", ctx_r1.currentSort)("activeSorts", ctx_r1.multiColumnSort)("multiColumnSort", ctx_r1.config.multiColumnSort);
+} }
+function TableComponent_div_5_5_ng_template_0_Template(rf, ctx) { }
+function TableComponent_div_5_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TableComponent_div_5_5_ng_template_0_Template, 0, 0, "ng-template", 24);
 } if (rf & 2) {
     const colHeader_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("customComponent", colHeader_r4 == null ? null : colHeader_r4.componentRef)("data", colHeader_r4.data);
@@ -471,63 +618,65 @@ 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.ɵɵ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_span_4_Template, 1, 4, "span", 15)(5, TableComponent_div_5_5_Template, 1, 2, null, 16);
     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.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(5, _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.isSortable) && !(colHeader_r4 == null ? null : colHeader_r4.filters));
+    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.ɵɵelementStart(0, "p", 32);
     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_r12 = i0.ɵɵnextContext();
+    const col_r11 = ctx_r12.$implicit;
+    const i_r12 = ctx_r12.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.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c11, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style == null ? null : ctx_r1.config.colConfig[i_r12].style.color) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style == null ? null : ctx_r1.config.colConfig[i_r12].style.color : ""))("ngClass", i0.ɵɵpureFunction1(5, _c12, !!(ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style == null ? null : ctx_r1.config.colConfig[i_r12].style.textEllipsis)));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", col_r10, " ");
+    i0.ɵɵtextInterpolate1(" ", col_r11, " ");
 } }
 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);
+    i0.ɵɵtemplate(0, TableComponent_div_7_div_2_3_ng_template_0_Template, 0, 0, "ng-template", 24);
 } if (rf & 2) {
-    const ctx_r11 = i0.ɵɵnextContext();
-    const col_r10 = ctx_r11.$implicit;
-    const i_r11 = ctx_r11.index;
+    const ctx_r12 = i0.ɵɵnextContext();
+    const col_r11 = ctx_r12.$implicit;
+    const i_r12 = ctx_r12.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[i_r11].componentRef)("data", col_r10);
+    i0.ɵɵproperty("customComponent", ctx_r1.config.colConfig[i_r12].componentRef)("data", col_r11);
 } }
 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);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵlistener("click", function TableComponent_div_7_div_2_Template_div_click_0_listener() { const ctx_r9 = i0.ɵɵrestoreView(_r9); const col_r11 = ctx_r9.$implicit; const i_r12 = ctx_r9.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action) ? ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action(col_r11) : null); });
+    i0.ɵɵelementStart(1, "div", 30);
+    i0.ɵɵtemplate(2, TableComponent_div_7_div_2_p_2_Template, 2, 7, "p", 31)(3, TableComponent_div_7_div_2_3_Template, 1, 2, null, 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const i_r11 = ctx.index;
+    const i_r12 = 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.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(7, _c8, (ctx_r1.config == null ? null : ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style == null ? null : ctx_r1.config.colConfig[i_r12].style.width) || (ctx_r1.config == null ? null : ctx_r1.config.colHeaderConfig[i_r12] == null ? null : ctx_r1.config.colHeaderConfig[i_r12].style == null ? null : ctx_r1.config.colHeaderConfig[i_r12].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.ɵɵstyleMap(ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(11, _c10, (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].action) ? "pointer" : "default", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style == null ? null : ctx_r1.config.colConfig[i_r12].style.justifyContent) ? ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].style == null ? null : ctx_r1.config.colConfig[i_r12].style.justifyContent : (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].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.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].type) !== "custom");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r11] == null ? null : ctx_r1.config.colConfig[i_r11].type) === "custom");
+    i0.ɵɵproperty("ngIf", (ctx_r1.config.colConfig[i_r12] == null ? null : ctx_r1.config.colConfig[i_r12].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.ɵɵelementStart(1, "div", 34);
     i0.ɵɵtext(2, " Loading... ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -537,7 +686,7 @@ function TableComponent_div_7_div_3_ng_container_1_Template(rf, ctx) { if (rf &
 } }
 function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 32);
+    i0.ɵɵelementStart(1, "div", 34);
     i0.ɵɵtext(2, " No Data Available... ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -547,7 +696,7 @@ function TableComponent_div_7_div_3_ng_container_2_Template(rf, ctx) { if (rf &
 } }
 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.ɵɵelement(1, "sub-table", 35);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -555,8 +704,8 @@ function TableComponent_div_7_div_3_ng_container_3_Template(rf, ctx) { if (rf &
     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.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtemplate(1, TableComponent_div_7_div_3_ng_container_1_Template, 3, 2, "ng-container", 16)(2, TableComponent_div_7_div_3_ng_container_2_Template, 3, 2, "ng-container", 16)(3, TableComponent_div_7_div_3_ng_container_3_Template, 2, 2, "ng-container", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -568,40 +717,40 @@ function TableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
     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);
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26);
+    i0.ɵɵlistener("click", function TableComponent_div_7_Template_div_click_1_listener() { const i_r8 = i0.ɵɵrestoreView(_r7).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectRow(i_r8)); });
+    i0.ɵɵtemplate(2, TableComponent_div_7_div_2_Template, 4, 14, "div", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 26);
+    i0.ɵɵtemplate(3, TableComponent_div_7_div_3_Template, 4, 3, "div", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r13 = ctx.$implicit;
-    const i_r7 = ctx.index;
+    const row_r14 = ctx.$implicit;
+    const i_r8 = 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.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c6, ctx_r1.config.cellHover, i_r8 === 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.ɵɵproperty("ngForOf", row_r14);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r7);
+    i0.ɵɵproperty("ngIf", (ctx_r1.config == null ? null : ctx_r1.config.canExpand) && ctx_r1.expandedIndex === i_r8);
 } }
 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)); });
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵlistener("click", function TableComponent_div_8_div_7_span_1_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r16); const pageNumber_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updateSelectedPage(pageNumber_r17)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pageNumber_r16 = i0.ɵɵnextContext().$implicit;
+    const pageNumber_r17 = 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.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c14, pageNumber_r17 == (ctx_r1.config.paginationConfig == null ? null : ctx_r1.config.paginationConfig.selectedPage)));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pageNumber_r16);
+    i0.ɵɵtextInterpolate(pageNumber_r17);
 } }
 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.ɵɵelementStart(0, "span", 47)(1, "div", 34);
+    i0.ɵɵelement(2, "span", 48)(3, "span", 48)(4, "span", 49);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -613,33 +762,33 @@ function TableComponent_div_8_div_7_span_2_Template(rf, ctx) { if (rf & 1) {
 } }
 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.ɵɵtemplate(1, TableComponent_div_8_div_7_span_1_Template, 2, 4, "span", 44)(2, TableComponent_div_8_div_7_span_2_Template, 5, 6, "span", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pageNumber_r16 = ctx.$implicit;
+    const pageNumber_r17 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", pageNumber_r16 != 0);
+    i0.ɵɵproperty("ngIf", pageNumber_r17 != 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", pageNumber_r16 == 0);
+    i0.ɵɵproperty("ngIf", pageNumber_r17 == 0);
 } }
 function TableComponent_div_8_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "p", 35);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36)(1, "p", 37);
     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.ɵɵelementStart(3, "div", 38)(4, "span", 39);
+    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r15); 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.ɵɵelementStart(5, "svg", 40);
+    i0.ɵɵelement(6, "path", 41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, TableComponent_div_8_div_7_Template, 3, 2, "div", 40);
+    i0.ɵɵtemplate(7, TableComponent_div_8_div_7_Template, 3, 2, "div", 42);
     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.ɵɵelementStart(8, "span", 39);
+    i0.ɵɵlistener("click", function TableComponent_div_8_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r15); 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.ɵɵelementStart(9, "svg", 40);
+    i0.ɵɵelement(10, "path", 43);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -665,6 +814,10 @@ class TableComponent {
         this.pageSelected = new EventEmitter();
         this.tableData = [];
         this.subTableData = [];
+        // Sorting related properties
+        this.currentSort = null;
+        this.multiColumnSort = [];
+        this.sortChange = new EventEmitter();
     }
     // Function to handle row click
     selectRow(index) {
@@ -816,6 +969,24 @@ class TableComponent {
             'font-size': fontSize
         };
     }
+    onSortChange(sortState) {
+        this.currentSort = sortState;
+        if (this.config.multiColumnSort) {
+            const index = this.multiColumnSort.findIndex(sort => sort.column === sortState.column);
+            if (index !== -1) {
+                if (sortState.direction === null) {
+                    this.multiColumnSort.splice(index, 1);
+                }
+                else {
+                    this.multiColumnSort[index] = sortState;
+                }
+            }
+            else if (sortState.direction !== null) {
+                this.multiColumnSort.push(sortState);
+            }
+        }
+        this.sortChange.emit(sortState);
+    }
     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);
@@ -826,11 +997,11 @@ class TableComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filter = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.colHeaders = _t);
-        } }, inputs: { config: [0, "tableConfig", "config"], subTableconfig: "subTableconfig", tableDataLoading: "tableDataLoading", expandedIndex: "expandedIndex", tableData: "tableData", subTableData: "subTableData", subTableDataLoading: "subTableDataLoading" }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected" }, 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) {
+        } }, inputs: { config: [0, "tableConfig", "config"], subTableconfig: "subTableconfig", tableDataLoading: "tableDataLoading", expandedIndex: "expandedIndex", tableData: "tableData", subTableData: "subTableData", subTableDataLoading: "subTableDataLoading" }, outputs: { filtersUpdated: "filtersUpdated", pageSelected: "pageSelected", sortChange: "sortChange" }, 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"], ["appSortIcons", "", "class", "sort-icon", 3, "column", "activeSort", "activeSorts", "multiColumnSort", "sortChange", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], [1, "filter-icon", 3, "click"], ["id", "filter-active", 4, "ngIf"], ["fill", "none", "height", "10", "viewBox", "0 0 13 10", "width", "13", "xmlns", "http://www.w3.org/2000/svg"], ["clip-rule", "evenodd", "d", "M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z", "fill", "#181F33", "fill-rule", "evenodd"], ["id", "filter-active"], ["appSortIcons", "", 1, "sort-icon", 3, "sortChange", "column", "activeSort", "activeSorts", "multiColumnSort"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper"], [1, "t-row", 3, "click", "ngClass", "ngStyle"], ["class", "t-col-container", 3, "ngStyle", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "sub-row", 4, "ngIf"], [1, "t-col-container", 3, "click", "ngStyle", "ngClass"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", "ngClass", 4, "ngIf"], [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.ɵɵtemplate(5, TableComponent_div_5_Template, 6, 9, "div", 7);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "div", 8);
             i0.ɵɵtemplate(7, TableComponent_div_7_Template, 4, 9, "div", 9);
@@ -851,11 +1022,11 @@ class TableComponent {
             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}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, SubTableComponent, TableFilterComponent, CustomTableCellDirective, SortIconsDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container[_ngcontent-%COMP%]{display:flex;align-items:center;position:sticky;background-color:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #e0e0e0;top:0;left:0;right:0}.col-header[_ngcontent-%COMP%]{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.sort-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.filter-icon[_ngcontent-%COMP%]{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active[_ngcontent-%COMP%]{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row[_ngcontent-%COMP%]{height:auto;border-bottom:none}.loader[_ngcontent-%COMP%]     .mat-progress-spinner circle, .mat-spinner[_ngcontent-%COMP%]   circle[_ngcontent-%COMP%]{stroke:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;overflow-wrap:anywhere}.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}.sort-icon[_ngcontent-%COMP%]{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:16px;height:16px;transition:opacity .2s ease}.sort-icon[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]:hover{opacity:.8}"] }); }
 }
 (() => { (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"] }]
+        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        <span *ngIf=\"colHeader?.isSortable && !colHeader?.filters\" appSortIcons\n          [column]=\"colHeader\"\n          [activeSort]=\"currentSort\"\n          [activeSorts]=\"multiColumnSort\"\n          [multiColumnSort]=\"config.multiColumnSort\"\n          (sortChange)=\"onSortChange($event)\"\n          class=\"sort-icon\">\n        </span>\n      <ng-template *ngIf=\"colHeader?.type === 'custom'\" customTableCell [customComponent]=\"colHeader?.componentRef\" [data]=\"colHeader.data\"></ng-template>\n      </div>\n    </div>\n    <div id=\"data-container\">\n      <div class=\"row-wrapper\" *ngFor=\"let row of tableData; let i = index\">\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}.sort-icon{display:flex;justify-content:center;align-items:center}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.t-col-container{padding:0 16px;overflow-wrap:anywhere}.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}.sort-icon{display:inline-flex;align-items:center;margin-left:4px;cursor:pointer}.sort-icon img{width:16px;height:16px;transition:opacity .2s ease}.sort-icon img:hover{opacity:.8}\n"] }]
     }], () => [{ type: i0.Renderer2 }], { filtersUpdated: [{
             type: Output
         }], filter: [{
@@ -884,6 +1055,8 @@ class TableComponent {
         }], table: [{
             type: ViewChild,
             args: ["table"]
+        }], sortChange: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TableComponent, { className: "TableComponent" }); })();
 
@@ -898,16 +1071,36 @@ class TableModule {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableModule, [{
         type: NgModule,
         args: [{
-                declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective],
+                declarations: [
+                    TableComponent,
+                    SubTableComponent,
+                    TableFilterComponent,
+                    CustomTableCellDirective,
+                    SortIconsDirective
+                ],
                 imports: [CommonModule, CheckboxModule, ScrollingModule],
-                exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective]
+                exports: [
+                    TableComponent,
+                    SubTableComponent,
+                    TableFilterComponent,
+                    CustomTableCellDirective,
+                    SortIconsDirective
+                ]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TableModule, { declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective], imports: [CommonModule, CheckboxModule, ScrollingModule], exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TableModule, { declarations: [TableComponent,
+        SubTableComponent,
+        TableFilterComponent,
+        CustomTableCellDirective,
+        SortIconsDirective], imports: [CommonModule, CheckboxModule, ScrollingModule], exports: [TableComponent,
+        SubTableComponent,
+        TableFilterComponent,
+        CustomTableCellDirective,
+        SortIconsDirective] }); })();
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CustomTableCellDirective, SubTableComponent, TableComponent, TableFilterComponent, TableModule };
+export { CustomTableCellDirective, SortIconsDirective, SubTableComponent, TableComponent, TableFilterComponent, TableModule };
 //# sourceMappingURL=mis-crystal-design-system-table.mjs.map