mis-crystal-design-system 2.5.0 → 2.5.3

package/bundles/mis-crystal-design-system-radio-button.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/radio-button/radio-button.component.ts","../../../projects/mis-components/radio-button/radio-button.module.ts"],"names":["RadioButtonComponent","this","id","name","value","disabled","formControl","FormControl","valueChange","EventEmitter","prototype","ngOnInit","onChange","event","emit","Component","args","selector","template","Input","Output","RadioButtonModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"0jBA+BE,SAAAA,IAnBSC,KAAAC,GAAsB,GAGtBD,KAAAE,KAAwB,GAGxBF,KAAAG,MAAyB,GAEzBH,KAAAI,UAAoB,EAMpBJ,KAAAK,YAA+B,IAAIC,EAAAA,YAAY,MAG9CN,KAAAO,YAAc,IAAIC,EAAAA,oBAI5BT,EAAAU,UAAAC,SAAA,aAEAX,EAAAU,UAAAE,SAAA,SAASC,GACPZ,KAAKO,YAAYM,KAAKb,KAAKK,YAAYF,iCAjC1CW,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,YACVC,SAAA,gyBAOCC,EAAAA,oBAGAA,EAAAA,qBAGAA,EAAAA,wBAEAA,EAAAA,2BAMAA,EAAAA,2BAGAC,EAAAA,2BClBH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAmBG,UAAW,8BAPpDC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC1B,GACb2B,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBAC1BC,QAAS,CAAC9B","sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';\nimport {AbstractControl, FormControl} from '@angular/forms';\n\n@Component({\n  selector: 'mis-radio',\n  templateUrl: './radio-button.component.html',\n  styleUrls: ['./radio-button.component.scss']\n})\nexport class RadioButtonComponent implements OnInit{\n\n  /** When multiple radio input fields are used\n   * an \"id\" can be given to keep track of them */\n  @Input() id: string | number = ''\n  /** Name of the attribute for which the radio\n   * selection is provided */\n  @Input() name: string | number = ''\n  /** Value of the attribute which is to be emitted\n   * when selected */\n  @Input() value: string | number = ''\n  /** Controls the state of the radio button */\n  @Input() disabled: boolean = false\n\n  /** Can be used to attach the radio input field\n   * to a reactive form by passing in a\n   * “FormControl“ Object. It can also be\n   * used to set the default attribute value */\n  @Input() formControl: AbstractControl = new FormControl(null)\n\n  /** Emits \"value\" of the radio button on selection */\n  @Output() valueChange = new EventEmitter<any>()\n\n  constructor() {\n  }\n  ngOnInit(){\n  }\n  onChange(event){\n    this.valueChange.emit(this.formControl.value)\n  }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { RadioButtonComponent } from './radio-button.component';\nimport {ReactiveFormsModule} from '@angular/forms';\n\n@NgModule({\n  declarations: [RadioButtonComponent],\n    imports: [CommonModule, ReactiveFormsModule],\n  exports: [RadioButtonComponent]\n})\nexport class RadioButtonModule {\n  static forRoot(): ModuleWithProviders<RadioButtonModule> {\n    return { ngModule: RadioButtonModule, providers: [] };\n  }\n}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/radio-button/radio-button.component.ts","../../../projects/mis-components/radio-button/radio-button.module.ts"],"names":["RadioButtonComponent","this","id","name","value","disabled","formControl","FormControl","valueChange","EventEmitter","prototype","ngOnInit","onChange","event","emit","Component","args","selector","template","Input","Output","RadioButtonModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"0jBA8BE,SAAAA,IAnBSC,KAAAC,GAAsB,GAGtBD,KAAAE,KAAwB,GAGxBF,KAAAG,MAAyB,GAEzBH,KAAAI,UAAoB,EAMpBJ,KAAAK,YAA+B,IAAIC,EAAAA,YAAY,MAG9CN,KAAAO,YAAc,IAAIC,EAAAA,oBAG5BT,EAAAU,UAAAC,SAAA,aACAX,EAAAU,UAAAE,SAAA,SAASC,GACPZ,KAAKO,YAAYM,KAAKb,KAAKK,YAAYF,iCA9B1CW,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,YACVC,SAAA,6wBAMCC,EAAAA,oBAGAA,EAAAA,qBAGAA,EAAAA,wBAEAA,EAAAA,2BAMAA,EAAAA,2BAGAC,EAAAA,2BCjBH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAmBG,UAAW,8BAPpDC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC1B,GACf2B,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBACxBC,QAAS,CAAC9B","sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n  selector: \"mis-radio\",\n  templateUrl: \"./radio-button.component.html\",\n  styleUrls: [\"./radio-button.component.scss\"]\n})\nexport class RadioButtonComponent implements OnInit {\n  /** When multiple radio input fields are used\n   * an \"id\" can be given to keep track of them */\n  @Input() id: string | number = \"\";\n  /** Name of the attribute for which the radio\n   * selection is provided */\n  @Input() name: string | number = \"\";\n  /** Value of the attribute which is to be emitted\n   * when selected */\n  @Input() value: string | number = \"\";\n  /** Controls the state of the radio button */\n  @Input() disabled: boolean = false;\n\n  /** Can be used to attach the radio input field\n   * to a reactive form by passing in a\n   * “FormControl“ Object. It can also be\n   * used to set the default attribute value */\n  @Input() formControl: AbstractControl = new FormControl(null);\n\n  /** Emits \"value\" of the radio button on selection */\n  @Output() valueChange = new EventEmitter<any>();\n\n  constructor() {}\n  ngOnInit() {}\n  onChange(event) {\n    this.valueChange.emit(this.formControl.value);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { RadioButtonComponent } from \"./radio-button.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  declarations: [RadioButtonComponent],\n  imports: [CommonModule, ReactiveFormsModule],\n  exports: [RadioButtonComponent]\n})\nexport class RadioButtonModule {\n  static forRoot(): ModuleWithProviders<RadioButtonModule> {\n    return { ngModule: RadioButtonModule, providers: [] };\n  }\n}\n"]}

package/bundles/mis-crystal-design-system-switch.umd.js

@@ -28,8 +28,7 @@
             enumerable: false,
             configurable: true
         });
-        SwitchComponent.prototype.ngOnInit = function () {
-        };
+        SwitchComponent.prototype.ngOnInit = function () { };
         SwitchComponent.prototype.onChange = function (event) {
             this.valueChanged.emit(this.formControl.value);
         };
@@ -37,8 +36,8 @@
     }());
     SwitchComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'mis-switch',
-                    template: "<label class=\"toggle-switch\" [ngClass]=\"{'toggle-switch-mobile': mobileView}\">\n  <input\n    type=\"checkbox\"\n    (change)=\"onChange($event)\"\n    [formControl]=\"formControl\"\n  >\n  <span class=\"slider\"></span>\n</label>\n",
+                    selector: "mis-switch",
+                    template: "<label class=\"toggle-switch\" [ngClass]=\"{ 'toggle-switch-mobile': mobileView }\">\n  <input type=\"checkbox\" (change)=\"onChange($event)\" [formControl]=\"formControl\" />\n  <span class=\"slider\"></span>\n</label>\n",
                     styles: [".toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:\"\";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:\"\";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}"]
                 },] }
     ];

package/bundles/mis-crystal-design-system-switch.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-switch.umd.js","sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts","../../../projects/mis-components/switch/mis-crystal-design-system-switch.ts"],"sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';\nimport {AbstractControl, FormControl} from '@angular/forms';\n\n@Component({\n  selector: 'mis-switch',\n  templateUrl: './switch.component.html',\n  styleUrls: ['./switch.component.scss']\n})\nexport class SwitchComponent implements OnInit{\n\n  @Input() mobileView: boolean = false\n  @Input() set checked(value: boolean){\n    this.formControl.setValue(value)\n  }\n  @Input() set disabled(value: boolean){\n    if(value) this.formControl.disable()\n    else this.formControl.enable()\n  }\n  @Input() formControl: AbstractControl = new FormControl(false)\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>()\n\n  constructor() {\n  }\n  ngOnInit() {\n  }\n  onChange(event){\n    this.valueChanged.emit(this.formControl.value)\n  }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SwitchComponent } from './switch.component';\nimport {ReactiveFormsModule} from '@angular/forms';\n\n@NgModule({\n  declarations: [SwitchComponent],\n    imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["FormControl","EventEmitter","Component","Input","Output","NgModule","CommonModule","ReactiveFormsModule"],"mappings":";;;;;;;QAuBE;YAbS,eAAU,GAAY,KAAK,CAAA;YAQ3B,gBAAW,GAAoB,IAAIA,iBAAW,CAAC,KAAK,CAAC,CAAA;;YAGpD,iBAAY,GAAG,IAAIC,iBAAY,EAAW,CAAA;SAGnD;QAbD,sBAAa,oCAAO;iBAApB,UAAqB,KAAc;gBACjC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aACjC;;;WAAA;QACD,sBAAa,qCAAQ;iBAArB,UAAsB,KAAc;gBAClC,IAAG,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA;;oBAC/B,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAA;aAC/B;;;WAAA;QAQD,kCAAQ,GAAR;SACC;QACD,kCAAQ,GAAR,UAAS,KAAK;YACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;SAC/C;;;;gBA1BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,wPAAsC;;iBAEvC;;;;6BAGEC,UAAK;0BACLA,UAAK;2BAGLA,UAAK;8BAILA,UAAK;+BAGLC,WAAM;;;;QCVT;;QACS,oBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAClD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,eAAe,CAAC;oBAC7B,OAAO,EAAE,CAACC,mBAAY,EAAEC,yBAAmB,CAAC;oBAC9C,OAAO,EAAE,CAAC,eAAe,CAAC;iBAC3B;;;ICVD;;;;;;;;;;;;;"}
+{"version":3,"file":"mis-crystal-design-system-switch.umd.js","sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts","../../../projects/mis-components/switch/mis-crystal-design-system-switch.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n  selector: \"mis-switch\",\n  templateUrl: \"./switch.component.html\",\n  styleUrls: [\"./switch.component.scss\"]\n})\nexport class SwitchComponent implements OnInit {\n  @Input() mobileView: boolean = false;\n  @Input() set checked(value: boolean) {\n    this.formControl.setValue(value);\n  }\n  @Input() set disabled(value: boolean) {\n    if (value) this.formControl.disable();\n    else this.formControl.enable();\n  }\n  @Input() formControl: AbstractControl = new FormControl(false);\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>();\n\n  constructor() {}\n  ngOnInit() {}\n  onChange(event) {\n    this.valueChanged.emit(this.formControl.value);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { SwitchComponent } from \"./switch.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  declarations: [SwitchComponent],\n  imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["FormControl","EventEmitter","Component","Input","Output","NgModule","CommonModule","ReactiveFormsModule"],"mappings":";;;;;;;QAsBE;YAbS,eAAU,GAAY,KAAK,CAAC;YAQ5B,gBAAW,GAAoB,IAAIA,iBAAW,CAAC,KAAK,CAAC,CAAC;;YAGrD,iBAAY,GAAG,IAAIC,iBAAY,EAAW,CAAC;SAErC;QAZhB,sBAAa,oCAAO;iBAApB,UAAqB,KAAc;gBACjC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAClC;;;WAAA;QACD,sBAAa,qCAAQ;iBAArB,UAAsB,KAAc;gBAClC,IAAI,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;;oBACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;aAChC;;;WAAA;QAOD,kCAAQ,GAAR,eAAa;QACb,kCAAQ,GAAR,UAAS,KAAK;YACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAChD;;;;gBAvBFC,cAAS,SAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,yOAAsC;;iBAEvC;;;;6BAEEC,UAAK;0BACLA,UAAK;2BAGLA,UAAK;8BAILA,UAAK;+BAGLC,WAAM;;;;QCTT;;QACS,oBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAClD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,eAAe,CAAC;oBAC/B,OAAO,EAAE,CAACC,mBAAY,EAAEC,yBAAmB,CAAC;oBAC5C,OAAO,EAAE,CAAC,eAAe,CAAC;iBAC3B;;;ICVD;;;;;;;;;;;;;"}

package/bundles/mis-crystal-design-system-switch.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/switch",["exports","@angular/core","@angular/forms","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].switch={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,o,i){"use strict";var n=function(){function e(){this.mobileView=!1,this.formControl=new o.FormControl(!1),this.valueChanged=new t.EventEmitter}return Object.defineProperty(e.prototype,"checked",{set:function(e){this.formControl.setValue(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){e?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.onChange=function(e){this.valueChanged.emit(this.formControl.value)},e}();n.decorators=[{type:t.Component,args:[{selector:"mis-switch",template:'<label class="toggle-switch" [ngClass]="{\'toggle-switch-mobile\': mobileView}">\n  <input\n    type="checkbox"\n    (change)="onChange($event)"\n    [formControl]="formControl"\n  >\n  <span class="slider"></span>\n</label>\n',styles:['.toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:"";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:"";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}']}]}],n.ctorParameters=function(){return[]},n.propDecorators={mobileView:[{type:t.Input}],checked:[{type:t.Input}],disabled:[{type:t.Input}],formControl:[{type:t.Input}],valueChanged:[{type:t.Output}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:t.NgModule,args:[{declarations:[n],imports:[i.CommonModule,o.ReactiveFormsModule],exports:[n]}]}],e.SwitchComponent=n,e.SwitchModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/switch",["exports","@angular/core","@angular/forms","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].switch={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,o,i){"use strict";var n=function(){function e(){this.mobileView=!1,this.formControl=new o.FormControl(!1),this.valueChanged=new t.EventEmitter}return Object.defineProperty(e.prototype,"checked",{set:function(e){this.formControl.setValue(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){e?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.onChange=function(e){this.valueChanged.emit(this.formControl.value)},e}();n.decorators=[{type:t.Component,args:[{selector:"mis-switch",template:'<label class="toggle-switch" [ngClass]="{ \'toggle-switch-mobile\': mobileView }">\n  <input type="checkbox" (change)="onChange($event)" [formControl]="formControl" />\n  <span class="slider"></span>\n</label>\n',styles:['.toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:"";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:"";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}']}]}],n.ctorParameters=function(){return[]},n.propDecorators={mobileView:[{type:t.Input}],checked:[{type:t.Input}],disabled:[{type:t.Input}],formControl:[{type:t.Input}],valueChanged:[{type:t.Output}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:t.NgModule,args:[{declarations:[n],imports:[i.CommonModule,o.ReactiveFormsModule],exports:[n]}]}],e.SwitchComponent=n,e.SwitchModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-switch.umd.min.js.map

package/bundles/mis-crystal-design-system-switch.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts"],"names":["SwitchComponent","this","mobileView","formControl","FormControl","valueChanged","EventEmitter","Object","defineProperty","prototype","value","setValue","disable","enable","ngOnInit","onChange","event","emit","Component","args","selector","template","Input","Output","SwitchModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"2iBAuBE,SAAAA,IAbSC,KAAAC,YAAsB,EAQtBD,KAAAE,YAA+B,IAAIC,EAAAA,aAAY,GAG9CH,KAAAI,aAAe,IAAIC,EAAAA,oBAV7BC,OAAAC,eAAaR,EAAAS,UAAA,UAAO,KAApB,SAAqBC,GACnBT,KAAKE,YAAYQ,SAASD,oCAE5BH,OAAAC,eAAaR,EAAAS,UAAA,WAAQ,KAArB,SAAsBC,GACjBA,EAAOT,KAAKE,YAAYS,UACtBX,KAAKE,YAAYU,0CASxBb,EAAAS,UAAAK,SAAA,aAEAd,EAAAS,UAAAM,SAAA,SAASC,GACPf,KAAKI,aAAaY,KAAKhB,KAAKE,YAAYO,iCAzB3CQ,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,aACVC,SAAA,6nDAKCC,EAAAA,uBACAA,EAAAA,wBAGAA,EAAAA,2BAIAA,EAAAA,4BAGAC,EAAAA,2BCVH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAcG,UAAW,8BAP/CC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC7B,GACb8B,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBAC1BC,QAAS,CAACjC","sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';\nimport {AbstractControl, FormControl} from '@angular/forms';\n\n@Component({\n  selector: 'mis-switch',\n  templateUrl: './switch.component.html',\n  styleUrls: ['./switch.component.scss']\n})\nexport class SwitchComponent implements OnInit{\n\n  @Input() mobileView: boolean = false\n  @Input() set checked(value: boolean){\n    this.formControl.setValue(value)\n  }\n  @Input() set disabled(value: boolean){\n    if(value) this.formControl.disable()\n    else this.formControl.enable()\n  }\n  @Input() formControl: AbstractControl = new FormControl(false)\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>()\n\n  constructor() {\n  }\n  ngOnInit() {\n  }\n  onChange(event){\n    this.valueChanged.emit(this.formControl.value)\n  }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SwitchComponent } from './switch.component';\nimport {ReactiveFormsModule} from '@angular/forms';\n\n@NgModule({\n  declarations: [SwitchComponent],\n    imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts"],"names":["SwitchComponent","this","mobileView","formControl","FormControl","valueChanged","EventEmitter","Object","defineProperty","prototype","value","setValue","disable","enable","ngOnInit","onChange","event","emit","Component","args","selector","template","Input","Output","SwitchModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"2iBAsBE,SAAAA,IAbSC,KAAAC,YAAsB,EAQtBD,KAAAE,YAA+B,IAAIC,EAAAA,aAAY,GAG9CH,KAAAI,aAAe,IAAIC,EAAAA,oBAV7BC,OAAAC,eAAaR,EAAAS,UAAA,UAAO,KAApB,SAAqBC,GACnBT,KAAKE,YAAYQ,SAASD,oCAE5BH,OAAAC,eAAaR,EAAAS,UAAA,WAAQ,KAArB,SAAsBC,GAChBA,EAAOT,KAAKE,YAAYS,UACvBX,KAAKE,YAAYU,0CAQxBb,EAAAS,UAAAK,SAAA,aACAd,EAAAS,UAAAM,SAAA,SAASC,GACPf,KAAKI,aAAaY,KAAKhB,KAAKE,YAAYO,iCAtB3CQ,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,aACVC,SAAA,8mDAICC,EAAAA,uBACAA,EAAAA,wBAGAA,EAAAA,2BAIAA,EAAAA,4BAGAC,EAAAA,2BCTH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAcG,UAAW,8BAP/CC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC7B,GACf8B,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBACxBC,QAAS,CAACjC","sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n  selector: \"mis-switch\",\n  templateUrl: \"./switch.component.html\",\n  styleUrls: [\"./switch.component.scss\"]\n})\nexport class SwitchComponent implements OnInit {\n  @Input() mobileView: boolean = false;\n  @Input() set checked(value: boolean) {\n    this.formControl.setValue(value);\n  }\n  @Input() set disabled(value: boolean) {\n    if (value) this.formControl.disable();\n    else this.formControl.enable();\n  }\n  @Input() formControl: AbstractControl = new FormControl(false);\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>();\n\n  constructor() {}\n  ngOnInit() {}\n  onChange(event) {\n    this.valueChanged.emit(this.formControl.value);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { SwitchComponent } from \"./switch.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  declarations: [SwitchComponent],\n  imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n"]}

package/bundles/mis-crystal-design-system-table.umd.js

@@ -327,7 +327,7 @@
             this.renderer = renderer;
             // Filter related variables
             this.showFilter = false;
-            this.filterName = '';
+            this.filterName = "";
             this.filterData = [];
             this.filterContainerStyles = {};
             this.appliedFilters = {};
@@ -348,11 +348,11 @@
             if (this.config.canScrollHorizontally === undefined) {
                 this.config.canScrollHorizontally = false;
             }
-            document.addEventListener('click', function (event) {
+            document.addEventListener("click", function (event) {
                 if (_this.filter) {
                     var isCheckBoxClicked = true;
                     var targetElement = event.target;
-                    if (targetElement.className === 'checkmark') {
+                    if (targetElement.className === "checkmark") {
                         isCheckBoxClicked = true;
                         _this.showFilter = true;
                     }
@@ -366,7 +366,7 @@
         TableComponent.prototype.ngAfterViewInit = function () {
             if (this.config.paginationConfig) {
                 var height = this.table.nativeElement.offsetHeight;
-                this.renderer.setStyle(this.table.nativeElement, 'height', (height - 56) + 'px');
+                this.renderer.setStyle(this.table.nativeElement, "height", height - 56 + "px");
             }
         };
         // Filter related functions
@@ -432,12 +432,12 @@
                     finally { if (e_3) throw e_3.error; }
                 }
                 this.filterContainerStyles = {
-                    top: '44px',
-                    right: offSet > 0 ? offSet - 116 + 'px' : '12px',
+                    top: "44px",
+                    right: offSet > 0 ? offSet - 116 + "px" : "12px"
                 };
             }
             else {
-                this.filterName = '';
+                this.filterName = "";
                 this.filterData = [];
                 this.showFilter = false;
             }
@@ -491,23 +491,22 @@
             if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.height)
                 return this.config.height;
             else
-                return '';
+                return "";
         };
         TableComponent.prototype.getContainerWidth = function () {
             var _a;
             if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.width)
                 return this.config.width;
             else
-                return '';
+                return "";
         };
         // Column Headers related functions
         TableComponent.prototype.getColHeadersRowHeight = function () {
-            if (this.config.colHeadersRowConfig &&
-                this.config.colHeadersRowConfig.height) {
+            if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {
                 return this.config.colHeadersRowConfig.height;
             }
             else
-                return '44px';
+                return "44px";
         };
         TableComponent.prototype.getColHeadersRowBorderTop = function () {
             var _a, _b;
@@ -515,7 +514,7 @@
                 return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderTop;
             }
             else
-                return '';
+                return "";
         };
         TableComponent.prototype.getColHeadersRowBorderBottom = function () {
             var _a, _b;
@@ -523,14 +522,14 @@
                 return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderBottom;
             }
             else
-                return '1px solid #E0E0E0';
+                return "1px solid #E0E0E0";
         };
         return TableComponent;
     }());
     TableComponent.decorators = [
         { type: core.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 #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\" [ngClass]=\"{'t-row-hover': config.cellHover}\" [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            [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 ? 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 && ((tableLength>=config.paginationConfig.rowsPerPage) || (config.paginationConfig?.selectedPage !== 1))\" id=\"pagination-container\">\n    <p id=\"pagination-text\">\n      Showing\n      {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n      (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage +\n      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\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 == config.paginationConfig?.selectedPage }\"\n          class=\"page\"\n        >{{ pageNumber }}</span\n        >\n        <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n          <div style=\"display: flex\">\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </span>\n      </div>\n      <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage + 1)\" class=\"page\">\n        <svg\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",
+                    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]=\"{\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\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 }\"\n          [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n        >\n          <div\n            (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\n            *ngFor=\"let col of row; let i = index\"\n            [ngStyle]=\"{\n              width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n            }\"\n            class=\"t-col-container\"\n            [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\n          >\n            <div\n              class=\"t-col\"\n              [style]=\"config.colConfig[i]?.style\"\n              [ngStyle]=\"{\n                width: '100%',\n                cursor: config.colConfig[i]?.action ? 'pointer' : 'default',\n                'justify-content': config.colConfig[i]?.style?.justifyContent\n                  ? config.colConfig[i]?.style?.justifyContent\n                  : config.colConfig[i]?.type === 'number'\n                  ? 'flex-end'\n                  : 'space-between'\n              }\"\n            >\n              <p\n                *ngIf=\"config.colConfig[i]?.type !== 'custom'\"\n                [ngStyle]=\"{\n                  color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n                }\"\n                class=\"t-col-text\"\n              >\n                {{ col }}\n              </p>\n              <ng-template\n                *ngIf=\"config.colConfig[i]?.type === 'custom'\"\n                [customComponent]=\"config.colConfig[i].componentRef\"\n                [data]=\"col\"\n                customTableCell\n              ></ng-template>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"config?.canExpand && expandedIndex === i\" class=\"sub-row\">\n          <ng-container *ngIf=\"subTableDataLoading\">\n            <div style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">Loading...</div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n            <div style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">No Data Available...</div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length > 0\">\n            <sub-table [config]=\"subTableconfig\" [tableData]=\"subTableData\"></sub-table>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)\"\n    id=\"pagination-container\"\n  >\n    <p id=\"pagination-text\">\n      Showing\n      {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n        (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n      }}\n      of {{ config.paginationConfig.totalNoOfRows }} items\n    </p>\n    <div id=\"pages-container\">\n      <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage - 1)\" class=\"page\">\n        <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n            fill=\"#181F33\"\n            fill-rule=\"evenodd\"\n          />\n        </svg>\n      </span>\n      <div *ngFor=\"let pageNumber of pages\">\n        <span\n          (click)=\"updateSelectedPage(pageNumber)\"\n          *ngIf=\"pageNumber != 0\"\n          [ngClass]=\"{ 'page-active': pageNumber == config.paginationConfig?.selectedPage }\"\n          class=\"page\"\n          >{{ pageNumber }}</span\n        >\n        <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n          <div style=\"display: flex\">\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </span>\n      </div>\n      <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage + 1)\" class=\"page\">\n        <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z\"\n            fill=\"#181F33\"\n            fill-rule=\"evenodd\"\n          />\n        </svg>\n      </span>\n    </div>\n  </div>\n</div>\n",
                     styles: ["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:-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;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}.t-row-hover:hover{background-color:transparent}.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{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}"]
                 },] }
     ];
@@ -539,17 +538,17 @@
     ]; };
     TableComponent.propDecorators = {
         filtersUpdated: [{ type: core.Output }],
-        filter: [{ type: core.ViewChild, args: ['filter',] }],
-        colHeaders: [{ type: core.ViewChildren, args: ['colHeaderRef',] }],
+        filter: [{ type: core.ViewChild, args: ["filter",] }],
+        colHeaders: [{ type: core.ViewChildren, args: ["colHeaderRef",] }],
         pageSelected: [{ type: core.Output }],
-        config: [{ type: core.Input, args: ['tableConfig',] }],
+        config: [{ type: core.Input, args: ["tableConfig",] }],
         subTableconfig: [{ type: core.Input }],
         tableDataLoading: [{ type: core.Input }],
         expandedIndex: [{ type: core.Input }],
         tableData: [{ type: core.Input }],
         subTableData: [{ type: core.Input }],
         subTableDataLoading: [{ type: core.Input }],
-        table: [{ type: core.ViewChild, args: ['table',] }]
+        table: [{ type: core.ViewChild, args: ["table",] }]
     };
 
     var CustomTableCellDirective = /** @class */ (function () {
@@ -590,7 +589,7 @@
     }());
     CustomTableCellDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: '[customTableCell]',
+                    selector: "[customTableCell]"
                 },] }
     ];
     CustomTableCellDirective.ctorParameters = function () { return [
@@ -613,7 +612,7 @@
         SubTableComponent.prototype.ngAfterViewInit = function () {
             if (this.config.paginationConfig) {
                 var height = this.table.nativeElement.offsetHeight;
-                this.renderer.setStyle(this.table.nativeElement, 'height', height - 56 + 'px');
+                this.renderer.setStyle(this.table.nativeElement, "height", height - 56 + "px");
             }
         };
         // Main container related functions
@@ -621,22 +620,21 @@
             if (this.config.height)
                 return this.config.height;
             else
-                return '';
+                return "";
         };
         SubTableComponent.prototype.getContainerWidth = function () {
             if (this.config.width)
                 return this.config.width;
             else
-                return '';
+                return "";
         };
         // Column Headers related functions
         SubTableComponent.prototype.getColHeadersRowHeight = function () {
-            if (this.config.colHeadersRowConfig &&
-                this.config.colHeadersRowConfig.height) {
+            if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {
                 return this.config.colHeadersRowConfig.height;
             }
             else
-                return '44px';
+                return "44px";
         };
         SubTableComponent.prototype.getColHeadersRowBorderTop = function () {
             var _a, _b;
@@ -644,7 +642,7 @@
                 return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderTop;
             }
             else
-                return '';
+                return "";
         };
         SubTableComponent.prototype.getColHeadersRowBorderBottom = function () {
             var _a, _b;
@@ -652,14 +650,14 @@
                 return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderBottom;
             }
             else
-                return '1px solid #E0E0E0';
+                return "1px solid #E0E0E0";
         };
         return SubTableComponent;
     }());
     SubTableComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'sub-table',
-                    template: "<div\n  id=\"main-container\"\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth()\n  }\"\n>\n  <div id=\"table-container\" #table>\n    <div\n      id=\"col-headers-container\"\n      *ngIf=\"!!config.showHeader\"\n      [ngStyle]=\"{\n        height: getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\n    >\n      <div\n        class=\"col-header\"\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of config?.colHeaderConfig\"\n        [style]=\"colHeader?.style\"\n        [ngStyle]=\"{\n            width: colHeader?.style?.width || '',\n            cursor: colHeader.action ? 'pointer' : 'default',\n            'justify-content': colHeader?.style?.justifyContent ? 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",
+                    selector: "sub-table",
+                    template: "<div\n  id=\"main-container\"\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth()\n  }\"\n>\n  <div id=\"table-container\" #table>\n    <div\n      id=\"col-headers-container\"\n      *ngIf=\"!!config.showHeader\"\n      [ngStyle]=\"{\n        height: getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\n    >\n      <div\n        class=\"col-header\"\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of config?.colHeaderConfig\"\n        [style]=\"colHeader?.style\"\n        [ngStyle]=\"{\n          width: colHeader?.style?.width || '',\n          cursor: colHeader.action ? 'pointer' : 'default',\n          'justify-content': colHeader?.style?.justifyContent\n            ? colHeader?.style?.justifyContent\n            : colHeader.type === 'number'\n            ? 'flex-end'\n            : 'space-between'\n        }\"\n      >\n        <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <ng-template\n          *ngIf=\"colHeader?.type === 'custom'\"\n          customTableCell\n          [customComponent]=\"colHeader?.componentRef\"\n          [data]=\"colHeader.data\"\n        ></ng-template>\n      </div>\n    </div>\n    <div>\n      <cdk-virtual-scroll-viewport\n        [minBufferPx]=\"config.dataContainerMaxHeight || '400'\"\n        [maxBufferPx]=\"config.dataContainerMaxHeight + 200 || '600'\"\n        [style.overflow]=\"'overlay'\"\n        [style.height]=\"config.dataContainerMaxHeight || '400px'\"\n        itemSize=\"50\"\n        id=\"data-container\"\n      >\n        <div\n          class=\"row-wrapper\"\n          *cdkVirtualFor=\"let row of tableData; let i = index\"\n          [ngStyle]=\"{\n            backgroundColor: i % 2 === 0 ? '#FAFAFA' : null\n          }\"\n        >\n          <div class=\"t-row\">\n            <div\n              (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\n              *ngFor=\"let col of row; let i = index\"\n              [ngStyle]=\"{\n                width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n              }\"\n              class=\"t-col-container\"\n            >\n              <div\n                class=\"t-col\"\n                [style]=\"config.colConfig[i]?.style\"\n                [ngStyle]=\"{\n                  width: '100%',\n                  cursor: config.colConfig[i].action ? 'pointer' : 'default',\n                  'justify-content': config.colConfig[i]?.style?.justifyContent\n                    ? config.colConfig[i]?.style?.justifyContent\n                    : config.colConfig[i].type === 'number'\n                    ? 'flex-end'\n                    : 'space-between'\n                }\"\n              >\n                <p\n                  *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                  [ngStyle]=\"{\n                    color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\n                  }\"\n                  class=\"t-col-text\"\n                >\n                  {{ col }}\n                </p>\n                <ng-template\n                  *ngIf=\"config.colConfig[i].type === 'custom'\"\n                  [customComponent]=\"config.colConfig[i].componentRef\"\n                  [data]=\"col\"\n                  customTableCell\n                ></ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n",
                     styles: ["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header{height:100%;width:160px;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}"]
                 },] }
     ];
@@ -669,7 +667,7 @@
     SubTableComponent.propDecorators = {
         config: [{ type: core.Input }],
         tableData: [{ type: core.Input }],
-        table: [{ type: core.ViewChild, args: ['table',] }]
+        table: [{ type: core.ViewChild, args: ["table",] }]
     };
 
     var TableFilterComponent = /** @class */ (function () {
@@ -678,7 +676,7 @@
             this.containerStyles = {};
             this.filtersApplied = new core.EventEmitter();
             this.filtersMap = {};
-            this.searchValue = '';
+            this.searchValue = "";
             this.mySort = function (a, b) {
                 if (a.name < b.name)
                     return -1;
@@ -707,7 +705,7 @@
                 .map(function (filter) {
                 return {
                     name: filter.name,
-                    value: filter.value,
+                    value: filter.value
                 };
             });
             this.filtersApplied.emit(list);
@@ -724,23 +722,21 @@
             var _this = this;
             var list = Object.values(this.filtersMap);
             list = list.filter(function (filter) {
-                return filter.name.match(new RegExp(_this.searchValue, 'i'));
+                return filter.name.match(new RegExp(_this.searchValue, "i"));
             });
             return list.sort(this.mySort);
         };
         TableFilterComponent.prototype.getCheckedFilters = function () {
             var list = Object.values(this.filtersMap);
-            list = list
-                .filter(function (filter) { return filter.checked; })
-                .sort(this.mySort);
+            list = list.filter(function (filter) { return filter.checked; }).sort(this.mySort);
             return list;
         };
         return TableFilterComponent;
     }());
     TableFilterComponent.decorators = [
         { type: core.Component, args: [{
-                    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",
+                    selector: "mis-table-filter",
+                    template: "<div id=\"main-container\" #mainContainer [ngStyle]=\"containerStyles\">\n  <div id=\"search-bar-container\">\n    <input (keyup)=\"updateSearchValue($event)\" type=\"text\" placeholder=\"Search\" />\n    <svg id=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z\"\n        fill=\"#6A737D\"\n      />\n    </svg>\n  </div>\n  <div id=\"filters-main-container\">\n    <div class=\"filters-sub-container\">\n      <div *ngFor=\"let filter of getCheckedFilters()\">\n        <div class=\"filter\">\n          <mis-checkbox [checked]=\"true\" [name]=\"filter.value\" (valueChange)=\"updateFilter($event)\"></mis-checkbox>\n          <span class=\"filter-text\">{{ filter.name }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"separator\" style=\"margin: 16px 0px\" *ngIf=\"getCheckedFilters().length && getCheckedFilters().length < filtersData.length\"></div>\n    <div class=\"filters-sub-container\">\n      <div *ngFor=\"let filter of getFiltersBasedOnSearchValue()\">\n        <div class=\"filter\" *ngIf=\"!filter.checked\">\n          <mis-checkbox [checked]=\"false\" [name]=\"filter.value\" (valueChange)=\"updateFilter($event)\"></mis-checkbox>\n          <span class=\"filter-text\">{{ filter.name }}</span>\n        </div>\n      </div>\n      <div id=\"no-results-container\" *ngIf=\"getFiltersBasedOnSearchValue().length < 1\">\n        <span class=\"filter-text\">No matches found</span>\n      </div>\n    </div>\n    <div class=\"separator\" style=\"margin: 16px 0px\"></div>\n    <div id=\"buttons-container\">\n      <button id=\"reset-btn\" style=\"margin-right: 8px\" (click)=\"resetFilters()\">Reset</button>\n      <button id=\"apply-btn\" (click)=\"applyFilters()\">Apply</button>\n    </div>\n  </div>\n</div>\n",
                     styles: ["#main-container{position:absolute;background:#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}"]
                 },] }
     ];
@@ -749,7 +745,7 @@
         filtersData: [{ type: core.Input }],
         containerStyles: [{ type: core.Input }],
         filtersApplied: [{ type: core.Output }],
-        container: [{ type: core.ViewChild, args: ['mainContainer',] }]
+        container: [{ type: core.ViewChild, args: ["mainContainer",] }]
     };
 
     var TableModule = /** @class */ (function () {
@@ -762,23 +758,9 @@
     }());
     TableModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [
-                        TableComponent,
-                        SubTableComponent,
-                        TableFilterComponent,
-                        CustomTableCellDirective,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        checkbox.CheckboxModule,
-                        scrolling.ScrollingModule
-                    ],
-                    exports: [
-                        TableComponent,
-                        SubTableComponent,
-                        TableFilterComponent,
-                        CustomTableCellDirective
-                    ]
+                    declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective],
+                    imports: [common.CommonModule, checkbox.CheckboxModule, scrolling.ScrollingModule],
+                    exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective]
                 },] }
     ];