mis-crystal-design-system 4.0.7 → 4.0.9

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 (16) hide show
  1. package/bundles/mis-crystal-design-system-dynamic-form.umd.js +2 -2
  2. package/bundles/mis-crystal-design-system-dynamic-form.umd.js.map +1 -1
  3. package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js +1 -1
  4. package/bundles/mis-crystal-design-system-dynamic-form.umd.min.js.map +1 -1
  5. package/bundles/mis-crystal-design-system-table.umd.js +1 -0
  6. package/bundles/mis-crystal-design-system-table.umd.js.map +1 -1
  7. package/bundles/mis-crystal-design-system-table.umd.min.js +1 -1
  8. package/bundles/mis-crystal-design-system-table.umd.min.js.map +1 -1
  9. package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json +1 -1
  10. package/esm2015/dynamic-form/dynamic-form.component.js +3 -3
  11. package/esm2015/table/table.component.js +2 -1
  12. package/fesm2015/mis-crystal-design-system-dynamic-form.js +2 -2
  13. package/fesm2015/mis-crystal-design-system-dynamic-form.js.map +1 -1
  14. package/fesm2015/mis-crystal-design-system-table.js +1 -0
  15. package/fesm2015/mis-crystal-design-system-table.js.map +1 -1
  16. package/package.json +1 -1
package/bundles/mis-crystal-design-system-table.umd.min.js CHANGED
@@ -12,5 +12,5 @@
12
12
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13
13
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14
14
  PERFORMANCE OF THIS SOFTWARE.
15
- ***************************************************************************** */Object.create;function a(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}Object.create;var r=function(){function e(e){this.renderer=e,this.activeRowIndex=0,this.showFilter=!1,this.filterName="",this.filterData=[],this.filterContainerStyles={},this.appliedFilters={},this.filtersUpdated=new t.EventEmitter,this.pages=[],this.pageSelected=new t.EventEmitter,this.tableData=[],this.subTableData=[]}return e.prototype.selectRow=function(e){this.activeRowIndex=e,this.config.rowConfig.action(e)},e.prototype.ngOnInit=function(){var e=this;this.tableLength=this.tableData?this.tableData.length:0,this.initializeFilters(),this.config.paginationConfig&&this.initializePagination(),void 0===this.config.canScrollHorizontally&&(this.config.canScrollHorizontally=!1),document.addEventListener("click",(function(t){if(e.filter){var n=!0;"checkmark"===t.target.className&&(n=!0,e.showFilter=!0),e.filter.container.nativeElement.contains(t.target)||n||e.toggleFilter(e.filterName)}}))},e.prototype.ngAfterViewInit=function(){if(this.config.paginationConfig){var e=this.config.height;this.renderer.setStyle(this.table.nativeElement,"height",e-56+"px")}},e.prototype.ngOnChanges=function(){this.tableLength=this.tableData?this.tableData.length:0},e.prototype.initializeFilters=function(){var e,t,n,i,o;try{for(var r=a(null===(o=this.config)||void 0===o?void 0:o.colHeaderConfig),l=r.next();!l.done;l=r.next()){var s=l.value;if(s.filters){var c=[];try{for(var d=(n=void 0,a(s.filters)),g=d.next();!g.done;g=d.next()){var p=g.value;p.checked&&c.push({name:p.name,value:p.value})}}catch(e){n={error:e}}finally{try{g&&!g.done&&(i=d.return)&&i.call(d)}finally{if(n)throw n.error}}c.length>0&&(this.appliedFilters[s.data]=c)}}}catch(t){e={error:t}}finally{try{l&&!l.done&&(t=r.return)&&t.call(r)}finally{if(e)throw e.error}}},e.prototype.toggleFilter=function(e){var t,n;if(this.showFilter)this.filterName="",this.filterData=[],this.showFilter=!1;else{this.filterName=e,this.showFilter=!0;var i=0,o=this.colHeaders.toArray().reverse();try{for(var r=a(o),l=r.next();!l.done;l=r.next()){var s=l.value;if(s.nativeElement.innerText===e)break;i+=s.nativeElement.offsetWidth}}catch(e){t={error:e}}finally{try{l&&!l.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}this.filterContainerStyles={top:"44px",right:i>0?i-116+"px":"12px"}}},e.prototype.updateAppliedFilters=function(e){0==e.length?delete this.appliedFilters[this.filterName]:this.appliedFilters[this.filterName]=e,this.filtersUpdated.emit(Object.assign({},this.appliedFilters)),this.toggleFilter(this.filterName)},e.prototype.initializePagination=function(){if(this.config.paginationConfig){var e=this.config.paginationConfig.noOfPages;if(e<=7)for(var t=1;t<=e;t++)this.pages.push(t);else this.pages=[1,2,3,4,0,e]}},e.prototype.updateSelectedPage=function(e){var t;if(!(e<1||e>this.config.paginationConfig.noOfPages)){this.config.paginationConfig.selectedPage=e;var n=this.config.paginationConfig.noOfPages;n>7&&(e-2<=1?this.pages=[1,2,3,4,0,n]:e-2>1&&e+2<n?this.pages=[1,0,e-1,e,e+1,0,n]:e+2>=n&&(this.pages=[1,0,n-3,n-2,n-1,n])),this.pageSelected.emit(null===(t=this.config.paginationConfig)||void 0===t?void 0:t.selectedPage)}},e.prototype.getContainerHeight=function(){var e;return(null===(e=this.config)||void 0===e?void 0:e.height)?this.config.height:""},e.prototype.getContainerWidth=function(){var e;return(null===(e=this.config)||void 0===e?void 0:e.width)?this.config.width:""},e.prototype.getColHeadersRowHeight=function(){return this.config.colHeadersRowConfig&&this.config.colHeadersRowConfig.height?this.config.colHeadersRowConfig.height:"44px"},e.prototype.getColHeadersRowBorderTop=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderTop)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderTop:""},e.prototype.getColHeadersRowBorderBottom=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderBottom)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderBottom:"1px solid #E0E0E0"},e}();r.decorators=[{type:t.Component,args:[{selector:"mis-table",template:'<div\n [ngStyle]="{\n height: getContainerHeight(),\n width: getContainerWidth(),\n \'overflow-x\': config.canScrollHorizontally ? \'auto\' : \'unset\'\n }"\n id="main-container"\n>\n <mis-table-filter\n #filter\n (filtersApplied)="updateAppliedFilters($event)"\n *ngIf="showFilter"\n [containerStyles]="filterContainerStyles"\n [filtersData]="filterData"\n ></mis-table-filter>\n <div\n #table\n id="table-container"\n [ngClass]="{ \'no-scrollbar\': expandedIndex < 0, scrollbar: !(expandedIndex < 0), \'scroll-horizontally\': config.canScrollHorizontally }"\n >\n <div\n [ngStyle]="{\n \'min-height\': getColHeadersRowHeight(),\n \'border-top\': getColHeadersRowBorderTop(),\n \'border-bottom\': getColHeadersRowBorderBottom()\n }"\n id="col-headers-container"\n >\n <div\n #colHeaderRef\n (click)="colHeader?.action ? colHeader?.action(colHeader) : null"\n *ngFor="let colHeader of config?.colHeaderConfig"\n class="col-header"\n [ngStyle]="{\n width: colHeader?.style?.width || \'\',\n cursor: colHeader.action ? \'pointer\' : \'default\',\n \'justify-content\': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p *ngIf="colHeader?.type !== \'custom\'" class="col-header-text">\n {{ colHeader?.data || " " }}\n </p>\n <span\n (click)="filterData = colHeader.filters; toggleFilter(colHeader.data); $event.stopPropagation()"\n *ngIf="colHeader?.type !== \'custom\' && colHeader?.filters && colHeader?.filters?.length > 0"\n class="filter-icon"\n >\n <span *ngIf="appliedFilters[colHeader.data]?.length > 0" id="filter-active"></span>\n <svg fill="none" height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg">\n <path\n clip-rule="evenodd"\n d="M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z"\n fill="#181F33"\n fill-rule="evenodd"\n />\n </svg>\n </span>\n <ng-template\n *ngIf="colHeader?.type === \'custom\'"\n [customComponent]="colHeader?.componentRef"\n [data]="colHeader.data"\n customTableCell\n ></ng-template>\n </div>\n </div>\n <div id="data-container">\n <div class="row-wrapper" *ngFor="let row of tableData; let i = index">\n <div\n class="t-row"\n [ngClass]="{ \'t-row-hover\': config.cellHover, \'active-row\': i === activeRowIndex }"\n [ngStyle]="{ \'min-height\': config?.rowConfig?.height ? config.rowConfig.height : \'44px\' }"\n (click)="selectRow(i)"\n >\n <div\n (click)="config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null"\n *ngFor="let col of row; let i = index"\n [ngStyle]="{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || \'\'\n }"\n class="t-col-container"\n [ngClass]="{ \'t-col-container-hover\': config.cellHover }"\n >\n <div\n class="t-col"\n [style]="config.colConfig[i]?.style"\n [ngStyle]="{\n width: \'100%\',\n cursor: config.colConfig[i]?.action ? \'pointer\' : \'default\',\n \'justify-content\': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p\n *ngIf="config.colConfig[i]?.type !== \'custom\'"\n [ngStyle]="{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : \'\'\n }"\n class="t-col-text"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf="config.colConfig[i]?.type === \'custom\'"\n [customComponent]="config.colConfig[i].componentRef"\n [data]="col"\n customTableCell\n ></ng-template>\n </div>\n </div>\n </div>\n <div *ngIf="config?.canExpand && expandedIndex === i" class="sub-row">\n <ng-container *ngIf="subTableDataLoading">\n <div style="display: flex; justify-content: center; align-items: center; padding: 16px">Loading...</div>\n </ng-container>\n <ng-container *ngIf="!subTableDataLoading && subTableData.length === 0">\n <div style="display: flex; justify-content: center; align-items: center; padding: 16px">No Data Available...</div>\n </ng-container>\n <ng-container *ngIf="!subTableDataLoading && subTableData.length > 0">\n <sub-table [config]="subTableconfig" [tableData]="subTableData"></sub-table>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf="config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)"\n id="pagination-container"\n >\n <p id="pagination-text">\n Showing\n {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n }}\n of {{ config.paginationConfig.totalNoOfRows }} items\n </p>\n <div id="pages-container">\n <span (click)="updateSelectedPage(config.paginationConfig?.selectedPage - 1)" class="page">\n <svg fill="none" height="10" viewBox="0 0 7 10" width="7" xmlns="http://www.w3.org/2000/svg">\n <path\n clip-rule="evenodd"\n d="M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z"\n fill="#181F33"\n fill-rule="evenodd"\n />\n </svg>\n </span>\n <div *ngFor="let pageNumber of pages">\n <span\n (click)="updateSelectedPage(pageNumber)"\n *ngIf="pageNumber != 0"\n [ngClass]="{ \'page-active\': pageNumber == config.paginationConfig?.selectedPage }"\n class="page"\n >{{ pageNumber }}</span\n >\n <span *ngIf="pageNumber == 0" class="page-seperator">\n <div style="display: flex">\n <span class="dot" style="margin-right: 4px"></span>\n <span class="dot" style="margin-right: 4px"></span>\n <span class="dot"></span>\n </div>\n </span>\n </div>\n <span (click)="updateSelectedPage(config.paginationConfig?.selectedPage + 1)" class="page">\n <svg fill="none" height="10" viewBox="0 0 7 10" width="7" xmlns="http://www.w3.org/2000/svg">\n <path\n clip-rule="evenodd"\n d="M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z"\n fill="#181F33"\n fill-rule="evenodd"\n />\n </svg>\n </span>\n </div>\n </div>\n</div>\n',styles:["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:-webkit-sticky;position:sticky;background-color:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #e0e0e0;top:0;left:0;right:0}.col-header{padding:0 16px;height:100%}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.2px;margin:0}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.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}"]}]}],r.ctorParameters=function(){return[{type:t.Renderer2}]},r.propDecorators={filtersUpdated:[{type:t.Output}],filter:[{type:t.ViewChild,args:["filter"]}],colHeaders:[{type:t.ViewChildren,args:["colHeaderRef"]}],pageSelected:[{type:t.Output}],config:[{type:t.Input,args:["tableConfig"]}],subTableconfig:[{type:t.Input}],tableDataLoading:[{type:t.Input}],expandedIndex:[{type:t.Input}],tableData:[{type:t.Input}],subTableData:[{type:t.Input}],subTableDataLoading:[{type:t.Input}],table:[{type:t.ViewChild,args:["table"]}]};var l=function(){function e(e,t){this.viewContainerRef=e,this.componentFactoryResolver=t}return Object.defineProperty(e.prototype,"customComponent",{set:function(e){this.component=e,this.createComponent()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"data",{set:function(e){this.cellData=e,this.ref&&(this.ref.instance.data=this.cellData)},enumerable:!1,configurable:!0}),e.prototype.createComponent=function(){if(this.component){var e=this.componentFactoryResolver.resolveComponentFactory(this.component);this.viewContainerRef.clear(),this.ref=this.viewContainerRef.createComponent(e),this.setData()}},e.prototype.setData=function(){this.ref.instance.data=this.cellData},e}();l.decorators=[{type:t.Directive,args:[{selector:"[customTableCell]"}]}],l.ctorParameters=function(){return[{type:t.ViewContainerRef},{type:t.ComponentFactoryResolver}]},l.propDecorators={customComponent:[{type:t.Input}],data:[{type:t.Input}]};var s=function(){function e(e){this.renderer=e,this.selectedPage=1,this.pages=[],this.tableData=[]}return e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewInit=function(){if(this.config.paginationConfig){var e=this.table.nativeElement.offsetHeight;this.renderer.setStyle(this.table.nativeElement,"height",e-56+"px")}},e.prototype.getContainerHeight=function(){return this.config.height?this.config.height:""},e.prototype.getContainerWidth=function(){return this.config.width?this.config.width:""},e.prototype.getColHeadersRowHeight=function(){return this.config.colHeadersRowConfig&&this.config.colHeadersRowConfig.height?this.config.colHeadersRowConfig.height:"44px"},e.prototype.getColHeadersRowBorderTop=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderTop)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderTop:""},e.prototype.getColHeadersRowBorderBottom=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderBottom)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderBottom:"1px solid #E0E0E0"},e}();s.decorators=[{type:t.Component,args:[{selector:"sub-table",template:'<div\n id="main-container"\n [ngStyle]="{\n height: getContainerHeight(),\n width: getContainerWidth()\n }"\n>\n <div id="table-container" #table>\n <div\n id="col-headers-container"\n *ngIf="!!config.showHeader"\n [ngStyle]="{\n height: getColHeadersRowHeight(),\n \'border-top\': getColHeadersRowBorderTop(),\n \'border-bottom\': getColHeadersRowBorderBottom()\n }"\n >\n <div\n class="col-header"\n (click)="colHeader?.action ? colHeader?.action(colHeader) : null"\n *ngFor="let colHeader of config?.colHeaderConfig"\n [style]="colHeader?.style"\n [ngStyle]="{\n width: colHeader?.style?.width || \'\',\n cursor: colHeader.action ? \'pointer\' : \'default\',\n \'justify-content\': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p *ngIf="colHeader?.type !== \'custom\'" class="col-header-text">\n {{ colHeader?.data || " " }}\n </p>\n <ng-template\n *ngIf="colHeader?.type === \'custom\'"\n customTableCell\n [customComponent]="colHeader?.componentRef"\n [data]="colHeader.data"\n ></ng-template>\n </div>\n </div>\n <div>\n <cdk-virtual-scroll-viewport\n [minBufferPx]="config.dataContainerMaxHeight || \'400\'"\n [maxBufferPx]="config.dataContainerMaxHeight + 200 || \'600\'"\n [style.overflow]="\'overlay\'"\n [style.height]="config.dataContainerMaxHeight || \'400px\'"\n itemSize="50"\n id="data-container"\n >\n <div\n class="row-wrapper"\n *cdkVirtualFor="let row of tableData; let i = index"\n [ngStyle]="{\n backgroundColor: i % 2 === 0 ? \'#FAFAFA\' : null\n }"\n >\n <div class="t-row">\n <div\n (click)="config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null"\n *ngFor="let col of row; let i = index"\n [ngStyle]="{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || \'\'\n }"\n class="t-col-container"\n >\n <div\n class="t-col"\n [style]="config.colConfig[i]?.style"\n [ngStyle]="{\n width: \'100%\',\n cursor: config.colConfig[i].action ? \'pointer\' : \'default\',\n \'justify-content\': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i].type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p\n *ngIf="config.colConfig[i].type !== \'custom\'"\n [ngStyle]="{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : \'\'\n }"\n class="t-col-text"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf="config.colConfig[i].type === \'custom\'"\n [customComponent]="config.colConfig[i].componentRef"\n [data]="col"\n customTableCell\n ></ng-template>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n',styles:["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header{height:100%;width:160px;padding:0 16px}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;letter-spacing:.2px;margin:0}"]}]}],s.ctorParameters=function(){return[{type:t.Renderer2}]},s.propDecorators={config:[{type:t.Input}],tableData:[{type:t.Input}],table:[{type:t.ViewChild,args:["table"]}]};var c=function(){function e(){this.filtersData=[],this.containerStyles={},this.filtersApplied=new t.EventEmitter,this.filtersMap={},this.searchValue="",this.mySort=function(e,t){return e.name<t.name?-1:t.name<e.name?1:0}}return e.prototype.ngOnInit=function(){var e=this;this.filtersData.forEach((function(t){e.filtersMap[t.value]=t}))},e.prototype.resetFilters=function(){var e=this;this.filtersData.forEach((function(t){e.filtersMap[t.value].checked=!1})),this.filtersApplied.emit([])},e.prototype.applyFilters=function(){var e=Object.values(this.filtersMap).filter((function(e){return e.checked})).map((function(e){return{name:e.name,value:e.value}}));this.filtersApplied.emit(e)},e.prototype.updateSearchValue=function(e){this.searchValue=e.target.value},e.prototype.updateFilter=function(e){this.filtersMap[e.name]&&(this.filtersMap[e.name].checked=!this.filtersMap[e.name].checked)},e.prototype.getFiltersBasedOnSearchValue=function(){var e=this,t=Object.values(this.filtersMap);return(t=t.filter((function(t){return t.name.match(new RegExp(e.searchValue,"i"))}))).sort(this.mySort)},e.prototype.getCheckedFilters=function(){var e=Object.values(this.filtersMap);return e=e.filter((function(e){return e.checked})).sort(this.mySort)},e}();c.decorators=[{type:t.Component,args:[{selector:"mis-table-filter",template:'<div id="main-container" #mainContainer [ngStyle]="containerStyles">\n <div id="search-bar-container">\n <input (keyup)="updateSearchValue($event)" type="text" placeholder="Search" />\n <svg id="search-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path\n fill-rule="evenodd"\n clip-rule="evenodd"\n d="M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z"\n fill="#6A737D"\n />\n </svg>\n </div>\n <div id="filters-main-container">\n <div class="filters-sub-container">\n <div *ngFor="let filter of getCheckedFilters()">\n <div class="filter">\n <mis-checkbox [checked]="true" [name]="filter.value" (valueChange)="updateFilter($event)"></mis-checkbox>\n <span class="filter-text">{{ filter.name }}</span>\n </div>\n </div>\n </div>\n <div class="separator" style="margin: 16px 0px" *ngIf="getCheckedFilters().length && getCheckedFilters().length < filtersData.length"></div>\n <div class="filters-sub-container">\n <div *ngFor="let filter of getFiltersBasedOnSearchValue()">\n <div class="filter" *ngIf="!filter.checked">\n <mis-checkbox [checked]="false" [name]="filter.value" (valueChange)="updateFilter($event)"></mis-checkbox>\n <span class="filter-text">{{ filter.name }}</span>\n </div>\n </div>\n <div id="no-results-container" *ngIf="getFiltersBasedOnSearchValue().length < 1">\n <span class="filter-text">No matches found</span>\n </div>\n </div>\n <div class="separator" style="margin: 16px 0px"></div>\n <div id="buttons-container">\n <button id="reset-btn" style="margin-right: 8px" (click)="resetFilters()">Reset</button>\n <button id="apply-btn" (click)="applyFilters()">Apply</button>\n </div>\n </div>\n</div>\n',styles:["#main-container{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container{width:100%;position:relative;margin-bottom:8px}input{width:100%;padding:12px 12px 12px 42px;border:1px solid #000;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33}input:focus{border:1px solid #0937b2}#search-icon{position:absolute;top:15px;left:12px}.filters-sub-container{max-height:144px;overflow-y:auto}.filter{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}"]}]}],c.ctorParameters=function(){return[]},c.propDecorators={filtersData:[{type:t.Input}],containerStyles:[{type:t.Input}],filtersApplied:[{type:t.Output}],container:[{type:t.ViewChild,args:["mainContainer"]}]};var d=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();d.decorators=[{type:t.NgModule,args:[{declarations:[r,s,c,l],imports:[n.CommonModule,i.CheckboxModule,o.ScrollingModule],exports:[r,s,c,l]}]}],e.CustomTableCellDirective=l,e.TableComponent=r,e.TableFilterComponent=c,e.TableModule=d,e.ɵa=s,Object.defineProperty(e,"__esModule",{value:!0})}));
15
+ ***************************************************************************** */Object.create;function a(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}Object.create;var r=function(){function e(e){this.renderer=e,this.activeRowIndex=0,this.showFilter=!1,this.filterName="",this.filterData=[],this.filterContainerStyles={},this.appliedFilters={},this.filtersUpdated=new t.EventEmitter,this.pages=[],this.pageSelected=new t.EventEmitter,this.tableData=[],this.subTableData=[]}return e.prototype.selectRow=function(e){this.activeRowIndex=e,this.config.rowConfig.action(e)},e.prototype.ngOnInit=function(){var e=this;this.tableLength=this.tableData?this.tableData.length:0,this.initializeFilters(),this.config.paginationConfig&&this.initializePagination(),void 0===this.config.canScrollHorizontally&&(this.config.canScrollHorizontally=!1),document.addEventListener("click",(function(t){if(e.filter){var n=!0;"checkmark"===t.target.className&&(n=!0,e.showFilter=!0),e.filter.container.nativeElement.contains(t.target)||n||e.toggleFilter(e.filterName)}}))},e.prototype.ngAfterViewInit=function(){if(this.config.paginationConfig){var e=this.config.height;this.renderer.setStyle(this.table.nativeElement,"height",e-56+"px")}},e.prototype.ngOnChanges=function(){this.tableLength=this.tableData?this.tableData.length:0,this.activeRowIndex=0},e.prototype.initializeFilters=function(){var e,t,n,i,o;try{for(var r=a(null===(o=this.config)||void 0===o?void 0:o.colHeaderConfig),l=r.next();!l.done;l=r.next()){var s=l.value;if(s.filters){var c=[];try{for(var d=(n=void 0,a(s.filters)),g=d.next();!g.done;g=d.next()){var p=g.value;p.checked&&c.push({name:p.name,value:p.value})}}catch(e){n={error:e}}finally{try{g&&!g.done&&(i=d.return)&&i.call(d)}finally{if(n)throw n.error}}c.length>0&&(this.appliedFilters[s.data]=c)}}}catch(t){e={error:t}}finally{try{l&&!l.done&&(t=r.return)&&t.call(r)}finally{if(e)throw e.error}}},e.prototype.toggleFilter=function(e){var t,n;if(this.showFilter)this.filterName="",this.filterData=[],this.showFilter=!1;else{this.filterName=e,this.showFilter=!0;var i=0,o=this.colHeaders.toArray().reverse();try{for(var r=a(o),l=r.next();!l.done;l=r.next()){var s=l.value;if(s.nativeElement.innerText===e)break;i+=s.nativeElement.offsetWidth}}catch(e){t={error:e}}finally{try{l&&!l.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}this.filterContainerStyles={top:"44px",right:i>0?i-116+"px":"12px"}}},e.prototype.updateAppliedFilters=function(e){0==e.length?delete this.appliedFilters[this.filterName]:this.appliedFilters[this.filterName]=e,this.filtersUpdated.emit(Object.assign({},this.appliedFilters)),this.toggleFilter(this.filterName)},e.prototype.initializePagination=function(){if(this.config.paginationConfig){var e=this.config.paginationConfig.noOfPages;if(e<=7)for(var t=1;t<=e;t++)this.pages.push(t);else this.pages=[1,2,3,4,0,e]}},e.prototype.updateSelectedPage=function(e){var t;if(!(e<1||e>this.config.paginationConfig.noOfPages)){this.config.paginationConfig.selectedPage=e;var n=this.config.paginationConfig.noOfPages;n>7&&(e-2<=1?this.pages=[1,2,3,4,0,n]:e-2>1&&e+2<n?this.pages=[1,0,e-1,e,e+1,0,n]:e+2>=n&&(this.pages=[1,0,n-3,n-2,n-1,n])),this.pageSelected.emit(null===(t=this.config.paginationConfig)||void 0===t?void 0:t.selectedPage)}},e.prototype.getContainerHeight=function(){var e;return(null===(e=this.config)||void 0===e?void 0:e.height)?this.config.height:""},e.prototype.getContainerWidth=function(){var e;return(null===(e=this.config)||void 0===e?void 0:e.width)?this.config.width:""},e.prototype.getColHeadersRowHeight=function(){return this.config.colHeadersRowConfig&&this.config.colHeadersRowConfig.height?this.config.colHeadersRowConfig.height:"44px"},e.prototype.getColHeadersRowBorderTop=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderTop)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderTop:""},e.prototype.getColHeadersRowBorderBottom=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderBottom)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderBottom:"1px solid #E0E0E0"},e}();r.decorators=[{type:t.Component,args:[{selector:"mis-table",template:'<div\n [ngStyle]="{\n height: getContainerHeight(),\n width: getContainerWidth(),\n \'overflow-x\': config.canScrollHorizontally ? \'auto\' : \'unset\'\n }"\n id="main-container"\n>\n <mis-table-filter\n #filter\n (filtersApplied)="updateAppliedFilters($event)"\n *ngIf="showFilter"\n [containerStyles]="filterContainerStyles"\n [filtersData]="filterData"\n ></mis-table-filter>\n <div\n #table\n id="table-container"\n [ngClass]="{ \'no-scrollbar\': expandedIndex < 0, scrollbar: !(expandedIndex < 0), \'scroll-horizontally\': config.canScrollHorizontally }"\n >\n <div\n [ngStyle]="{\n \'min-height\': getColHeadersRowHeight(),\n \'border-top\': getColHeadersRowBorderTop(),\n \'border-bottom\': getColHeadersRowBorderBottom()\n }"\n id="col-headers-container"\n >\n <div\n #colHeaderRef\n (click)="colHeader?.action ? colHeader?.action(colHeader) : null"\n *ngFor="let colHeader of config?.colHeaderConfig"\n class="col-header"\n [ngStyle]="{\n width: colHeader?.style?.width || \'\',\n cursor: colHeader.action ? \'pointer\' : \'default\',\n \'justify-content\': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p *ngIf="colHeader?.type !== \'custom\'" class="col-header-text">\n {{ colHeader?.data || " " }}\n </p>\n <span\n (click)="filterData = colHeader.filters; toggleFilter(colHeader.data); $event.stopPropagation()"\n *ngIf="colHeader?.type !== \'custom\' && colHeader?.filters && colHeader?.filters?.length > 0"\n class="filter-icon"\n >\n <span *ngIf="appliedFilters[colHeader.data]?.length > 0" id="filter-active"></span>\n <svg fill="none" height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg">\n <path\n clip-rule="evenodd"\n d="M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z"\n fill="#181F33"\n fill-rule="evenodd"\n />\n </svg>\n </span>\n <ng-template\n *ngIf="colHeader?.type === \'custom\'"\n [customComponent]="colHeader?.componentRef"\n [data]="colHeader.data"\n customTableCell\n ></ng-template>\n </div>\n </div>\n <div id="data-container">\n <div class="row-wrapper" *ngFor="let row of tableData; let i = index">\n <div\n class="t-row"\n [ngClass]="{ \'t-row-hover\': config.cellHover, \'active-row\': i === activeRowIndex }"\n [ngStyle]="{ \'min-height\': config?.rowConfig?.height ? config.rowConfig.height : \'44px\' }"\n (click)="selectRow(i)"\n >\n <div\n (click)="config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null"\n *ngFor="let col of row; let i = index"\n [ngStyle]="{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || \'\'\n }"\n class="t-col-container"\n [ngClass]="{ \'t-col-container-hover\': config.cellHover }"\n >\n <div\n class="t-col"\n [style]="config.colConfig[i]?.style"\n [ngStyle]="{\n width: \'100%\',\n cursor: config.colConfig[i]?.action ? \'pointer\' : \'default\',\n \'justify-content\': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p\n *ngIf="config.colConfig[i]?.type !== \'custom\'"\n [ngStyle]="{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : \'\'\n }"\n class="t-col-text"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf="config.colConfig[i]?.type === \'custom\'"\n [customComponent]="config.colConfig[i].componentRef"\n [data]="col"\n customTableCell\n ></ng-template>\n </div>\n </div>\n </div>\n <div *ngIf="config?.canExpand && expandedIndex === i" class="sub-row">\n <ng-container *ngIf="subTableDataLoading">\n <div style="display: flex; justify-content: center; align-items: center; padding: 16px">Loading...</div>\n </ng-container>\n <ng-container *ngIf="!subTableDataLoading && subTableData.length === 0">\n <div style="display: flex; justify-content: center; align-items: center; padding: 16px">No Data Available...</div>\n </ng-container>\n <ng-container *ngIf="!subTableDataLoading && subTableData.length > 0">\n <sub-table [config]="subTableconfig" [tableData]="subTableData"></sub-table>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf="config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)"\n id="pagination-container"\n >\n <p id="pagination-text">\n Showing\n {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n }}\n of {{ config.paginationConfig.totalNoOfRows }} items\n </p>\n <div id="pages-container">\n <span (click)="updateSelectedPage(config.paginationConfig?.selectedPage - 1)" class="page">\n <svg fill="none" height="10" viewBox="0 0 7 10" width="7" xmlns="http://www.w3.org/2000/svg">\n <path\n clip-rule="evenodd"\n d="M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z"\n fill="#181F33"\n fill-rule="evenodd"\n />\n </svg>\n </span>\n <div *ngFor="let pageNumber of pages">\n <span\n (click)="updateSelectedPage(pageNumber)"\n *ngIf="pageNumber != 0"\n [ngClass]="{ \'page-active\': pageNumber == config.paginationConfig?.selectedPage }"\n class="page"\n >{{ pageNumber }}</span\n >\n <span *ngIf="pageNumber == 0" class="page-seperator">\n <div style="display: flex">\n <span class="dot" style="margin-right: 4px"></span>\n <span class="dot" style="margin-right: 4px"></span>\n <span class="dot"></span>\n </div>\n </span>\n </div>\n <span (click)="updateSelectedPage(config.paginationConfig?.selectedPage + 1)" class="page">\n <svg fill="none" height="10" viewBox="0 0 7 10" width="7" xmlns="http://www.w3.org/2000/svg">\n <path\n clip-rule="evenodd"\n d="M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z"\n fill="#181F33"\n fill-rule="evenodd"\n />\n </svg>\n </span>\n </div>\n </div>\n</div>\n',styles:["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:-webkit-sticky;position:sticky;background-color:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #e0e0e0;top:0;left:0;right:0}.col-header{padding:0 16px;height:100%}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.2px;margin:0}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#0937b2}.t-row{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.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}"]}]}],r.ctorParameters=function(){return[{type:t.Renderer2}]},r.propDecorators={filtersUpdated:[{type:t.Output}],filter:[{type:t.ViewChild,args:["filter"]}],colHeaders:[{type:t.ViewChildren,args:["colHeaderRef"]}],pageSelected:[{type:t.Output}],config:[{type:t.Input,args:["tableConfig"]}],subTableconfig:[{type:t.Input}],tableDataLoading:[{type:t.Input}],expandedIndex:[{type:t.Input}],tableData:[{type:t.Input}],subTableData:[{type:t.Input}],subTableDataLoading:[{type:t.Input}],table:[{type:t.ViewChild,args:["table"]}]};var l=function(){function e(e,t){this.viewContainerRef=e,this.componentFactoryResolver=t}return Object.defineProperty(e.prototype,"customComponent",{set:function(e){this.component=e,this.createComponent()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"data",{set:function(e){this.cellData=e,this.ref&&(this.ref.instance.data=this.cellData)},enumerable:!1,configurable:!0}),e.prototype.createComponent=function(){if(this.component){var e=this.componentFactoryResolver.resolveComponentFactory(this.component);this.viewContainerRef.clear(),this.ref=this.viewContainerRef.createComponent(e),this.setData()}},e.prototype.setData=function(){this.ref.instance.data=this.cellData},e}();l.decorators=[{type:t.Directive,args:[{selector:"[customTableCell]"}]}],l.ctorParameters=function(){return[{type:t.ViewContainerRef},{type:t.ComponentFactoryResolver}]},l.propDecorators={customComponent:[{type:t.Input}],data:[{type:t.Input}]};var s=function(){function e(e){this.renderer=e,this.selectedPage=1,this.pages=[],this.tableData=[]}return e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewInit=function(){if(this.config.paginationConfig){var e=this.table.nativeElement.offsetHeight;this.renderer.setStyle(this.table.nativeElement,"height",e-56+"px")}},e.prototype.getContainerHeight=function(){return this.config.height?this.config.height:""},e.prototype.getContainerWidth=function(){return this.config.width?this.config.width:""},e.prototype.getColHeadersRowHeight=function(){return this.config.colHeadersRowConfig&&this.config.colHeadersRowConfig.height?this.config.colHeadersRowConfig.height:"44px"},e.prototype.getColHeadersRowBorderTop=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderTop)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderTop:""},e.prototype.getColHeadersRowBorderBottom=function(){var e,t;return this.config.colHeadersRowConfig&&(null===(e=this.config.colHeadersRowConfig.style)||void 0===e?void 0:e.borderBottom)?null===(t=this.config.colHeadersRowConfig.style)||void 0===t?void 0:t.borderBottom:"1px solid #E0E0E0"},e}();s.decorators=[{type:t.Component,args:[{selector:"sub-table",template:'<div\n id="main-container"\n [ngStyle]="{\n height: getContainerHeight(),\n width: getContainerWidth()\n }"\n>\n <div id="table-container" #table>\n <div\n id="col-headers-container"\n *ngIf="!!config.showHeader"\n [ngStyle]="{\n height: getColHeadersRowHeight(),\n \'border-top\': getColHeadersRowBorderTop(),\n \'border-bottom\': getColHeadersRowBorderBottom()\n }"\n >\n <div\n class="col-header"\n (click)="colHeader?.action ? colHeader?.action(colHeader) : null"\n *ngFor="let colHeader of config?.colHeaderConfig"\n [style]="colHeader?.style"\n [ngStyle]="{\n width: colHeader?.style?.width || \'\',\n cursor: colHeader.action ? \'pointer\' : \'default\',\n \'justify-content\': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p *ngIf="colHeader?.type !== \'custom\'" class="col-header-text">\n {{ colHeader?.data || " " }}\n </p>\n <ng-template\n *ngIf="colHeader?.type === \'custom\'"\n customTableCell\n [customComponent]="colHeader?.componentRef"\n [data]="colHeader.data"\n ></ng-template>\n </div>\n </div>\n <div>\n <cdk-virtual-scroll-viewport\n [minBufferPx]="config.dataContainerMaxHeight || \'400\'"\n [maxBufferPx]="config.dataContainerMaxHeight + 200 || \'600\'"\n [style.overflow]="\'overlay\'"\n [style.height]="config.dataContainerMaxHeight || \'400px\'"\n itemSize="50"\n id="data-container"\n >\n <div\n class="row-wrapper"\n *cdkVirtualFor="let row of tableData; let i = index"\n [ngStyle]="{\n backgroundColor: i % 2 === 0 ? \'#FAFAFA\' : null\n }"\n >\n <div class="t-row">\n <div\n (click)="config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null"\n *ngFor="let col of row; let i = index"\n [ngStyle]="{\n width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || \'\'\n }"\n class="t-col-container"\n >\n <div\n class="t-col"\n [style]="config.colConfig[i]?.style"\n [ngStyle]="{\n width: \'100%\',\n cursor: config.colConfig[i].action ? \'pointer\' : \'default\',\n \'justify-content\': config.colConfig[i]?.style?.justifyContent\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i].type === \'number\'\n ? \'flex-end\'\n : \'space-between\'\n }"\n >\n <p\n *ngIf="config.colConfig[i].type !== \'custom\'"\n [ngStyle]="{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : \'\'\n }"\n class="t-col-text"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf="config.colConfig[i].type === \'custom\'"\n [customComponent]="config.colConfig[i].componentRef"\n [data]="col"\n customTableCell\n ></ng-template>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n',styles:["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header{height:100%;width:160px;padding:0 16px}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;letter-spacing:.2px;margin:0}"]}]}],s.ctorParameters=function(){return[{type:t.Renderer2}]},s.propDecorators={config:[{type:t.Input}],tableData:[{type:t.Input}],table:[{type:t.ViewChild,args:["table"]}]};var c=function(){function e(){this.filtersData=[],this.containerStyles={},this.filtersApplied=new t.EventEmitter,this.filtersMap={},this.searchValue="",this.mySort=function(e,t){return e.name<t.name?-1:t.name<e.name?1:0}}return e.prototype.ngOnInit=function(){var e=this;this.filtersData.forEach((function(t){e.filtersMap[t.value]=t}))},e.prototype.resetFilters=function(){var e=this;this.filtersData.forEach((function(t){e.filtersMap[t.value].checked=!1})),this.filtersApplied.emit([])},e.prototype.applyFilters=function(){var e=Object.values(this.filtersMap).filter((function(e){return e.checked})).map((function(e){return{name:e.name,value:e.value}}));this.filtersApplied.emit(e)},e.prototype.updateSearchValue=function(e){this.searchValue=e.target.value},e.prototype.updateFilter=function(e){this.filtersMap[e.name]&&(this.filtersMap[e.name].checked=!this.filtersMap[e.name].checked)},e.prototype.getFiltersBasedOnSearchValue=function(){var e=this,t=Object.values(this.filtersMap);return(t=t.filter((function(t){return t.name.match(new RegExp(e.searchValue,"i"))}))).sort(this.mySort)},e.prototype.getCheckedFilters=function(){var e=Object.values(this.filtersMap);return e=e.filter((function(e){return e.checked})).sort(this.mySort)},e}();c.decorators=[{type:t.Component,args:[{selector:"mis-table-filter",template:'<div id="main-container" #mainContainer [ngStyle]="containerStyles">\n <div id="search-bar-container">\n <input (keyup)="updateSearchValue($event)" type="text" placeholder="Search" />\n <svg id="search-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path\n fill-rule="evenodd"\n clip-rule="evenodd"\n d="M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z"\n fill="#6A737D"\n />\n </svg>\n </div>\n <div id="filters-main-container">\n <div class="filters-sub-container">\n <div *ngFor="let filter of getCheckedFilters()">\n <div class="filter">\n <mis-checkbox [checked]="true" [name]="filter.value" (valueChange)="updateFilter($event)"></mis-checkbox>\n <span class="filter-text">{{ filter.name }}</span>\n </div>\n </div>\n </div>\n <div class="separator" style="margin: 16px 0px" *ngIf="getCheckedFilters().length && getCheckedFilters().length < filtersData.length"></div>\n <div class="filters-sub-container">\n <div *ngFor="let filter of getFiltersBasedOnSearchValue()">\n <div class="filter" *ngIf="!filter.checked">\n <mis-checkbox [checked]="false" [name]="filter.value" (valueChange)="updateFilter($event)"></mis-checkbox>\n <span class="filter-text">{{ filter.name }}</span>\n </div>\n </div>\n <div id="no-results-container" *ngIf="getFiltersBasedOnSearchValue().length < 1">\n <span class="filter-text">No matches found</span>\n </div>\n </div>\n <div class="separator" style="margin: 16px 0px"></div>\n <div id="buttons-container">\n <button id="reset-btn" style="margin-right: 8px" (click)="resetFilters()">Reset</button>\n <button id="apply-btn" (click)="applyFilters()">Apply</button>\n </div>\n </div>\n</div>\n',styles:["#main-container{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container{width:100%;position:relative;margin-bottom:8px}input{width:100%;padding:12px 12px 12px 42px;border:1px solid #000;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33}input:focus{border:1px solid #0937b2}#search-icon{position:absolute;top:15px;left:12px}.filters-sub-container{max-height:144px;overflow-y:auto}.filter{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text{font-size:14px;line-height:20px;padding-left:8px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}"]}]}],c.ctorParameters=function(){return[]},c.propDecorators={filtersData:[{type:t.Input}],containerStyles:[{type:t.Input}],filtersApplied:[{type:t.Output}],container:[{type:t.ViewChild,args:["mainContainer"]}]};var d=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();d.decorators=[{type:t.NgModule,args:[{declarations:[r,s,c,l],imports:[n.CommonModule,i.CheckboxModule,o.ScrollingModule],exports:[r,s,c,l]}]}],e.CustomTableCellDirective=l,e.TableComponent=r,e.TableFilterComponent=c,e.TableModule=d,e.ɵa=s,Object.defineProperty(e,"__esModule",{value:!0})}));
16
16
  //# sourceMappingURL=mis-crystal-design-system-table.umd.min.js.map
package/bundles/mis-crystal-design-system-table.umd.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../node_modules/tslib/tslib.es6.js","../../../projects/mis-components/table/table.component.ts","../../../projects/mis-components/table/custom-table-cell.directive.ts","../../../projects/mis-components/table/sub-table/sub-table.component.ts","../../../projects/mis-components/table/filter/filter.component.ts","../../../projects/mis-components/table/table.module.ts"],"names":["Object","create","__values","o","s","Symbol","iterator","m","i","call","length","next","value","done","TypeError","TableComponent","renderer","this","activeRowIndex","showFilter","filterName","filterData","filterContainerStyles","appliedFilters","filtersUpdated","EventEmitter","pages","pageSelected","tableData","subTableData","prototype","selectRow","index","config","rowConfig","action","ngOnInit","_this","tableLength","initializeFilters","paginationConfig","initializePagination","undefined","canScrollHorizontally","document","addEventListener","event","filter","isCheckBoxClicked","target","className","container","nativeElement","contains","toggleFilter","ngAfterViewInit","height","setStyle","table","ngOnChanges","_e","_a","colHeaderConfig","_f","colHeader","filters","_g","e_2","_h","checked","push","name","data","offSet","colHeadersReversed","colHeaders","toArray","reverse","colHeadersReversed_1","colHeadersReversed_1_1","header","innerText","offsetWidth","top","right","updateAppliedFilters","emit","assign","len","noOfPages","updateSelectedPage","pageNumber","selectedPage","getContainerHeight","getContainerWidth","width","getColHeadersRowHeight","colHeadersRowConfig","getColHeadersRowBorderTop","style","borderTop","_b","getColHeadersRowBorderBottom","borderBottom","Component","args","selector","template","Renderer2","Output","ViewChild","ViewChildren","Input","CustomTableCellDirective","viewContainerRef","componentFactoryResolver","defineProperty","component","createComponent","cellData","ref","instance","cmpFactoryResolver","resolveComponentFactory","clear","setData","Directive","ViewContainerRef","ComponentFactoryResolver","SubTableComponent","offsetHeight","TableFilterComponent","filtersData","containerStyles","filtersApplied","filtersMap","searchValue","mySort","a","b","forEach","resetFilters","applyFilters","list","values","map","updateSearchValue","updateFilter","getFiltersBasedOnSearchValue","match","RegExp","sort","getCheckedFilters","TableModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","CheckboxModule","ScrollingModule","exports"],"mappings":"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","sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n ViewChildren\n} from \"@angular/core\";\nimport { Filter, TableFilterComponent } from \"./filter/filter.component\";\n\n@Component({\n selector: \"mis-table\",\n templateUrl: \"table.component.html\",\n styleUrls: [\"table.component.css\"]\n})\nexport class TableComponent implements OnInit, AfterViewInit, OnChanges {\n\n // Initialize with -1 to indicate no row is colored at the beginning\n activeRowIndex: number = 0; \n\n // Filter related variables\n showFilter: boolean = false;\n filterName: string = \"\";\n filterData: Array<Filter> = [];\n filterContainerStyles: any = {};\n appliedFilters: { [key: string]: Array<{ name: string; value: string }> } = {};\n @Output() filtersUpdated = new EventEmitter<{\n [key: string]: Array<{ name: string; value: string }>;\n }>();\n\n @ViewChild(\"filter\") filter: TableFilterComponent | any;\n @ViewChildren(\"colHeaderRef\") colHeaders: QueryList<ElementRef> | any;\n\n // Pagination related variables\n pages: Array<number> = [];\n tableLength: number;\n @Output() pageSelected = new EventEmitter<number>();\n\n @Input(\"tableConfig\") config: TableConfig | any;\n @Input() subTableconfig: TableConfig | any;\n @Input() tableDataLoading: boolean | any;\n @Input() expandedIndex: number | any;\n @Input() tableData: Array<Array<any>> = [];\n @Input() subTableData: Array<Array<any>> = [];\n @Input() subTableDataLoading: boolean | any;\n @ViewChild(\"table\") table: ElementRef | any;\n\n constructor(private renderer: Renderer2) { }\n\n // Function to handle row click\n selectRow(index: number) {\n this.activeRowIndex = index; // Set the selected index to the clicked row's index\n this.config.rowConfig.action(index);\n }\n ngOnInit(): void {\n this.tableLength = !!this.tableData ? this.tableData.length : 0;\n this.initializeFilters();\n if (this.config.paginationConfig) {\n this.initializePagination();\n }\n if (this.config.canScrollHorizontally === undefined) {\n this.config.canScrollHorizontally = false;\n }\n document.addEventListener(\"click\", event => {\n if (this.filter) {\n let isCheckBoxClicked = true;\n let targetElement = event.target as HTMLSpanElement;\n if (targetElement.className === \"checkmark\") {\n isCheckBoxClicked = true;\n this.showFilter = true;\n }\n let isClickInsideElement = this.filter.container.nativeElement.contains(event.target);\n if (!isClickInsideElement && !isCheckBoxClicked) {\n this.toggleFilter(this.filterName);\n }\n }\n });\n }\n ngAfterViewInit() {\n if (this.config.paginationConfig) {\n let height = this.config.height;\n this.renderer.setStyle(this.table.nativeElement, \"height\", height - 56 + \"px\");\n }\n }\n ngOnChanges() {\n this.tableLength = !!this.tableData ? this.tableData.length : 0;\n }\n\n // Filter related functions\n initializeFilters() {\n for (let colHeader of this.config?.colHeaderConfig) {\n if (colHeader.filters) {\n let filters = [];\n for (let filter of colHeader.filters) {\n if (filter.checked) {\n filters.push({\n name: filter.name,\n value: filter.value\n });\n }\n }\n if (filters.length > 0) this.appliedFilters[colHeader.data] = filters;\n }\n }\n }\n toggleFilter(filterName: string) {\n if (!this.showFilter) {\n this.filterName = filterName;\n this.showFilter = true;\n\n let offSet = 0;\n let colHeadersReversed = this.colHeaders.toArray().reverse();\n\n for (let header of colHeadersReversed) {\n if (header.nativeElement.innerText === filterName) break;\n offSet += header.nativeElement.offsetWidth;\n }\n this.filterContainerStyles = {\n top: \"44px\",\n right: offSet > 0 ? offSet - 116 + \"px\" : \"12px\"\n };\n } else {\n this.filterName = \"\";\n this.filterData = [];\n this.showFilter = false;\n }\n }\n updateAppliedFilters(appliedFilters: Array<{ name: string; value: string }>) {\n if (appliedFilters.length == 0) {\n delete this.appliedFilters[this.filterName];\n } else {\n this.appliedFilters[this.filterName] = appliedFilters;\n }\n this.filtersUpdated.emit({ ...this.appliedFilters });\n this.toggleFilter(this.filterName);\n }\n\n // Pagination related functions\n initializePagination() {\n if (this.config.paginationConfig) {\n let len = this.config.paginationConfig.noOfPages;\n if (len <= 7) {\n for (let i = 1; i <= len; i++) {\n this.pages.push(i);\n }\n } else {\n this.pages = [1, 2, 3, 4, 0, len];\n }\n }\n }\n updateSelectedPage(pageNumber: number) {\n if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages) return;\n this.config.paginationConfig.selectedPage = pageNumber;\n let len = this.config.paginationConfig.noOfPages;\n if (len > 7) {\n if (pageNumber - 2 <= 1) {\n this.pages = [1, 2, 3, 4, 0, len];\n } else if (pageNumber - 2 > 1 && pageNumber + 2 < len) {\n this.pages = [1, 0, pageNumber - 1, pageNumber, pageNumber + 1, 0, len];\n } else if (pageNumber + 2 >= len) {\n this.pages = [1, 0, len - 3, len - 2, len - 1, len];\n }\n }\n this.pageSelected.emit(this.config.paginationConfig?.selectedPage);\n }\n\n // Main container related functions\n getContainerHeight() {\n if (this.config?.height) return this.config.height;\n else return \"\";\n }\n getContainerWidth() {\n if (this.config?.width) return this.config.width;\n else return \"\";\n }\n\n // Column Headers related functions\n getColHeadersRowHeight() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {\n return this.config.colHeadersRowConfig.height;\n } else return \"44px\";\n }\n getColHeadersRowBorderTop() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderTop) {\n return this.config.colHeadersRowConfig.style?.borderTop;\n } else return \"\";\n }\n getColHeadersRowBorderBottom() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderBottom) {\n return this.config.colHeadersRowConfig.style?.borderBottom;\n } else return \"1px solid #E0E0E0\";\n }\n\n}\n\nexport interface TableConfig {\n height: string | \"100%\";\n width: string | \"100%\";\n paginationConfig?: PaginationConfig | undefined | null;\n colHeadersRowConfig: RowConfig | undefined | null;\n rowConfig: RowConfig | undefined | null;\n colHeaderConfig: Array<ColHeaderConfig>;\n colConfig: Array<ColConfig>;\n canExpand?: boolean;\n canScrollHorizontally?: boolean;\n cellHover?: boolean;\n}\nexport interface PaginationConfig {\n noOfPages: number;\n rowsPerPage: number;\n totalNoOfRows: number;\n selectedPage?: number;\n}\nexport interface RowConfig {\n height?: string | undefined | null;\n style?: {};\n action?: any;\n}\nexport interface ColHeaderConfig {\n type: \"text\" | \"number\" | \"custom\";\n data: any;\n componentRef?: any;\n filters?: Array<Filter> | null;\n style?: {};\n action?: any;\n}\nexport interface ColConfig {\n type: \"text\" | \"number\" | \"custom\";\n componentRef?: any;\n style?: {};\n action?: any;\n}\n","import { ComponentFactoryResolver, Directive, Input, ViewContainerRef } from \"@angular/core\";\n\n@Directive({\n selector: \"[customTableCell]\"\n})\nexport class CustomTableCellDirective {\n private ref: any;\n private component: any;\n private cellData: any;\n\n @Input() set customComponent(value: any) {\n this.component = value;\n this.createComponent();\n }\n @Input() set data(value: any) {\n this.cellData = value;\n if (this.ref) {\n this.ref.instance.data = this.cellData;\n }\n }\n\n constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {}\n\n createComponent() {\n if (this.component) {\n const cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(this.component);\n this.viewContainerRef.clear();\n this.ref = this.viewContainerRef.createComponent(cmpFactoryResolver);\n this.setData();\n }\n }\n setData() {\n this.ref.instance.data = this.cellData;\n }\n}\n","import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from \"@angular/core\";\n\n@Component({\n selector: \"sub-table\",\n templateUrl: \"sub-table.component.html\",\n styleUrls: [\"sub-table.component.css\"]\n})\nexport class SubTableComponent implements OnInit, AfterViewInit {\n selectedPage = 1;\n pages: Array<number> = [];\n\n @Input() config: SubTableConfig | any;\n @Input() tableData: Array<Array<any>> = [];\n @ViewChild(\"table\") table: ElementRef | any;\n constructor(private renderer: Renderer2) {}\n\n ngOnInit() {}\n\n ngAfterViewInit() {\n if (this.config.paginationConfig) {\n let height = this.table.nativeElement.offsetHeight;\n this.renderer.setStyle(this.table.nativeElement, \"height\", height - 56 + \"px\");\n }\n }\n\n // Main container related functions\n getContainerHeight() {\n if (this.config.height) return this.config.height;\n else return \"\";\n }\n getContainerWidth() {\n if (this.config.width) return this.config.width;\n else return \"\";\n }\n\n // Column Headers related functions\n getColHeadersRowHeight() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {\n return this.config.colHeadersRowConfig.height;\n } else return \"44px\";\n }\n getColHeadersRowBorderTop() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderTop) {\n return this.config.colHeadersRowConfig.style?.borderTop;\n } else return \"\";\n }\n getColHeadersRowBorderBottom() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderBottom) {\n return this.config.colHeadersRowConfig.style?.borderBottom;\n } else return \"1px solid #E0E0E0\";\n }\n}\n\nexport interface SubTableConfig {\n height: string | \"100%\";\n width: string | \"100%\";\n dataContainerMaxHeight: string | \"400px\";\n showHeader?: boolean | undefined;\n rowConfig: SubTableRowConfig | undefined | null;\n colHeaderConfig?: Array<SubTableColHeaderConfig>;\n colConfig: Array<SubTableColConfig>;\n}\n\nexport interface SubTableRowConfig {\n height?: string | undefined | null;\n style?: {};\n}\nexport interface SubTableColHeaderConfig {\n type: \"text\" | \"number\" | \"custom\";\n data: any;\n componentRef?: any;\n style?: {};\n action?: any;\n}\nexport interface SubTableColConfig {\n type: \"text\" | \"number\" | \"custom\";\n componentRef?: any;\n style?: {};\n action?: any;\n}\n","import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from \"@angular/core\";\n\n@Component({\n selector: \"mis-table-filter\",\n templateUrl: \"filter.component.html\",\n styleUrls: [\"filter.component.css\"]\n})\nexport class TableFilterComponent implements OnInit {\n @Input() filtersData: Array<Filter> = [];\n @Input() containerStyles: any = {};\n\n @Output() filtersApplied = new EventEmitter<any>();\n\n @ViewChild(\"mainContainer\") container: ElementRef | undefined;\n\n filtersMap: any = {};\n searchValue: string = \"\";\n\n constructor() {}\n\n ngOnInit(): void {\n this.filtersData.forEach(filter => {\n this.filtersMap[filter.value] = filter;\n });\n }\n resetFilters() {\n this.filtersData.forEach(filter => {\n this.filtersMap[filter.value].checked = false;\n });\n this.filtersApplied.emit([]);\n }\n applyFilters() {\n let list = Object.values(this.filtersMap)\n .filter((filter: Filter | any) => filter.checked)\n .map((filter: Filter | any) => {\n return {\n name: filter.name,\n value: filter.value\n };\n });\n this.filtersApplied.emit(list);\n }\n updateSearchValue(event: any) {\n this.searchValue = event.target.value;\n }\n updateFilter(data: any) {\n if (this.filtersMap[data.name]) {\n this.filtersMap[data.name].checked = !this.filtersMap[data.name].checked;\n }\n }\n getFiltersBasedOnSearchValue(): Filter[] | any {\n let list = Object.values(this.filtersMap);\n list = list.filter((filter: Filter | any) => {\n return filter.name.match(new RegExp(this.searchValue, \"i\"));\n });\n return list.sort(this.mySort);\n }\n getCheckedFilters(): Filter[] | any {\n let list = Object.values(this.filtersMap);\n list = list.filter((filter: Filter | any) => filter.checked).sort(this.mySort);\n return list;\n }\n mySort = (a: Filter | any, b: Filter | any) => {\n if (a.name < b.name) return -1;\n else if (b.name < a.name) return 1;\n else return 0;\n };\n}\nexport interface Filter {\n name: string;\n value: string;\n checked: boolean;\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { TableComponent } from \"./table.component\";\nimport { CustomTableCellDirective } from \"./custom-table-cell.directive\";\nimport { SubTableComponent } from \"./sub-table/sub-table.component\";\nimport { CommonModule } from \"@angular/common\";\nimport { TableFilterComponent } from \"./filter/filter.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { ScrollingModule } from \"@angular/cdk/scrolling\";\n\n@NgModule({\n declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective],\n imports: [CommonModule, CheckboxModule, ScrollingModule],\n exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective]\n})\nexport class TableModule {\n static forRoot(): ModuleWithProviders<TableModule> {\n return { ngModule: TableModule, providers: [] };\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../node_modules/tslib/tslib.es6.js","../../../projects/mis-components/table/table.component.ts","../../../projects/mis-components/table/custom-table-cell.directive.ts","../../../projects/mis-components/table/sub-table/sub-table.component.ts","../../../projects/mis-components/table/filter/filter.component.ts","../../../projects/mis-components/table/table.module.ts"],"names":["Object","create","__values","o","s","Symbol","iterator","m","i","call","length","next","value","done","TypeError","TableComponent","renderer","this","activeRowIndex","showFilter","filterName","filterData","filterContainerStyles","appliedFilters","filtersUpdated","EventEmitter","pages","pageSelected","tableData","subTableData","prototype","selectRow","index","config","rowConfig","action","ngOnInit","_this","tableLength","initializeFilters","paginationConfig","initializePagination","undefined","canScrollHorizontally","document","addEventListener","event","filter","isCheckBoxClicked","target","className","container","nativeElement","contains","toggleFilter","ngAfterViewInit","height","setStyle","table","ngOnChanges","_e","_a","colHeaderConfig","_f","colHeader","filters","_g","e_2","_h","checked","push","name","data","offSet","colHeadersReversed","colHeaders","toArray","reverse","colHeadersReversed_1","colHeadersReversed_1_1","header","innerText","offsetWidth","top","right","updateAppliedFilters","emit","assign","len","noOfPages","updateSelectedPage","pageNumber","selectedPage","getContainerHeight","getContainerWidth","width","getColHeadersRowHeight","colHeadersRowConfig","getColHeadersRowBorderTop","style","borderTop","_b","getColHeadersRowBorderBottom","borderBottom","Component","args","selector","template","Renderer2","Output","ViewChild","ViewChildren","Input","CustomTableCellDirective","viewContainerRef","componentFactoryResolver","defineProperty","component","createComponent","cellData","ref","instance","cmpFactoryResolver","resolveComponentFactory","clear","setData","Directive","ViewContainerRef","ComponentFactoryResolver","SubTableComponent","offsetHeight","TableFilterComponent","filtersData","containerStyles","filtersApplied","filtersMap","searchValue","mySort","a","b","forEach","resetFilters","applyFilters","list","values","map","updateSearchValue","updateFilter","getFiltersBasedOnSearchValue","match","RegExp","sort","getCheckedFilters","TableModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","CheckboxModule","ScrollingModule","exports"],"mappings":"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","sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n ViewChildren\n} from \"@angular/core\";\nimport { Filter, TableFilterComponent } from \"./filter/filter.component\";\n\n@Component({\n selector: \"mis-table\",\n templateUrl: \"table.component.html\",\n styleUrls: [\"table.component.css\"]\n})\nexport class TableComponent implements OnInit, AfterViewInit, OnChanges {\n\n // Initialize with -1 to indicate no row is colored at the beginning\n activeRowIndex: number = 0; \n\n // Filter related variables\n showFilter: boolean = false;\n filterName: string = \"\";\n filterData: Array<Filter> = [];\n filterContainerStyles: any = {};\n appliedFilters: { [key: string]: Array<{ name: string; value: string }> } = {};\n @Output() filtersUpdated = new EventEmitter<{\n [key: string]: Array<{ name: string; value: string }>;\n }>();\n\n @ViewChild(\"filter\") filter: TableFilterComponent | any;\n @ViewChildren(\"colHeaderRef\") colHeaders: QueryList<ElementRef> | any;\n\n // Pagination related variables\n pages: Array<number> = [];\n tableLength: number;\n @Output() pageSelected = new EventEmitter<number>();\n\n @Input(\"tableConfig\") config: TableConfig | any;\n @Input() subTableconfig: TableConfig | any;\n @Input() tableDataLoading: boolean | any;\n @Input() expandedIndex: number | any;\n @Input() tableData: Array<Array<any>> = [];\n @Input() subTableData: Array<Array<any>> = [];\n @Input() subTableDataLoading: boolean | any;\n @ViewChild(\"table\") table: ElementRef | any;\n\n constructor(private renderer: Renderer2) { }\n\n // Function to handle row click\n selectRow(index: number) {\n this.activeRowIndex = index; // Set the selected index to the clicked row's index\n this.config.rowConfig.action(index);\n }\n ngOnInit(): void {\n this.tableLength = !!this.tableData ? this.tableData.length : 0;\n this.initializeFilters();\n if (this.config.paginationConfig) {\n this.initializePagination();\n }\n if (this.config.canScrollHorizontally === undefined) {\n this.config.canScrollHorizontally = false;\n }\n document.addEventListener(\"click\", event => {\n if (this.filter) {\n let isCheckBoxClicked = true;\n let targetElement = event.target as HTMLSpanElement;\n if (targetElement.className === \"checkmark\") {\n isCheckBoxClicked = true;\n this.showFilter = true;\n }\n let isClickInsideElement = this.filter.container.nativeElement.contains(event.target);\n if (!isClickInsideElement && !isCheckBoxClicked) {\n this.toggleFilter(this.filterName);\n }\n }\n });\n }\n ngAfterViewInit() {\n if (this.config.paginationConfig) {\n let height = this.config.height;\n this.renderer.setStyle(this.table.nativeElement, \"height\", height - 56 + \"px\");\n }\n }\n ngOnChanges() {\n this.tableLength = !!this.tableData ? this.tableData.length : 0;\n this.activeRowIndex = 0;\n }\n\n // Filter related functions\n initializeFilters() {\n for (let colHeader of this.config?.colHeaderConfig) {\n if (colHeader.filters) {\n let filters = [];\n for (let filter of colHeader.filters) {\n if (filter.checked) {\n filters.push({\n name: filter.name,\n value: filter.value\n });\n }\n }\n if (filters.length > 0) this.appliedFilters[colHeader.data] = filters;\n }\n }\n }\n toggleFilter(filterName: string) {\n if (!this.showFilter) {\n this.filterName = filterName;\n this.showFilter = true;\n\n let offSet = 0;\n let colHeadersReversed = this.colHeaders.toArray().reverse();\n\n for (let header of colHeadersReversed) {\n if (header.nativeElement.innerText === filterName) break;\n offSet += header.nativeElement.offsetWidth;\n }\n this.filterContainerStyles = {\n top: \"44px\",\n right: offSet > 0 ? offSet - 116 + \"px\" : \"12px\"\n };\n } else {\n this.filterName = \"\";\n this.filterData = [];\n this.showFilter = false;\n }\n }\n updateAppliedFilters(appliedFilters: Array<{ name: string; value: string }>) {\n if (appliedFilters.length == 0) {\n delete this.appliedFilters[this.filterName];\n } else {\n this.appliedFilters[this.filterName] = appliedFilters;\n }\n this.filtersUpdated.emit({ ...this.appliedFilters });\n this.toggleFilter(this.filterName);\n }\n\n // Pagination related functions\n initializePagination() {\n if (this.config.paginationConfig) {\n let len = this.config.paginationConfig.noOfPages;\n if (len <= 7) {\n for (let i = 1; i <= len; i++) {\n this.pages.push(i);\n }\n } else {\n this.pages = [1, 2, 3, 4, 0, len];\n }\n }\n }\n updateSelectedPage(pageNumber: number) {\n if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages) return;\n this.config.paginationConfig.selectedPage = pageNumber;\n let len = this.config.paginationConfig.noOfPages;\n if (len > 7) {\n if (pageNumber - 2 <= 1) {\n this.pages = [1, 2, 3, 4, 0, len];\n } else if (pageNumber - 2 > 1 && pageNumber + 2 < len) {\n this.pages = [1, 0, pageNumber - 1, pageNumber, pageNumber + 1, 0, len];\n } else if (pageNumber + 2 >= len) {\n this.pages = [1, 0, len - 3, len - 2, len - 1, len];\n }\n }\n this.pageSelected.emit(this.config.paginationConfig?.selectedPage);\n }\n\n // Main container related functions\n getContainerHeight() {\n if (this.config?.height) return this.config.height;\n else return \"\";\n }\n getContainerWidth() {\n if (this.config?.width) return this.config.width;\n else return \"\";\n }\n\n // Column Headers related functions\n getColHeadersRowHeight() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {\n return this.config.colHeadersRowConfig.height;\n } else return \"44px\";\n }\n getColHeadersRowBorderTop() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderTop) {\n return this.config.colHeadersRowConfig.style?.borderTop;\n } else return \"\";\n }\n getColHeadersRowBorderBottom() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderBottom) {\n return this.config.colHeadersRowConfig.style?.borderBottom;\n } else return \"1px solid #E0E0E0\";\n }\n\n}\n\nexport interface TableConfig {\n height: string | \"100%\";\n width: string | \"100%\";\n paginationConfig?: PaginationConfig | undefined | null;\n colHeadersRowConfig: RowConfig | undefined | null;\n rowConfig: RowConfig | undefined | null;\n colHeaderConfig: Array<ColHeaderConfig>;\n colConfig: Array<ColConfig>;\n canExpand?: boolean;\n canScrollHorizontally?: boolean;\n cellHover?: boolean;\n}\nexport interface PaginationConfig {\n noOfPages: number;\n rowsPerPage: number;\n totalNoOfRows: number;\n selectedPage?: number;\n}\nexport interface RowConfig {\n height?: string | undefined | null;\n style?: {};\n action?: any;\n}\nexport interface ColHeaderConfig {\n type: \"text\" | \"number\" | \"custom\";\n data: any;\n componentRef?: any;\n filters?: Array<Filter> | null;\n style?: {};\n action?: any;\n}\nexport interface ColConfig {\n type: \"text\" | \"number\" | \"custom\";\n componentRef?: any;\n style?: {};\n action?: any;\n}\n","import { ComponentFactoryResolver, Directive, Input, ViewContainerRef } from \"@angular/core\";\n\n@Directive({\n selector: \"[customTableCell]\"\n})\nexport class CustomTableCellDirective {\n private ref: any;\n private component: any;\n private cellData: any;\n\n @Input() set customComponent(value: any) {\n this.component = value;\n this.createComponent();\n }\n @Input() set data(value: any) {\n this.cellData = value;\n if (this.ref) {\n this.ref.instance.data = this.cellData;\n }\n }\n\n constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {}\n\n createComponent() {\n if (this.component) {\n const cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(this.component);\n this.viewContainerRef.clear();\n this.ref = this.viewContainerRef.createComponent(cmpFactoryResolver);\n this.setData();\n }\n }\n setData() {\n this.ref.instance.data = this.cellData;\n }\n}\n","import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from \"@angular/core\";\n\n@Component({\n selector: \"sub-table\",\n templateUrl: \"sub-table.component.html\",\n styleUrls: [\"sub-table.component.css\"]\n})\nexport class SubTableComponent implements OnInit, AfterViewInit {\n selectedPage = 1;\n pages: Array<number> = [];\n\n @Input() config: SubTableConfig | any;\n @Input() tableData: Array<Array<any>> = [];\n @ViewChild(\"table\") table: ElementRef | any;\n constructor(private renderer: Renderer2) {}\n\n ngOnInit() {}\n\n ngAfterViewInit() {\n if (this.config.paginationConfig) {\n let height = this.table.nativeElement.offsetHeight;\n this.renderer.setStyle(this.table.nativeElement, \"height\", height - 56 + \"px\");\n }\n }\n\n // Main container related functions\n getContainerHeight() {\n if (this.config.height) return this.config.height;\n else return \"\";\n }\n getContainerWidth() {\n if (this.config.width) return this.config.width;\n else return \"\";\n }\n\n // Column Headers related functions\n getColHeadersRowHeight() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.height) {\n return this.config.colHeadersRowConfig.height;\n } else return \"44px\";\n }\n getColHeadersRowBorderTop() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderTop) {\n return this.config.colHeadersRowConfig.style?.borderTop;\n } else return \"\";\n }\n getColHeadersRowBorderBottom() {\n if (this.config.colHeadersRowConfig && this.config.colHeadersRowConfig.style?.borderBottom) {\n return this.config.colHeadersRowConfig.style?.borderBottom;\n } else return \"1px solid #E0E0E0\";\n }\n}\n\nexport interface SubTableConfig {\n height: string | \"100%\";\n width: string | \"100%\";\n dataContainerMaxHeight: string | \"400px\";\n showHeader?: boolean | undefined;\n rowConfig: SubTableRowConfig | undefined | null;\n colHeaderConfig?: Array<SubTableColHeaderConfig>;\n colConfig: Array<SubTableColConfig>;\n}\n\nexport interface SubTableRowConfig {\n height?: string | undefined | null;\n style?: {};\n}\nexport interface SubTableColHeaderConfig {\n type: \"text\" | \"number\" | \"custom\";\n data: any;\n componentRef?: any;\n style?: {};\n action?: any;\n}\nexport interface SubTableColConfig {\n type: \"text\" | \"number\" | \"custom\";\n componentRef?: any;\n style?: {};\n action?: any;\n}\n","import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from \"@angular/core\";\n\n@Component({\n selector: \"mis-table-filter\",\n templateUrl: \"filter.component.html\",\n styleUrls: [\"filter.component.css\"]\n})\nexport class TableFilterComponent implements OnInit {\n @Input() filtersData: Array<Filter> = [];\n @Input() containerStyles: any = {};\n\n @Output() filtersApplied = new EventEmitter<any>();\n\n @ViewChild(\"mainContainer\") container: ElementRef | undefined;\n\n filtersMap: any = {};\n searchValue: string = \"\";\n\n constructor() {}\n\n ngOnInit(): void {\n this.filtersData.forEach(filter => {\n this.filtersMap[filter.value] = filter;\n });\n }\n resetFilters() {\n this.filtersData.forEach(filter => {\n this.filtersMap[filter.value].checked = false;\n });\n this.filtersApplied.emit([]);\n }\n applyFilters() {\n let list = Object.values(this.filtersMap)\n .filter((filter: Filter | any) => filter.checked)\n .map((filter: Filter | any) => {\n return {\n name: filter.name,\n value: filter.value\n };\n });\n this.filtersApplied.emit(list);\n }\n updateSearchValue(event: any) {\n this.searchValue = event.target.value;\n }\n updateFilter(data: any) {\n if (this.filtersMap[data.name]) {\n this.filtersMap[data.name].checked = !this.filtersMap[data.name].checked;\n }\n }\n getFiltersBasedOnSearchValue(): Filter[] | any {\n let list = Object.values(this.filtersMap);\n list = list.filter((filter: Filter | any) => {\n return filter.name.match(new RegExp(this.searchValue, \"i\"));\n });\n return list.sort(this.mySort);\n }\n getCheckedFilters(): Filter[] | any {\n let list = Object.values(this.filtersMap);\n list = list.filter((filter: Filter | any) => filter.checked).sort(this.mySort);\n return list;\n }\n mySort = (a: Filter | any, b: Filter | any) => {\n if (a.name < b.name) return -1;\n else if (b.name < a.name) return 1;\n else return 0;\n };\n}\nexport interface Filter {\n name: string;\n value: string;\n checked: boolean;\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { TableComponent } from \"./table.component\";\nimport { CustomTableCellDirective } from \"./custom-table-cell.directive\";\nimport { SubTableComponent } from \"./sub-table/sub-table.component\";\nimport { CommonModule } from \"@angular/common\";\nimport { TableFilterComponent } from \"./filter/filter.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { ScrollingModule } from \"@angular/cdk/scrolling\";\n\n@NgModule({\n declarations: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective],\n imports: [CommonModule, CheckboxModule, ScrollingModule],\n exports: [TableComponent, SubTableComponent, TableFilterComponent, CustomTableCellDirective]\n})\nexport class TableModule {\n static forRoot(): ModuleWithProviders<TableModule> {\n return { ngModule: TableModule, providers: [] };\n }\n}\n"]}
package/dynamic-form/mis-crystal-design-system-dynamic-form.metadata.json CHANGED
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"metadata":{"DynamicFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DynamicFormComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":19,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":20,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/switch","name":"SwitchModule","line":21,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/multi-select-dropdown","name":"MultiSelectDropdownModule","line":22,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/datepicker_v2","name":"DatepickerModuleV2","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"DynamicFormComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DynamicFormModule"},"providers":[]}}}},"DynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"mis-dynamic-form","template":"<form [formGroup]=\"dynamicForm\">\n <ng-container formArrayName=\"dynamicFields\">\n <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i],\n formGroup: fieldControl,\n control: fieldControl.controls.value\n }\"\n >\n <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && formFields[i]?.subFields?.length > 0\">\n <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i].subFields[j],\n control: subFieldControl\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" />\n <ng-container *ngIf=\"control.touched && control.errors\"\n [ngTemplateOutlet]=\"dynamicFieldErrors\" \n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n >\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea class=\"input-field ip-textarea\" type=\"text\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'date' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div class=\"date-picker-container\">\n <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n [value]=\"control.value\" #dp />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n (click)=\"dp.click()\" />\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n </mis-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n <div id=\"error-messages-container\">\n <ng-container *ngFor=\"let error of errors | keyvalue\">\n <p class=\"h8\">\n {{\" • &nbsp;\" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>","styles":["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}"]}]}],"members":{"formFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"formValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"activeBtnIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"calendarIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"formUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"formValid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"formInitialized":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onFormValueChanges":[{"__symbolic":"method"}],"generateDynamicFieldsValueObject":[{"__symbolic":"method"}],"generateDynamicForm":[{"__symbolic":"method"}],"getDynamicFieldsControls":[{"__symbolic":"method"}],"updateSubDynamicFields":[{"__symbolic":"method"}],"updateSelectedValueForSingleSelect":[{"__symbolic":"method"}],"updateSelectedValueForMultiSelect":[{"__symbolic":"method"}],"isCheckBoxSelected":[{"__symbolic":"method"}],"generateSubDynamicFields":[{"__symbolic":"method"}],"mapFormValueToFormField":[{"__symbolic":"method"}],"mapFormFieldToFormValue":[{"__symbolic":"method"}]}}},"origins":{"DynamicFormModule":"./dynamic-form.module","DynamicFormComponent":"./dynamic-form.component"},"importAs":"mis-crystal-design-system/dynamic-form"}
1
+ {"__symbolic":"module","version":4,"metadata":{"DynamicFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DynamicFormComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":19,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":20,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/switch","name":"SwitchModule","line":21,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/multi-select-dropdown","name":"MultiSelectDropdownModule","line":22,"character":4},{"__symbolic":"reference","module":"mis-crystal-design-system/datepicker_v2","name":"DatepickerModuleV2","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"DynamicFormComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DynamicFormModule"},"providers":[]}}}},"DynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"mis-dynamic-form","template":"<form [formGroup]=\"dynamicForm\">\n <ng-container formArrayName=\"dynamicFields\">\n <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i],\n formGroup: fieldControl,\n control: fieldControl.controls.value\n }\"\n >\n <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && formFields[i]?.subFields?.length > 0\">\n <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i].subFields[j],\n control: subFieldControl\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n <ng-container *ngIf=\"control.touched && control.errors\"\n [ngTemplateOutlet]=\"dynamicFieldErrors\" \n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n >\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea class=\"input-field ip-textarea\" type=\"text\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'date' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div class=\"date-picker-container\">\n <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n [value]=\"control.value\" #dp />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n (click)=\"dp.click()\" />\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n </mis-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n <div id=\"error-messages-container\">\n <ng-container *ngFor=\"let error of errors | keyvalue\">\n <p class=\"h8\">\n {{\" • &nbsp;\" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>","styles":["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}"]}]}],"members":{"formFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"formValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"activeBtnIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"calendarIconUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"formUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"formValid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"formInitialized":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onFormValueChanges":[{"__symbolic":"method"}],"generateDynamicFieldsValueObject":[{"__symbolic":"method"}],"generateDynamicForm":[{"__symbolic":"method"}],"getDynamicFieldsControls":[{"__symbolic":"method"}],"updateSubDynamicFields":[{"__symbolic":"method"}],"updateSelectedValueForSingleSelect":[{"__symbolic":"method"}],"updateSelectedValueForMultiSelect":[{"__symbolic":"method"}],"isCheckBoxSelected":[{"__symbolic":"method"}],"generateSubDynamicFields":[{"__symbolic":"method"}],"mapFormValueToFormField":[{"__symbolic":"method"}],"mapFormFieldToFormValue":[{"__symbolic":"method"}]}}},"origins":{"DynamicFormModule":"./dynamic-form.module","DynamicFormComponent":"./dynamic-form.component"},"importAs":"mis-crystal-design-system/dynamic-form"}