npm - mis-crystal-design-system - Versions diffs - 2.4.3 → 2.4.6 - Mend

mis-crystal-design-system 2.4.3 → 2.4.6

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 (60) hide show

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:#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}"]}]}],"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;

package/tooltip/index.d.ts CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"ToolTipDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[misToolTip]"}]}],"members":{"~~responsivePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"~~showOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"showToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"~~width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"~~text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":41,"character":3},"arguments":["mouseenter"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":44,"character":3},"arguments":["mouseleave"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":50,"character":24},{"__symbolic":"reference","module":"@angular/~~core~~","name":"~~Renderer2~~","line":51,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":52,"character":30}~~,{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":53,"character":38}~~]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"~~createToolTip~~":[{"__symbolic":"method"}],"~~displayToolTip~~":[{"__symbolic":"method"}],"hideToolTip":[{"__symbolic":"method"}]~~,"updatePosition":[{"__symbolic":"method"~~}]}},"ToolTipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mis-tooltip","template":"<div id=\"tooltip-container\" ~~[hidden]~~=\"toolTipText.length ~~< 1\"\n #container\n [ngStyle]=\"{'width': toolTipWidth.length~~ > 0~~? toolTipWidth : ''}~~\"~~\n [ngClass]=\"{\n 'left':~~ ~~toolTipPosition === 'Left',\n 'right': toolTipPosition === 'Right',\n 'top': toolTipPosition === 'Top',\n 'bottom': toolTipPosition === 'Bottom'\n }\"\n~~>\n <div id=\"tooltip\">\n <div id=\"tooltip-text\">{{toolTipText}}</div>\n <span\n id=\"arrow\"\n [ngClass]=\"{\n 'arrow-left': toolTipPosition === '~~Left~~',\n 'arrow-right': toolTipPosition === '~~Right~~',\n 'arrow-top': toolTipPosition === '~~Top~~',\n 'arrow-bottom': toolTipPosition === '~~Bottom~~'\n }\"\n ></span>\n </div>\n</div>\n","styles":["#tooltip-container{position:absolute;z-index:1}#tooltip~~-container.top~~{left:50%;transform:translateX(-50%);top:-48px}#tooltip-container.bottom{left:50%;transform:translateX(-50%);bottom:-48px}#tooltip-container.left,#tooltip-container.right{top:50%;transform:translateY(-50%)}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{bottom:-6px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{top:-6px}.arrow-left{right:-6px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{left:-6px}"]}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":26,"character":3},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor"~~,"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":28,"character":32~~}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]~~,"updateToolTipPosition":[{"__symbolic":"method"~~}]}},"ToolTipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ToolTipComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ToolTipModule"},"providers":[]}}}}},"origins":{"ToolTipDirective":"./tooltip.directive","ToolTipComponent":"./tooltip.component","ToolTipModule":"./tooltip.module"},"importAs":"mis-crystal-design-system/tooltip"}
1	+ {"__symbolic":"module","version":4,"metadata":{"ToolTipDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[misToolTip]"}]}],"members":{"showOnHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"showToolTip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":3},"arguments":["mouseenter"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["mouseleave"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":37,"character":60},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":37,"character":95}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"displayToolTip":[{"__symbolic":"method"}],"positionTooltip":[{"__symbolic":"method"}],"hideToolTip":[{"__symbolic":"method"}]}},"ToolTipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-tooltip","template":"<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\n <div id=\"tooltip\">\n <div id=\"tooltip-text\">{{ toolTipText }}</div>\n <span\n id=\"arrow\"\n [ngClass]=\"{\n 'arrow-left': toolTipPosition === 'left',\n 'arrow-right': toolTipPosition === 'right',\n 'arrow-top': toolTipPosition === 'top',\n 'arrow-bottom': toolTipPosition === 'bottom'\n }\"\n ></span>\n </div>\n</div>\n","styles":["#tooltip-container{position:absolute;z-index:1}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{bottom:-6px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{top:-6px}.arrow-left{right:-6px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{left:-6px}"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ToolTipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"ToolTipDirective"},{"__symbolic":"reference","name":"ToolTipComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ToolTipComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ToolTipModule"},"providers":[]}}}},"ITooltipPositions":{"__symbolic":"interface"}},"origins":{"ToolTipDirective":"./tooltip.directive","ToolTipComponent":"./tooltip-container/tooltip.component","ToolTipModule":"./tooltip.module","ITooltipPositions":"./models/tooltip.model"},"importAs":"mis-crystal-design-system/tooltip"}

package/tooltip/models/tooltip.model.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare type ITooltipPositions = "left" \| "right" \| "top" \| "bottom";

package/tooltip/public_api.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
-export { ToolTipDirective } from './tooltip.directive';
-export { ToolTipComponent } from './tooltip.component';
-export { ToolTipModule } from './tooltip.module';
+export { ToolTipDirective } from "./tooltip.directive";
+export { ToolTipComponent } from "./tooltip-container/tooltip.component";
+export { ToolTipModule } from "./tooltip.module";
+export { ITooltipPositions } from "./models/tooltip.model";

package/tooltip/tooltip-container/tooltip.component.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { AfterViewInit, ElementRef, OnInit } from "@angular/core";
+import { ITooltipPositions } from "../models/tooltip.model";
+export declare class ToolTipComponent implements OnInit, AfterViewInit {
+    toolTipText: string;
+    toolTipPosition: ITooltipPositions;
+    container: ElementRef;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+}

package/tooltip/tooltip.directive.d.ts CHANGED Viewed

@@ -1,27 +1,24 @@
-import { AfterViewInit, ComponentFactoryResolver, ElementRef, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ElementRef, OnInit, ViewContainerRef } from "@angular/core";
+import { Overlay } from "@angular/cdk/overlay";
+import { ITooltipPositions } from "./models/tooltip.model";
 export declare class ToolTipDirective implements OnInit, AfterViewInit {
-    private elementRef;
-    private renderer;
+    private element;
+    private overlay;
     private viewContainerRef;
-    private componentFactoryResolver;
     isToolTipDisplayed: boolean;
-    toolTipWidth: string;
     toolTipText: string;
-    toolTipPosition: 'Left' | 'Right' | 'Top' | 'Bottom';
-    responsivePosition: boolean;
+    toolTipPosition: ITooltipPositions;
+    private overlayRef;
     showOnHover: boolean;
     set showToolTip(value: boolean);
-    set width(value: string);
     set text(value: string);
-    set position(value: 'Left' | 'Right' | 'Top' | 'Bottom');
+    set position(value: ITooltipPositions);
     onMouseEnter(): void;
     onMouseLeave(): void;
-    private componentRef;
-    constructor(elementRef: ElementRef, renderer: Renderer2, viewContainerRef: ViewContainerRef, componentFactoryResolver: ComponentFactoryResolver);
+    constructor(element: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    createToolTip(): void;
     displayToolTip(): void;
+    positionTooltip(type: "OFFSET_X" | "OFFSET_Y"): number;
     hideToolTip(): void;
-    updatePosition(): void;
 }

package/tooltip/tooltip.module.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders } from "@angular/core";
 export declare class ToolTipModule {
     static forRoot(): ModuleWithProviders<ToolTipModule>;
 }

package/utils/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { ConnectionPositionPair } from "@angular/cdk/overlay";
+export declare const genPositionPairs: ({ positionX, positionY, offsetX, offsetY }: {
+    positionX: any;
+    positionY: any;
+    offsetX?: number;
+    offsetY?: number;
+}, isResponsive: boolean) => ConnectionPositionPair[];

package/utils/mis-crystal-design-system-utils.d.ts ADDED Viewed

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

package/utils/mis-crystal-design-system-utils.metadata.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"__symbolic":"module","version":4,"metadata":{"genPositionPairs":{"__symbolic":"error","message":"Lambda not supported","line":2,"character":32,"module":"./index"}},"origins":{"genPositionPairs":"./index"},"importAs":"mis-crystal-design-system/utils"}

package/utils/package.json ADDED Viewed

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

package/esm2015/tooltip/tooltip.component.js DELETED Viewed

@@ -1,60 +0,0 @@
-import { Component, Input, Renderer2, ViewChild } from '@angular/core';
-export class ToolTipComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.toolTipText = '';
-        this.toolTipWidth = '';
-        this.toolTipPosition = 'Bottom';
-    }
-    set text(value) {
-        this.toolTipText = value;
-        this.updateToolTipPosition();
-    }
-    set width(value) {
-        this.toolTipWidth = value;
-        this.updateToolTipPosition();
-    }
-    set position(value) {
-        this.toolTipPosition = value;
-        this.updateToolTipPosition();
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-        this.updateToolTipPosition();
-    }
-    updateToolTipPosition() {
-        if (this.container) {
-            let width = this.container.nativeElement.offsetWidth;
-            if (this.toolTipPosition === 'Left') {
-                this.renderer.setStyle(this.container.nativeElement, 'left', `-${width + 12}px`);
-                this.renderer.setStyle(this.container.nativeElement, 'right', '');
-            }
-            else if (this.toolTipPosition === 'Right') {
-                this.renderer.setStyle(this.container.nativeElement, 'left', '');
-                this.renderer.setStyle(this.container.nativeElement, 'right', `-${width + 12}px`);
-            }
-            else {
-                this.renderer.setStyle(this.container.nativeElement, 'left', '50%');
-                this.renderer.setStyle(this.container.nativeElement, 'right', '');
-            }
-        }
-    }
-}
-ToolTipComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mis-tooltip',
-                template: "<div id=\"tooltip-container\" [hidden]=\"toolTipText.length < 1\"\n     #container\n     [ngStyle]=\"{'width': toolTipWidth.length > 0? toolTipWidth : ''}\"\n     [ngClass]=\"{\n        'left': toolTipPosition === 'Left',\n        'right': toolTipPosition === 'Right',\n        'top': toolTipPosition === 'Top',\n        'bottom': toolTipPosition === 'Bottom'\n     }\"\n>\n  <div id=\"tooltip\">\n    <div id=\"tooltip-text\">{{toolTipText}}</div>\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'Left',\n        'arrow-right': toolTipPosition === 'Right',\n        'arrow-top': toolTipPosition === 'Top',\n        'arrow-bottom': toolTipPosition === 'Bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n",
-                styles: ["#tooltip-container{position:absolute;z-index:1}#tooltip-container.top{left:50%;transform:translateX(-50%);top:-48px}#tooltip-container.bottom{left:50%;transform:translateX(-50%);bottom:-48px}#tooltip-container.left,#tooltip-container.right{top:50%;transform:translateY(-50%)}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{bottom:-6px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{top:-6px}.arrow-left{right:-6px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{left:-6px}"]
-            },] }
-];
-ToolTipComponent.ctorParameters = () => [
-    { type: Renderer2 }
-];
-ToolTipComponent.propDecorators = {
-    text: [{ type: Input }],
-    width: [{ type: Input }],
-    position: [{ type: Input }],
-    container: [{ type: ViewChild, args: ['container',] }]
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9taXMtY29tcG9uZW50cy90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IsU0FBUyxFQUFjLEtBQUssRUFBVSxTQUFTLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBT3hHLE1BQU0sT0FBTyxnQkFBZ0I7SUFxQjNCLFlBQW9CLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUFuQmhDLGdCQUFXLEdBQVcsRUFBRSxDQUFBO1FBQ3hCLGlCQUFZLEdBQVcsRUFBRSxDQUFBO1FBQ3pCLG9CQUFlLEdBQXdDLFFBQVEsQ0FBQTtJQWtCdEUsQ0FBQztJQWhCRCxJQUFhLElBQUksQ0FBQyxLQUFhO1FBQzdCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFBO1FBQ3hCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFBO0lBQzlCLENBQUM7SUFDRCxJQUFhLEtBQUssQ0FBQyxLQUFhO1FBQzlCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1FBQzFCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFBO0lBQzlCLENBQUM7SUFDRCxJQUFhLFFBQVEsQ0FBQyxLQUEwQztRQUM5RCxJQUFJLENBQUMsZUFBZSxHQUFHLEtBQUssQ0FBQTtRQUM1QixJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQTtJQUM5QixDQUFDO0lBTUQsUUFBUTtJQUNSLENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUE7SUFDOUIsQ0FBQztJQUNELHFCQUFxQjtRQUNuQixJQUFHLElBQUksQ0FBQyxTQUFTLEVBQUM7WUFDaEIsSUFBSSxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFBO1lBQ3BELElBQUcsSUFBSSxDQUFDLGVBQWUsS0FBSyxNQUFNLEVBQUM7Z0JBQ2pDLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLElBQUksQ0FBQyxDQUFBO2dCQUNoRixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUE7YUFDbEU7aUJBQ0ksSUFBRyxJQUFJLENBQUMsZUFBZSxLQUFLLE9BQU8sRUFBQztnQkFDdkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLEVBQUUsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFBO2dCQUNoRSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxPQUFPLEVBQUUsSUFBSSxLQUFLLEdBQUcsRUFBRSxJQUFJLENBQUMsQ0FBQTthQUNsRjtpQkFDRztnQkFDRixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLENBQUE7Z0JBQ25FLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxFQUFFLENBQUMsQ0FBQTthQUNsRTtTQUNGO0lBQ0gsQ0FBQzs7O1lBakRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsYUFBYTtnQkFDdkIsNHZCQUF1Qzs7YUFFeEM7OztZQU40RCxTQUFTOzs7bUJBYW5FLEtBQUs7b0JBSUwsS0FBSzt1QkFJTCxLQUFLO3dCQUtMLFNBQVMsU0FBQyxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBPbkluaXQsIFJlbmRlcmVyMiwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWlzLXRvb2x0aXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9vbHRpcC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Rvb2x0aXAuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUb29sVGlwQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0e1xuXG4gIHB1YmxpYyB0b29sVGlwVGV4dDogc3RyaW5nID0gJydcbiAgcHVibGljIHRvb2xUaXBXaWR0aDogc3RyaW5nID0gJydcbiAgcHVibGljIHRvb2xUaXBQb3NpdGlvbjogJ0xlZnQnIHwgJ1JpZ2h0JyB8ICdUb3AnIHwgJ0JvdHRvbScgPSAnQm90dG9tJ1xuXG4gIEBJbnB1dCgpIHNldCB0ZXh0KHZhbHVlOiBzdHJpbmcpe1xuICAgIHRoaXMudG9vbFRpcFRleHQgPSB2YWx1ZVxuICAgIHRoaXMudXBkYXRlVG9vbFRpcFBvc2l0aW9uKClcbiAgfVxuICBASW5wdXQoKSBzZXQgd2lkdGgodmFsdWU6IHN0cmluZyl7XG4gICAgdGhpcy50b29sVGlwV2lkdGggPSB2YWx1ZTtcbiAgICB0aGlzLnVwZGF0ZVRvb2xUaXBQb3NpdGlvbigpXG4gIH1cbiAgQElucHV0KCkgc2V0IHBvc2l0aW9uKHZhbHVlOiAnTGVmdCcgfCAnUmlnaHQnIHwgJ1RvcCcgfCAnQm90dG9tJyl7XG4gICAgdGhpcy50b29sVGlwUG9zaXRpb24gPSB2YWx1ZVxuICAgIHRoaXMudXBkYXRlVG9vbFRpcFBvc2l0aW9uKClcbiAgfVxuXG4gIEBWaWV3Q2hpbGQoJ2NvbnRhaW5lcicpIGNvbnRhaW5lcjogRWxlbWVudFJlZlxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xuICB9XG4gIG5nT25Jbml0KCkge1xuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpe1xuICAgIHRoaXMudXBkYXRlVG9vbFRpcFBvc2l0aW9uKClcbiAgfVxuICB1cGRhdGVUb29sVGlwUG9zaXRpb24oKXtcbiAgICBpZih0aGlzLmNvbnRhaW5lcil7XG4gICAgICBsZXQgd2lkdGggPSB0aGlzLmNvbnRhaW5lci5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRoXG4gICAgICBpZih0aGlzLnRvb2xUaXBQb3NpdGlvbiA9PT0gJ0xlZnQnKXtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmNvbnRhaW5lci5uYXRpdmVFbGVtZW50LCAnbGVmdCcsIGAtJHt3aWR0aCArIDEyfXB4YClcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmNvbnRhaW5lci5uYXRpdmVFbGVtZW50LCAncmlnaHQnLCAnJylcbiAgICAgIH1cbiAgICAgIGVsc2UgaWYodGhpcy50b29sVGlwUG9zaXRpb24gPT09ICdSaWdodCcpe1xuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuY29udGFpbmVyLm5hdGl2ZUVsZW1lbnQsICdsZWZ0JywgJycpXG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5jb250YWluZXIubmF0aXZlRWxlbWVudCwgJ3JpZ2h0JywgYC0ke3dpZHRoICsgMTJ9cHhgKVxuICAgICAgfVxuICAgICAgZWxzZXtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmNvbnRhaW5lci5uYXRpdmVFbGVtZW50LCAnbGVmdCcsICc1MCUnKVxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuY29udGFpbmVyLm5hdGl2ZUVsZW1lbnQsICdyaWdodCcsICcnKVxuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIl19

package/tooltip/tooltip.component.d.ts DELETED Viewed

@@ -1,15 +0,0 @@
-import { AfterViewInit, ElementRef, OnInit, Renderer2 } from '@angular/core';
-export declare class ToolTipComponent implements OnInit, AfterViewInit {
-    private renderer;
-    toolTipText: string;
-    toolTipWidth: string;
-    toolTipPosition: 'Left' | 'Right' | 'Top' | 'Bottom';
-    set text(value: string);
-    set width(value: string);
-    set position(value: 'Left' | 'Right' | 'Top' | 'Bottom');
-    container: ElementRef;
-    constructor(renderer: Renderer2);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    updateToolTipPosition(): void;
-}