mis-crystal-design-system 2.3.3 → 2.3.7

package/fesm2015/mis-crystal-design-system-widgets.js

@@ -0,0 +1,122 @@
+import { ReplaySubject, Subject } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class BaseWidget {
+    constructor(data, customStates = []) {
+        // Get loader stream
+        this.loader$ = new ReplaySubject(1);
+        this.loader = this.loader$.asObservable();
+        this.state = {};
+        // reset data/stream
+        this.reset$ = new Subject();
+        this.customStates = customStates;
+    }
+    // Toggle loader with value
+    toggleLoader(value) {
+        this.loader$.next(value);
+    }
+    // Trigger widget refresh
+    reset() {
+        this.reset$.next();
+    }
+    updateValue(data) { }
+    updateCustomStates(customStates, value) {
+        if (customStates.length > 0) {
+            customStates.forEach(customState => {
+                this.state = Object.assign(Object.assign({}, this.state), customState(value));
+            });
+        }
+        else {
+            this.state = {};
+        }
+    }
+}
+
+class SyncWidget extends BaseWidget {
+    // @param dataStream: Stream to subscribe to when widget refreshed
+    constructor(data, customStates = []) {
+        super(data, customStates);
+        if (data) {
+            this.value = data;
+        }
+    }
+    // Change data value
+    updateValue(value) {
+        this.value = value;
+        this.updateCustomStates(this.customStates, value);
+    }
+    reset() {
+        super.reset();
+        this.value = null;
+    }
+}
+
+// Data type that the stream will return
+class AsyncWidget extends BaseWidget {
+    // @param dataStream: Stream to subscribe to when widget refreshed
+    constructor(dataStream, customStates = []) {
+        super(dataStream, customStates);
+        if (dataStream) {
+            this.updateValue(dataStream);
+        }
+    }
+    // Change widget data stream
+    updateValue(dataStream) {
+        this.value = this.reset$.pipe(switchMap(() => {
+            this.toggleLoader(true);
+            return dataStream.pipe(tap(() => {
+                this.toggleLoader(false);
+            }), tap((value) => this.updateCustomStates(this.customStates, value)));
+        }));
+    }
+}
+
+class WidgetGroup extends BaseWidget {
+    constructor(widgets) {
+        super();
+        this.items = new Map();
+        Object.keys(widgets).forEach(key => {
+            this.addWidget(key, widgets[key]);
+        });
+    }
+    get value() {
+        const keys = Array.from(this.items.keys());
+        return keys.reduce((acc, key) => {
+            return Object.assign(Object.assign({}, acc), { [key]: this.get(key).value });
+        }, {});
+    }
+    get widgets() {
+        return Array.from(this.items.values());
+    }
+    addWidget(key, widget) {
+        this.items.set(key, widget);
+    }
+    get(key) {
+        return this.items.get(key);
+    }
+    removeWidget(key) {
+        this.items.delete(key);
+    }
+    reset() {
+        this.widgets.forEach(widget => widget.reset());
+    }
+}
+
+class WidgetsModule {
+}
+WidgetsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [],
+                imports: [CommonModule],
+                providers: []
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AsyncWidget, BaseWidget, SyncWidget, WidgetGroup, WidgetsModule };
+//# sourceMappingURL=mis-crystal-design-system-widgets.js.map

package/fesm2015/mis-crystal-design-system-widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-widgets.js","sources":["../../../projects/mis-components/widgets/classes/base-widget.ts","../../../projects/mis-components/widgets/classes/sync-widget.ts","../../../projects/mis-components/widgets/classes/async-widget.ts","../../../projects/mis-components/widgets/classes/widget-group.ts","../../../projects/mis-components/widgets/widgets.module.ts","../../../projects/mis-components/widgets/mis-crystal-design-system-widgets.ts"],"sourcesContent":["import { ReplaySubject, Subject } from \"rxjs\";\nimport { CustomState, WidgetStateMap } from \"../interfaces/widgets.model\";\n\nexport class BaseWidget<D> {\n  // Get loader stream\n  private loader$ = new ReplaySubject<boolean>(1);\n  loader = this.loader$.asObservable();\n  protected customStates: Array<CustomState<D>>;\n  state: WidgetStateMap = {};\n\n  constructor(data?: unknown, customStates: Array<CustomState<D>> = []) {\n    this.customStates = customStates;\n  }\n\n  // Toggle loader with value\n  toggleLoader(value: boolean): void {\n    this.loader$.next(value);\n  }\n  // reset data/stream\n  protected reset$ = new Subject<void>();\n\n  // Trigger widget refresh\n  reset(): void {\n    this.reset$.next();\n  }\n\n  updateValue(data: unknown): void {}\n\n  protected updateCustomStates(customStates: Array<CustomState<D>>, value: D): void {\n    if (customStates.length > 0) {\n      customStates.forEach(customState => {\n        this.state = { ...this.state, ...customState(value) };\n      });\n    } else {\n      this.state = {};\n    }\n  }\n}\n","import { CustomState } from \"../interfaces/widgets.model\";\nimport { BaseWidget } from \"./base-widget\";\n\nexport class SyncWidget<D = any> extends BaseWidget<D> {\n  // DataObject with widget functionalities\n  value: D;\n\n  // @param dataStream: Stream to subscribe to when widget refreshed\n  constructor(data?: D, customStates: Array<CustomState<D>> = []) {\n    super(data, customStates);\n    if (data) {\n      this.value = data;\n    }\n  }\n\n  // Change data value\n  updateValue(value: D): void {\n    this.value = value;\n    this.updateCustomStates(this.customStates, value);\n  }\n\n  reset(): void {\n    super.reset();\n    this.value = null;\n  }\n}\n","import { Observable } from \"rxjs\";\nimport { tap, switchMap } from \"rxjs/operators\";\nimport { CustomState, WidgetStateMap } from \"../interfaces/widgets.model\";\nimport { BaseWidget } from \"./base-widget\";\n// Data type that the stream will return\nexport class AsyncWidget<D = any> extends BaseWidget<D> {\n  // Stream with widget functionalities\n  value: Observable<D>;\n\n  // @param dataStream: Stream to subscribe to when widget refreshed\n  constructor(dataStream?: Observable<D>, customStates: Array<CustomState<D>> = []) {\n    super(dataStream, customStates);\n    if (dataStream) {\n      this.updateValue(dataStream);\n    }\n  }\n\n  // Change widget data stream\n  updateValue(dataStream: Observable<D>): void {\n    this.value = this.reset$.pipe(\n      switchMap(() => {\n        this.toggleLoader(true);\n        return dataStream.pipe(\n          tap(() => {\n            this.toggleLoader(false);\n          }),\n          tap((value: D) => this.updateCustomStates(this.customStates, value))\n        );\n      })\n    );\n  }\n}\n","import { BaseWidget } from \"./base-widget\";\nimport { WidgetMap } from \"../interfaces/widgets.model\";\nimport { AsyncWidget } from \"./async-widget\";\nimport { SyncWidget } from \"./sync-widget\";\n\nexport class WidgetGroup extends BaseWidget<any> {\n  private items = new Map<string, SyncWidget | AsyncWidget | WidgetGroup>();\n\n  constructor(widgets: WidgetMap) {\n    super();\n    Object.keys(widgets).forEach(key => {\n      this.addWidget(key, widgets[key]);\n    });\n  }\n\n  get value(): { [key: string]: any } {\n    const keys = Array.from(this.items.keys());\n    return keys.reduce((acc, key) => {\n      return { ...acc, [key]: this.get(key).value };\n    }, {});\n  }\n\n  get widgets() {\n    return Array.from(this.items.values());\n  }\n\n  addWidget(key: string, widget: SyncWidget | AsyncWidget): void {\n    this.items.set(key, widget);\n  }\n\n  get(key: string): SyncWidget | AsyncWidget | WidgetGroup {\n    return this.items.get(key);\n  }\n\n  removeWidget(key: string): void {\n    this.items.delete(key);\n  }\n\n  reset(): void {\n    this.widgets.forEach(widget => widget.reset());\n  }\n}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { WidgetService } from \"./services/widget.service\";\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule],\n  providers: []\n})\nexport class WidgetsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAGa,UAAU;IAOrB,YAAY,IAAc,EAAE,eAAsC,EAAE;;QAL5D,YAAO,GAAG,IAAI,aAAa,CAAU,CAAC,CAAC,CAAC;QAChD,WAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;QAErC,UAAK,GAAmB,EAAE,CAAC;;QAWjB,WAAM,GAAG,IAAI,OAAO,EAAQ,CAAC;QARrC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KAClC;;IAGD,YAAY,CAAC,KAAc;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B;;IAKD,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;IAED,WAAW,CAAC,IAAa,KAAU;IAEzB,kBAAkB,CAAC,YAAmC,EAAE,KAAQ;QACxE,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,YAAY,CAAC,OAAO,CAAC,WAAW;gBAC9B,IAAI,CAAC,KAAK,mCAAQ,IAAI,CAAC,KAAK,GAAK,WAAW,CAAC,KAAK,CAAC,CAAE,CAAC;aACvD,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;SACjB;KACF;;;MCjCU,UAAoB,SAAQ,UAAa;;IAKpD,YAAY,IAAQ,EAAE,eAAsC,EAAE;QAC5D,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAC1B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;KACF;;IAGD,WAAW,CAAC,KAAQ;QAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;KACnD;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;;;ACpBH;MACa,WAAqB,SAAQ,UAAa;;IAKrD,YAAY,UAA0B,EAAE,eAAsC,EAAE;QAC9E,KAAK,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QAChC,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;SAC9B;KACF;;IAGD,WAAW,CAAC,UAAyB;QACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAC3B,SAAS,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACxB,OAAO,UAAU,CAAC,IAAI,CACpB,GAAG,CAAC;gBACF,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC1B,CAAC,EACF,GAAG,CAAC,CAAC,KAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CACrE,CAAC;SACH,CAAC,CACH,CAAC;KACH;;;MCzBU,WAAY,SAAQ,UAAe;IAG9C,YAAY,OAAkB;QAC5B,KAAK,EAAE,CAAC;QAHF,UAAK,GAAG,IAAI,GAAG,EAAkD,CAAC;QAIxE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG;YAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;SACnC,CAAC,CAAC;KACJ;IAED,IAAI,KAAK;QACP,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG;YAC1B,uCAAY,GAAG,KAAE,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,IAAG;SAC/C,EAAE,EAAE,CAAC,CAAC;KACR;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;KACxC;IAED,SAAS,CAAC,GAAW,EAAE,MAAgC;QACrD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;KAC7B;IAED,GAAG,CAAC,GAAW;QACb,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,YAAY,CAAC,GAAW;QACtB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;KACxB;IAED,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;KAChD;;;MC/BU,aAAa;;;YALzB,QAAQ,SAAC;gBACR,YAAY,EAAE,EAAE;gBAChB,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,EAAE;aACd;;;ACRD;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "2.3.3",
+  "version": "2.3.7",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

package/table/mis-crystal-design-system-table.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"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 ? colHeader?.style?.justifyContent :\n                              colHeader.type === 'number'\n                              ? 'flex-end'\n                              : 'space-between'\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 [minBufferPx]=\"config.dataContainerMaxHeight || '400'\" [maxBufferPx]=\"config.dataContainerMaxHeight + 200 || '600'\" [style.overflow]=\"'overlay'\" [style.height]=\"config.dataContainerMaxHeight || '400px'\" itemSize=\"50\" id=\"data-container\">\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)=\"\n                config?.colConfig[i]?.action\n                  ? config?.colConfig[i]?.action(col)\n                  : null\n              \"\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 ? config.colConfig[i]?.style?.justifyContent :\n                                    config.colConfig[i].type === 'number'\n                                    ? 'flex-end'\n                                    : 'space-between'\n              }\">\n                <p\n                  *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                  [ngStyle]=\"{\n                  color: config?.colConfig[i]?.style?.color\n                    ? config?.colConfig[i]?.style?.color\n                    : ''\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;padding:0 16px}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;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{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;letter-spacing:.2px;margin:0}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"tableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["table"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":22,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getContainerHeight":[{"__symbolic":"method"}],"getContainerWidth":[{"__symbolic":"method"}],"getColHeadersRowHeight":[{"__symbolic":"method"}],"getColHeadersRowBorderTop":[{"__symbolic":"method"}],"getColHeadersRowBorderBottom":[{"__symbolic":"method"}]}},"TableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"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 #table id=\"table-container\" [ngClass]=\"{ 'scrollbar': expandedIndex < 0, 'no-scrollbar': !(expandedIndex < 0), 'scroll-horizontally': config.canScrollHorizontally }\">\n    <div\n      [ngStyle]=\"{\n        'min-height': getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\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 ? colHeader?.style?.justifyContent :\n                                colHeader.type === 'number'\n                                ? 'flex-end'\n                                : 'space-between'\n          }\">\n        <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <span\n          (click)=\"\n            filterData = colHeader.filters;\n            toggleFilter(colHeader.data);\n            $event.stopPropagation()\n          \"\n          *ngIf=\"\n            colHeader?.type !== 'custom' &&\n            colHeader?.filters &&\n            colHeader?.filters?.length > 0\n          \"\n          class=\"filter-icon\"\n        >\n          <span *ngIf=\"appliedFilters[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n          <svg\n            fill=\"none\"\n            height=\"10\"\n            viewBox=\"0 0 13 10\"\n            width=\"13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\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 class=\"t-row\" [ngStyle]=\"{'min-height': (config?.rowConfig?.height) ? config.rowConfig.height: '44px'}\">\n          <div\n            (click)=\"\n              config?.colConfig[i]?.action\n                ? config?.colConfig[i]?.action(col)\n                : null\n            \"\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 ? config.colConfig[i]?.style?.justifyContent :\n                                  config.colConfig[i].type === 'number'\n                                  ? 'flex-end'\n                                  : 'space-between'\n            }\">\n              <p\n                *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                [ngStyle]=\"{\n                color: config?.colConfig[i]?.style?.color\n                  ? config?.colConfig[i]?.style?.color\n                  : ''\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\n              style=\"\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: 16px;\n              \"\n            >\n              Loading...\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n            <div\n              style=\"\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: 16px;\n              \"\n            >\n              No Data Available...\n            </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 *ngIf=\"config?.paginationConfig\" id=\"pagination-container\">\n    <p id=\"pagination-text\">\n      Showing\n      {{ (selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n      (selectedPage - 1) * config.paginationConfig.rowsPerPage +\n      tableData.length\n      }}\n      of {{ config.paginationConfig.totalNoOfRows }} items\n    </p>\n    <div id=\"pages-container\">\n      <span (click)=\"updateSelectedPage(selectedPage - 1)\" class=\"page\">\n        <svg\n          fill=\"none\"\n          height=\"10\"\n          viewBox=\"0 0 7 10\"\n          width=\"7\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\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 == 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(selectedPage + 1)\" class=\"page\">\n        <svg\n          fill=\"none\"\n          height=\"10\"\n          viewBox=\"0 0 7 10\"\n          width=\"7\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\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}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:-webkit-sticky;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;height:100%}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;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;align-items:center;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;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{border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;cursor:pointer}.page,.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}"]}]}],"members":{"filtersUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["filter"]}]}],"colHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":33,"character":3},"arguments":["colHeaderRef"]}]}],"pageSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["tableConfig"]}]}],"subTableconfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"tableDataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"expandedIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"tableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"subTableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"subTableDataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":["table"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":50,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"initializeFilters":[{"__symbolic":"method"}],"toggleFilter":[{"__symbolic":"method"}],"updateAppliedFilters":[{"__symbolic":"method"}],"initializePagination":[{"__symbolic":"method"}],"updateSelectedPage":[{"__symbolic":"method"}],"getContainerHeight":[{"__symbolic":"method"}],"getContainerWidth":[{"__symbolic":"method"}],"getColHeadersRowHeight":[{"__symbolic":"method"}],"getColHeadersRowBorderTop":[{"__symbolic":"method"}],"getColHeadersRowBorderBottom":[{"__symbolic":"method"}]}},"CustomTableCellDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[customTableCell]"}]}],"members":{"customComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":26,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":27,"character":38}]}],"createComponent":[{"__symbolic":"method"}],"setData":[{"__symbolic":"method"}]}},"TableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TableComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"TableFilterComponent"},{"__symbolic":"reference","name":"CustomTableCellDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":19,"character":4}],"exports":[{"__symbolic":"reference","name":"TableComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"TableFilterComponent"},{"__symbolic":"reference","name":"CustomTableCellDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TableModule"},"providers":[]}}}},"TableConfig":{"__symbolic":"interface"},"PaginationConfig":{"__symbolic":"interface"},"RowConfig":{"__symbolic":"interface"},"ColHeaderConfig":{"__symbolic":"interface"},"ColConfig":{"__symbolic":"interface"},"SubTableConfig":{"__symbolic":"interface"},"SubTableColConfig":{"__symbolic":"interface"},"SubTableColHeaderConfig":{"__symbolic":"interface"},"SubTableRowConfig":{"__symbolic":"interface"},"TableFilterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-table-filter","template":"<div id=\"main-container\"\n     #mainContainer\n    [ngStyle]=\"containerStyles\"\n>\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 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\"/>\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\n                            [checked]=\"true\"\n                            [name]=\"filter.value\"\n                            (valueChange)=\"updateFilter($event)\"\n                    ></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\n                            [checked]=\"false\"\n                            [name]=\"filter.value\"\n                            (valueChange)=\"updateFilter($event)\"\n                    ></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:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);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:1px solid #000;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:1px solid #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-right:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}"]}]}],"members":{"filtersData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"containerStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"filtersApplied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["mainContainer"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"resetFilters":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"updateSearchValue":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"getFiltersBasedOnSearchValue":[{"__symbolic":"method"}],"getCheckedFilters":[{"__symbolic":"method"}]}},"Filter":{"__symbolic":"interface"}},"origins":{"ɵa":"./sub-table/sub-table.component","TableComponent":"./table.component","CustomTableCellDirective":"./custom-table-cell.directive","TableModule":"./table.module","TableConfig":"./table.component","PaginationConfig":"./table.component","RowConfig":"./table.component","ColHeaderConfig":"./table.component","ColConfig":"./table.component","SubTableConfig":"./sub-table/sub-table.component","SubTableColConfig":"./sub-table/sub-table.component","SubTableColHeaderConfig":"./sub-table/sub-table.component","SubTableRowConfig":"./sub-table/sub-table.component","TableFilterComponent":"./filter/filter.component","Filter":"./filter/filter.component"},"importAs":"mis-crystal-design-system/table"}
+{"__symbolic":"module","version":4,"metadata":{"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"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 ? colHeader?.style?.justifyContent :\n                              colHeader.type === 'number'\n                              ? 'flex-end'\n                              : 'space-between'\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 [minBufferPx]=\"config.dataContainerMaxHeight || '400'\" [maxBufferPx]=\"config.dataContainerMaxHeight + 200 || '600'\" [style.overflow]=\"'overlay'\" [style.height]=\"config.dataContainerMaxHeight || '400px'\" itemSize=\"50\" id=\"data-container\">\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)=\"\n                config?.colConfig[i]?.action\n                  ? config?.colConfig[i]?.action(col)\n                  : null\n              \"\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 ? config.colConfig[i]?.style?.justifyContent :\n                                    config.colConfig[i].type === 'number'\n                                    ? 'flex-end'\n                                    : 'space-between'\n              }\">\n                <p\n                  *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                  [ngStyle]=\"{\n                  color: config?.colConfig[i]?.style?.color\n                    ? config?.colConfig[i]?.style?.color\n                    : ''\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;padding:0 16px}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;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{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;letter-spacing:.2px;margin:0}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"tableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["table"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":22,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getContainerHeight":[{"__symbolic":"method"}],"getContainerWidth":[{"__symbolic":"method"}],"getColHeadersRowHeight":[{"__symbolic":"method"}],"getColHeadersRowBorderTop":[{"__symbolic":"method"}],"getColHeadersRowBorderBottom":[{"__symbolic":"method"}]}},"TableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"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 #table id=\"table-container\" [ngClass]=\"{ 'no-scrollbar': expandedIndex < 0, 'scrollbar': !(expandedIndex < 0), 'scroll-horizontally': config.canScrollHorizontally }\">\n    <div\n      [ngStyle]=\"{\n        'min-height': getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\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 ? colHeader?.style?.justifyContent :\n                                colHeader.type === 'number'\n                                ? 'flex-end'\n                                : 'space-between'\n          }\">\n        <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <span\n          (click)=\"\n            filterData = colHeader.filters;\n            toggleFilter(colHeader.data);\n            $event.stopPropagation()\n          \"\n          *ngIf=\"\n            colHeader?.type !== 'custom' &&\n            colHeader?.filters &&\n            colHeader?.filters?.length > 0\n          \"\n          class=\"filter-icon\"\n        >\n          <span *ngIf=\"appliedFilters[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n          <svg\n            fill=\"none\"\n            height=\"10\"\n            viewBox=\"0 0 13 10\"\n            width=\"13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\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 class=\"t-row\" [ngStyle]=\"{'min-height': (config?.rowConfig?.height) ? config.rowConfig.height: '44px'}\">\n          <div\n            (click)=\"\n              config?.colConfig[i]?.action\n                ? config?.colConfig[i]?.action(col)\n                : null\n            \"\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 ? config.colConfig[i]?.style?.justifyContent :\n                                  config.colConfig[i].type === 'number'\n                                  ? 'flex-end'\n                                  : 'space-between'\n            }\">\n              <p\n                *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                [ngStyle]=\"{\n                color: config?.colConfig[i]?.style?.color\n                  ? config?.colConfig[i]?.style?.color\n                  : ''\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\n              style=\"\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: 16px;\n              \"\n            >\n              Loading...\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n            <div\n              style=\"\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: 16px;\n              \"\n            >\n              No Data Available...\n            </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 *ngIf=\"config?.paginationConfig\" id=\"pagination-container\">\n    <p id=\"pagination-text\">\n      Showing\n      {{ (selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n      (selectedPage - 1) * config.paginationConfig.rowsPerPage +\n      tableData.length\n      }}\n      of {{ config.paginationConfig.totalNoOfRows }} items\n    </p>\n    <div id=\"pages-container\">\n      <span (click)=\"updateSelectedPage(selectedPage - 1)\" class=\"page\">\n        <svg\n          fill=\"none\"\n          height=\"10\"\n          viewBox=\"0 0 7 10\"\n          width=\"7\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\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 == 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(selectedPage + 1)\" class=\"page\">\n        <svg\n          fill=\"none\"\n          height=\"10\"\n          viewBox=\"0 0 7 10\"\n          width=\"7\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\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:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:-webkit-sticky;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;height:100%}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;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;align-items:center;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;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{border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;cursor:pointer}.page,.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}"]}]}],"members":{"filtersUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["filter"]}]}],"colHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":33,"character":3},"arguments":["colHeaderRef"]}]}],"pageSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["tableConfig"]}]}],"subTableconfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"tableDataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"expandedIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"tableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"subTableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"subTableDataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":["table"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":50,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"initializeFilters":[{"__symbolic":"method"}],"toggleFilter":[{"__symbolic":"method"}],"updateAppliedFilters":[{"__symbolic":"method"}],"initializePagination":[{"__symbolic":"method"}],"updateSelectedPage":[{"__symbolic":"method"}],"getContainerHeight":[{"__symbolic":"method"}],"getContainerWidth":[{"__symbolic":"method"}],"getColHeadersRowHeight":[{"__symbolic":"method"}],"getColHeadersRowBorderTop":[{"__symbolic":"method"}],"getColHeadersRowBorderBottom":[{"__symbolic":"method"}]}},"CustomTableCellDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[customTableCell]"}]}],"members":{"customComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":26,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":27,"character":38}]}],"createComponent":[{"__symbolic":"method"}],"setData":[{"__symbolic":"method"}]}},"TableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TableComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"TableFilterComponent"},{"__symbolic":"reference","name":"CustomTableCellDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":19,"character":4}],"exports":[{"__symbolic":"reference","name":"TableComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"TableFilterComponent"},{"__symbolic":"reference","name":"CustomTableCellDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TableModule"},"providers":[]}}}},"TableConfig":{"__symbolic":"interface"},"PaginationConfig":{"__symbolic":"interface"},"RowConfig":{"__symbolic":"interface"},"ColHeaderConfig":{"__symbolic":"interface"},"ColConfig":{"__symbolic":"interface"},"SubTableConfig":{"__symbolic":"interface"},"SubTableColConfig":{"__symbolic":"interface"},"SubTableColHeaderConfig":{"__symbolic":"interface"},"SubTableRowConfig":{"__symbolic":"interface"},"TableFilterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-table-filter","template":"<div id=\"main-container\"\n     #mainContainer\n    [ngStyle]=\"containerStyles\"\n>\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 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\"/>\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\n                            [checked]=\"true\"\n                            [name]=\"filter.value\"\n                            (valueChange)=\"updateFilter($event)\"\n                    ></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\n                            [checked]=\"false\"\n                            [name]=\"filter.value\"\n                            (valueChange)=\"updateFilter($event)\"\n                    ></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:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);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:1px solid #000;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:1px solid #0937b2}#search-icon{position:absolute;top:15px;left:12px}.filters-sub-container{max-height:144px;overflow-y:auto}.filter{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}"]}]}],"members":{"filtersData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"containerStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"filtersApplied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["mainContainer"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"resetFilters":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"updateSearchValue":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"getFiltersBasedOnSearchValue":[{"__symbolic":"method"}],"getCheckedFilters":[{"__symbolic":"method"}]}},"Filter":{"__symbolic":"interface"}},"origins":{"ɵa":"./sub-table/sub-table.component","TableComponent":"./table.component","CustomTableCellDirective":"./custom-table-cell.directive","TableModule":"./table.module","TableConfig":"./table.component","PaginationConfig":"./table.component","RowConfig":"./table.component","ColHeaderConfig":"./table.component","ColConfig":"./table.component","SubTableConfig":"./sub-table/sub-table.component","SubTableColConfig":"./sub-table/sub-table.component","SubTableColHeaderConfig":"./sub-table/sub-table.component","SubTableRowConfig":"./sub-table/sub-table.component","TableFilterComponent":"./filter/filter.component","Filter":"./filter/filter.component"},"importAs":"mis-crystal-design-system/table"}

package/widgets/classes/async-widget.d.ts

@@ -0,0 +1,8 @@
+import { Observable } from "rxjs";
+import { CustomState } from "../interfaces/widgets.model";
+import { BaseWidget } from "./base-widget";
+export declare class AsyncWidget<D = any> extends BaseWidget<D> {
+    value: Observable<D>;
+    constructor(dataStream?: Observable<D>, customStates?: Array<CustomState<D>>);
+    updateValue(dataStream: Observable<D>): void;
+}

package/widgets/classes/base-widget.d.ts

@@ -0,0 +1,14 @@
+import { Subject } from "rxjs";
+import { CustomState, WidgetStateMap } from "../interfaces/widgets.model";
+export declare class BaseWidget<D> {
+    private loader$;
+    loader: import("rxjs").Observable<boolean>;
+    protected customStates: Array<CustomState<D>>;
+    state: WidgetStateMap;
+    constructor(data?: unknown, customStates?: Array<CustomState<D>>);
+    toggleLoader(value: boolean): void;
+    protected reset$: Subject<void>;
+    reset(): void;
+    updateValue(data: unknown): void;
+    protected updateCustomStates(customStates: Array<CustomState<D>>, value: D): void;
+}

package/widgets/classes/sync-widget.d.ts

@@ -0,0 +1,8 @@
+import { CustomState } from "../interfaces/widgets.model";
+import { BaseWidget } from "./base-widget";
+export declare class SyncWidget<D = any> extends BaseWidget<D> {
+    value: D;
+    constructor(data?: D, customStates?: Array<CustomState<D>>);
+    updateValue(value: D): void;
+    reset(): void;
+}

package/widgets/classes/widget-group.d.ts

@@ -0,0 +1,16 @@
+import { BaseWidget } from "./base-widget";
+import { WidgetMap } from "../interfaces/widgets.model";
+import { AsyncWidget } from "./async-widget";
+import { SyncWidget } from "./sync-widget";
+export declare class WidgetGroup extends BaseWidget<any> {
+    private items;
+    constructor(widgets: WidgetMap);
+    get value(): {
+        [key: string]: any;
+    };
+    get widgets(): (AsyncWidget<any> | SyncWidget<any> | WidgetGroup)[];
+    addWidget(key: string, widget: SyncWidget | AsyncWidget): void;
+    get(key: string): SyncWidget | AsyncWidget | WidgetGroup;
+    removeWidget(key: string): void;
+    reset(): void;
+}

package/widgets/index.d.ts

@@ -0,0 +1 @@
+export * from "./public_api";

package/widgets/interfaces/widgets.model.d.ts

@@ -0,0 +1,13 @@
+import { AsyncWidget } from "../classes/async-widget";
+import { BaseWidget } from "../classes/base-widget";
+import { SyncWidget } from "../classes/sync-widget";
+export interface WidgetMap {
+    [key: string]: AsyncWidget | SyncWidget;
+}
+export interface WidgetTap {
+    (widget: BaseWidget<unknown>): void;
+}
+export declare type CustomState<D> = (data: D) => WidgetStateMap;
+export interface WidgetStateMap {
+    [key: string]: boolean;
+}

package/widgets/mis-crystal-design-system-widgets.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/widgets/mis-crystal-design-system-widgets.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"SyncWidget":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"BaseWidget"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":8,"character":21,"context":{"typeName":"D"},"module":"./classes/sync-widget"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"CustomState"}]}]}],"updateValue":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}]}},"AsyncWidget":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"BaseWidget"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Observable","module":"rxjs","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":10,"character":38,"context":{"typeName":"D"},"module":"./classes/async-widget"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"CustomState"}]}]}],"updateValue":[{"__symbolic":"method"}]}},"BaseWidget":{"__symbolic":"class","arity":1,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":10,"character":21,"module":"./classes/base-widget"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"CustomState"}]}]}],"toggleLoader":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"updateValue":[{"__symbolic":"method"}],"updateCustomStates":[{"__symbolic":"method"}]}},"WidgetGroup":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseWidget"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"WidgetMap"}]}],"addWidget":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"removeWidget":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}]}},"WidgetMap":{"__symbolic":"interface"},"WidgetTap":{"__symbolic":"interface"},"CustomState":{"__symbolic":"interface"},"WidgetStateMap":{"__symbolic":"interface"},"WidgetsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"providers":[]}]}],"members":{}}},"origins":{"SyncWidget":"./classes/sync-widget","AsyncWidget":"./classes/async-widget","BaseWidget":"./classes/base-widget","WidgetGroup":"./classes/widget-group","WidgetMap":"./interfaces/widgets.model","WidgetTap":"./interfaces/widgets.model","CustomState":"./interfaces/widgets.model","WidgetStateMap":"./interfaces/widgets.model","WidgetsModule":"./widgets.module"},"importAs":"mis-crystal-design-system/widgets"}

package/widgets/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-widgets.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-widgets.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-widgets.js",
+  "esm2015": "../esm2015/widgets/mis-crystal-design-system-widgets.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-widgets.js",
+  "typings": "mis-crystal-design-system-widgets.d.ts",
+  "metadata": "mis-crystal-design-system-widgets.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/widgets"
+}

package/widgets/public_api.d.ts

@@ -0,0 +1,6 @@
+export * from "./classes/sync-widget";
+export * from "./classes/async-widget";
+export * from "./classes/base-widget";
+export * from "./classes/widget-group";
+export * from "./interfaces/widgets.model";
+export * from "./widgets.module";

package/widgets/services/widget.service.d.ts

@@ -0,0 +1,6 @@
+export declare class WidgetService {
+    private refresh$;
+    refresh: import("rxjs").Observable<string[]>;
+    constructor();
+    refreshWidgets(types?: string[]): void;
+}

package/widgets/widgets.module.d.ts

@@ -0,0 +1,2 @@
+export declare class WidgetsModule {
+}