npm - mis-crystal-design-system - Versions diffs - 2.4.1 → 2.4.4 - Mend

mis-crystal-design-system 2.4.1 → 2.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/package.json CHANGED Viewed

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

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

	@@ -1 +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]=\"{ '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"}
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]=\"{ '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\" 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;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:#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}"]}]}],"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/table/table.component.d.ts CHANGED Viewed

@@ -56,8 +56,9 @@ export interface TableConfig {
     rowConfig: RowConfig | undefined | null;
     colHeaderConfig: Array<ColHeaderConfig>;
     colConfig: Array<ColConfig>;
-    canExpand?: boolean | false;
-    canScrollHorizontally?: boolean | false;
+    canExpand?: boolean;
+    canScrollHorizontally?: boolean;
+    cellHover?: boolean;
 }
 export interface PaginationConfig {
     noOfPages: number;