mis-crystal-design-system 14.0.52 → 14.0.54-test
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.
- package/analytics/analytics.service.d.ts +5 -1
- package/esm2020/analytics/analytics.service.mjs +7 -6
- package/esm2020/dropdown/dropdown.component.mjs +68 -59
- package/esm2020/dynamic-form/dynamic-form.component.mjs +223 -159
- package/esm2020/table/table.component.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-analytics.mjs +3 -7
- package/fesm2015/mis-crystal-design-system-analytics.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dropdown.mjs +69 -58
- package/fesm2015/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +237 -157
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-analytics.mjs +6 -5
- package/fesm2020/mis-crystal-design-system-analytics.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dropdown.mjs +67 -58
- package/fesm2020/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +222 -158
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -440,10 +440,10 @@ TableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableCompone
|
|
|
440
440
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
441
441
|
i0.ɵɵadvance(1);
|
|
442
442
|
i0.ɵɵproperty("ngIf", (ctx.config == null ? null : ctx.config.paginationConfig) && (ctx.tableLength >= ctx.config.paginationConfig.rowsPerPage || (ctx.config.paginationConfig == null ? null : ctx.config.paginationConfig.selectedPage) !== 1));
|
|
443
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2.SubTableComponent, i3.TableFilterComponent, i4.CustomTableCellDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container[_ngcontent-%COMP%]{display:flex;align-items:center;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[_ngcontent-%COMP%]{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.filter-icon[_ngcontent-%COMP%]{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active[_ngcontent-%COMP%]{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row[_ngcontent-%COMP%]{height:auto;border-bottom:none}.loader[_ngcontent-%COMP%] .mat-progress-spinner circle, .mat-spinner[_ngcontent-%COMP%] circle[_ngcontent-%COMP%]{stroke:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.t-col-container[_ngcontent-%COMP%]{padding:0 16px}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:#e6ebf7}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid #e0e0e0}.t-col[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%}.t-col-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}#pagination-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:#6a737d;margin:0 96px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.page-seperator[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot[_ngcontent-%COMP%]{height:3px;width:3px;border-radius:50%;background:#6a737d}.page-active[_ngcontent-%COMP%]{color:#0937b2;border:1px solid #0937b2}"] });
|
|
443
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2.SubTableComponent, i3.TableFilterComponent, i4.CustomTableCellDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container[_ngcontent-%COMP%]{display:flex;align-items:center;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[_ngcontent-%COMP%]{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.filter-icon[_ngcontent-%COMP%]{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active[_ngcontent-%COMP%]{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row[_ngcontent-%COMP%]{height:auto;border-bottom:none}.loader[_ngcontent-%COMP%] .mat-progress-spinner circle, .mat-spinner[_ngcontent-%COMP%] circle[_ngcontent-%COMP%]{stroke:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.t-col-container[_ngcontent-%COMP%]{padding:0 16px}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:#e6ebf7}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid #e0e0e0}.t-col[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%}.t-col-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}#pagination-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:#6a737d;margin:0 96px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.page-seperator[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot[_ngcontent-%COMP%]{height:3px;width:3px;border-radius:50%;background:#6a737d}.page-active[_ngcontent-%COMP%]{color:#0937b2;border:1px solid #0937b2}"] });
|
|
444
444
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
445
445
|
type: Component,
|
|
446
|
-
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]=\"getColHeadersRowStyles()\"\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:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;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;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;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:#0000}.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{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;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{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.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}\n"] }]
|
|
446
|
+
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]=\"getColHeadersRowStyles()\"\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:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;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;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;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:#0000}.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{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;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{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.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}\n"] }]
|
|
447
447
|
}], function () { return [{ type: i0.Renderer2 }]; }, { filtersUpdated: [{
|
|
448
448
|
type: Output
|
|
449
449
|
}], filter: [{
|
|
@@ -31,16 +31,12 @@ class AnalyticsService {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
|
-
send(eventAction, event_category, event_label, event_value, force = false) {
|
|
34
|
+
send(eventAction, event_category, event_label, event_value, force = false, customParameters) {
|
|
35
35
|
if (!this.scriptLoaded && !force) {
|
|
36
|
-
this.pendingEvents.push(["event", eventAction, event_category, event_label, event_value]);
|
|
36
|
+
this.pendingEvents.push(["event", eventAction, event_category, event_label, event_value, customParameters]);
|
|
37
37
|
return;
|
|
38
38
|
}
|
|
39
|
-
gtag === null || gtag === void 0 ? void 0 : gtag("event", eventAction, {
|
|
40
|
-
event_category,
|
|
41
|
-
event_label,
|
|
42
|
-
event_value
|
|
43
|
-
});
|
|
39
|
+
gtag === null || gtag === void 0 ? void 0 : gtag("event", eventAction, Object.assign({ event_category: event_category, event_label: event_label, event_value: event_value }, customParameters));
|
|
44
40
|
}
|
|
45
41
|
setIdentity(identifier) {
|
|
46
42
|
if (!this.scriptLoaded) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-analytics.mjs","sources":["../../../projects/mis-components/analytics/analytics.service.ts","../../../projects/mis-components/analytics/analytics.module.ts","../../../projects/mis-components/analytics/mis-crystal-design-system-analytics.ts"],"sourcesContent":["import { DOCUMENT } from \"@angular/common\";\nimport { Inject, Injectable, Renderer2 } from \"@angular/core\";\ndeclare const gtag: Function;\n\n@Injectable({\n providedIn: \"root\"\n})\nexport class AnalyticsService {\n private scriptLoaded = false;\n private pendingEvents:
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-analytics.mjs","sources":["../../../projects/mis-components/analytics/analytics.service.ts","../../../projects/mis-components/analytics/analytics.module.ts","../../../projects/mis-components/analytics/mis-crystal-design-system-analytics.ts"],"sourcesContent":["import { DOCUMENT } from \"@angular/common\";\nimport { Inject, Injectable, Renderer2 } from \"@angular/core\";\ndeclare const gtag: Function;\ntype TCustomParameters = { [key: string]: string | number | boolean };\ntype TPendingEvents = ([\"event\", string, string, string?, string?, TCustomParameters?] | [\"set\", string])[];\n\n@Injectable({\n providedIn: \"root\"\n})\nexport class AnalyticsService {\n private scriptLoaded = false;\n private pendingEvents: TPendingEvents = [];\n\n constructor(@Inject(DOCUMENT) private document: any) {}\n\n insertScript(measurementId: string, renderer: Renderer2): void {\n const loadScript = renderer.createElement(\"script\");\n loadScript.setAttribute(\"async\", true);\n loadScript.setAttribute(\"src\", `https://www.googletagmanager.com/gtag/js?id=${measurementId}`);\n\n const initScript = renderer.createElement(\"script\");\n initScript.innerText = `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\\'js\\', new Date());gtag(\\'config\\', \\'${measurementId}\\');`;\n renderer.appendChild(this.document.head, loadScript);\n renderer.appendChild(this.document.head, initScript);\n this.handlePendingEvents(loadScript);\n }\n\n private handlePendingEvents(script: HTMLScriptElement): void {\n script.addEventListener(\"load\", () => {\n this.scriptLoaded = true;\n for (const eventDetails of this.pendingEvents) {\n if (eventDetails[0] === \"event\") {\n this.send(eventDetails[1], eventDetails[2], eventDetails[3], eventDetails[4]);\n } else if (eventDetails[0] === \"set\") {\n this.setIdentity(eventDetails[1]);\n }\n }\n });\n }\n\n send(\n eventAction: string, \n event_category: string, \n event_label?: string, \n event_value?: string, \n force = false, \n customParameters?: TCustomParameters\n ): void {\n if (!this.scriptLoaded && !force) {\n this.pendingEvents.push([\"event\", eventAction, event_category, event_label, event_value, customParameters]);\n return;\n }\n gtag?.(\"event\", eventAction, {\n event_category: event_category,\n event_label: event_label,\n event_value: event_value,\n ...customParameters\n });\n }\n\n setIdentity(identifier: string): void {\n if (!this.scriptLoaded) {\n this.pendingEvents.push([\"set\", identifier]);\n return;\n }\n gtag?.(\"set\", { user_id: identifier });\n }\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { AnalyticsService } from \"./analytics.service\";\n\n@NgModule()\nexport class AnalyticsModule {\n static forRoot(): ModuleWithProviders<AnalyticsModule> {\n return {\n ngModule: AnalyticsModule,\n providers: [AnalyticsService]\n };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,gBAAgB,CAAA;AAI3B,IAAA,WAAA,CAAsC,QAAa,EAAA;AAAb,QAAA,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAK;AAH3C,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;AACrB,QAAA,IAAa,CAAA,aAAA,GAAmB,EAAE,CAAC;KAEY;IAEvD,YAAY,CAAC,aAAqB,EAAE,QAAmB,EAAA;QACrD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACpD,QAAA,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACvC,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,CAA+C,4CAAA,EAAA,aAAa,CAAE,CAAA,CAAC,CAAC;QAE/F,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACpD,QAAA,UAAU,CAAC,SAAS,GAAG,CAAoI,iIAAA,EAAA,aAAa,MAAM,CAAC;QAC/K,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QACrD,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AACrD,QAAA,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC;KACtC;AAEO,IAAA,mBAAmB,CAAC,MAAyB,EAAA;AACnD,QAAA,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAK;AACnC,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;AACzB,YAAA,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,aAAa,EAAE;AAC7C,gBAAA,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE;oBAC/B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,iBAAA;AAAM,qBAAA,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;oBACpC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AACnC,iBAAA;AACF,aAAA;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,IAAI,CACF,WAAmB,EACnB,cAAsB,EACtB,WAAoB,EACpB,WAAoB,EACpB,KAAK,GAAG,KAAK,EACb,gBAAoC,EAAA;AAEpC,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;YAC5G,OAAO;AACR,SAAA;QACD,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAG,OAAO,EAAE,WAAW,EAAA,MAAA,CAAA,MAAA,CAAA,EACzB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EAAA,EACrB,gBAAgB,CAAA,CACnB,CAAC;KACJ;AAED,IAAA,WAAW,CAAC,UAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;YAC7C,OAAO;AACR,SAAA;AACD,QAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAG,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC;KACxC;;AAzDU,gBAAA,CAAA,IAAA,GAAA,SAAA,wBAAA,CAAA,CAAA,EAAA,EAAA,OAAA,KAAA,CAAA,IAAA,gBAAgB,cAIP,QAAQ,CAAA,CAAA,CAAA,EAAA,CAAA;sEAJjB,gBAAgB,EAAA,OAAA,EAAhB,gBAAgB,CAAA,IAAA,EAAA,UAAA,EAFf,MAAM,EAAA,CAAA,CAAA;;4EAEP,gBAAgB,EAAA,CAAA;kBAH5B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;iBACnB,CAAA;;;8BAKc,MAAM;+BAAC,QAAQ,CAAA;;;;;MCRjB,eAAe,CAAA;AAC1B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,eAAe;YACzB,SAAS,EAAE,CAAC,gBAAgB,CAAC;SAC9B,CAAC;KACH;;8EANU,eAAe,GAAA,CAAA,EAAA,CAAA;iEAAf,eAAe,EAAA,CAAA,CAAA;;;4EAAf,eAAe,EAAA,CAAA;kBAD3B,QAAQ;;;;ACJT;;AAEG;;;;"}
|
|
@@ -23,7 +23,7 @@ function DropdownComponent_img_3_Template(rf, ctx) {
|
|
|
23
23
|
}
|
|
24
24
|
if (rf & 2) {
|
|
25
25
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
26
|
-
i0.ɵɵproperty("src", ctx_r1.selectedItem.customIcon, i0.ɵɵsanitizeUrl);
|
|
26
|
+
i0.ɵɵproperty("width", 16)("height", 16)("src", ctx_r1.selectedItem == null ? null : ctx_r1.selectedItem.customIcon, i0.ɵɵsanitizeUrl);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
function DropdownComponent_p_5_Template(rf, ctx) {
|
|
@@ -35,7 +35,7 @@ function DropdownComponent_p_5_Template(rf, ctx) {
|
|
|
35
35
|
if (rf & 2) {
|
|
36
36
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
37
37
|
i0.ɵɵadvance(1);
|
|
38
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r2.multiLine ? ctx_r2.selectedItem.label == null ? null : ctx_r2.selectedItem.label.primaryText : ctx_r2.selectedItem.label || ctx_r2.label, " ");
|
|
38
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.multiLine ? ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.label == null ? null : ctx_r2.selectedItem.label.primaryText : (ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.label) || ctx_r2.label, " ");
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
function DropdownComponent_ng_template_6_p_0_Template(rf, ctx) {
|
|
@@ -56,7 +56,7 @@ function DropdownComponent_ng_template_6_img_1_Template(rf, ctx) {
|
|
|
56
56
|
}
|
|
57
57
|
if (rf & 2) {
|
|
58
58
|
const ctx_r8 = i0.ɵɵnextContext(2);
|
|
59
|
-
i0.ɵɵproperty("src", ctx_r8.selectedItem.icon, i0.ɵɵsanitizeUrl);
|
|
59
|
+
i0.ɵɵproperty("src", ctx_r8.selectedItem == null ? null : ctx_r8.selectedItem.icon, i0.ɵɵsanitizeUrl);
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
function DropdownComponent_ng_template_6_Template(rf, ctx) {
|
|
@@ -66,9 +66,9 @@ function DropdownComponent_ng_template_6_Template(rf, ctx) {
|
|
|
66
66
|
}
|
|
67
67
|
if (rf & 2) {
|
|
68
68
|
const ctx_r4 = i0.ɵɵnextContext();
|
|
69
|
-
i0.ɵɵproperty("ngIf", !ctx_r4.selectedItem.icon);
|
|
69
|
+
i0.ɵɵproperty("ngIf", !(ctx_r4.selectedItem == null ? null : ctx_r4.selectedItem.icon));
|
|
70
70
|
i0.ɵɵadvance(1);
|
|
71
|
-
i0.ɵɵproperty("ngIf", !!ctx_r4.selectedItem.icon);
|
|
71
|
+
i0.ɵɵproperty("ngIf", !!(ctx_r4.selectedItem == null ? null : ctx_r4.selectedItem.icon));
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
function DropdownComponent_ng_template_10_div_1__svg_svg_1_Template(rf, ctx) {
|
|
@@ -81,10 +81,10 @@ function DropdownComponent_ng_template_10_div_1__svg_svg_1_Template(rf, ctx) {
|
|
|
81
81
|
}
|
|
82
82
|
function DropdownComponent_ng_template_10_div_1__svg_svg_3_Template(rf, ctx) {
|
|
83
83
|
if (rf & 1) {
|
|
84
|
-
const
|
|
84
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
85
85
|
i0.ɵɵnamespaceSVG();
|
|
86
86
|
i0.ɵɵelementStart(0, "svg", 26);
|
|
87
|
-
i0.ɵɵlistener("click", function DropdownComponent_ng_template_10_div_1__svg_svg_3_Template__svg_svg_click_0_listener($event) { i0.ɵɵrestoreView(
|
|
87
|
+
i0.ɵɵlistener("click", function DropdownComponent_ng_template_10_div_1__svg_svg_3_Template__svg_svg_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r15.searchInputCanceled($event)); });
|
|
88
88
|
i0.ɵɵelement(1, "path", 27);
|
|
89
89
|
i0.ɵɵelementEnd();
|
|
90
90
|
}
|
|
@@ -92,11 +92,11 @@ function DropdownComponent_ng_template_10_div_1__svg_svg_3_Template(rf, ctx) {
|
|
|
92
92
|
const _c2 = function (a0, a1, a2) { return { paddingLeft: a0, border: a1, paddingRight: a2 }; };
|
|
93
93
|
function DropdownComponent_ng_template_10_div_1_Template(rf, ctx) {
|
|
94
94
|
if (rf & 1) {
|
|
95
|
-
const
|
|
95
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
96
96
|
i0.ɵɵelementStart(0, "div", 20);
|
|
97
97
|
i0.ɵɵtemplate(1, DropdownComponent_ng_template_10_div_1__svg_svg_1_Template, 2, 0, "svg", 21);
|
|
98
98
|
i0.ɵɵelementStart(2, "input", 22);
|
|
99
|
-
i0.ɵɵlistener("ngModelChange", function DropdownComponent_ng_template_10_div_1_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(
|
|
99
|
+
i0.ɵɵlistener("ngModelChange", function DropdownComponent_ng_template_10_div_1_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r17.searchInputOnChange($event)); })("focus", function DropdownComponent_ng_template_10_div_1_Template_input_focus_2_listener() { i0.ɵɵrestoreView(_r18); const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r19.searchInputFocused(true)); });
|
|
100
100
|
i0.ɵɵelementEnd();
|
|
101
101
|
i0.ɵɵtemplate(3, DropdownComponent_ng_template_10_div_1__svg_svg_3_Template, 2, 0, "svg", 23);
|
|
102
102
|
i0.ɵɵelementEnd();
|
|
@@ -106,7 +106,8 @@ function DropdownComponent_ng_template_10_div_1_Template(rf, ctx) {
|
|
|
106
106
|
i0.ɵɵadvance(1);
|
|
107
107
|
i0.ɵɵproperty("ngIf", !ctx_r9.isSearchInputFocused);
|
|
108
108
|
i0.ɵɵadvance(1);
|
|
109
|
-
i0.ɵɵproperty("ngModel", ctx_r9.searchInput)("ngStyle", i0.ɵɵpureFunction3(
|
|
109
|
+
i0.ɵɵproperty("ngModel", ctx_r9.searchInput)("ngStyle", i0.ɵɵpureFunction3(7, _c2, ctx_r9.isSearchInputFocused ? "12px" : "45px", ctx_r9.isSearchInputFocused ? "1px solid #0937B2" : "1px solid #e0e0e0", ctx_r9.isSearchInputFocused ? "45px" : "10px"))("tabIndex", 0)("placeholder", ctx_r9.isSearchInputFocused ? "" : ctx_r9.searchLabel);
|
|
110
|
+
i0.ɵɵattribute("aria-label", ctx_r9.searchLabel);
|
|
110
111
|
i0.ɵɵadvance(1);
|
|
111
112
|
i0.ɵɵproperty("ngIf", ctx_r9.isSearchInputFocused);
|
|
112
113
|
}
|
|
@@ -122,6 +123,11 @@ function DropdownComponent_ng_template_10_div_2_Template(rf, ctx) {
|
|
|
122
123
|
i0.ɵɵproperty("mobileView", true);
|
|
123
124
|
}
|
|
124
125
|
}
|
|
126
|
+
function DropdownComponent_ng_template_10_div_3_Template(rf, ctx) {
|
|
127
|
+
if (rf & 1) {
|
|
128
|
+
i0.ɵɵelement(0, "div", 30);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
125
131
|
function DropdownComponent_ng_template_10_div_4_div_2_div_1_span_3_Template(rf, ctx) {
|
|
126
132
|
if (rf & 1) {
|
|
127
133
|
i0.ɵɵelementStart(0, "span", 40);
|
|
@@ -129,32 +135,32 @@ function DropdownComponent_ng_template_10_div_4_div_2_div_1_span_3_Template(rf,
|
|
|
129
135
|
i0.ɵɵelementEnd();
|
|
130
136
|
}
|
|
131
137
|
if (rf & 2) {
|
|
132
|
-
const
|
|
133
|
-
const
|
|
134
|
-
i0.ɵɵproperty("ngStyle",
|
|
138
|
+
const item_r22 = i0.ɵɵnextContext(2).$implicit;
|
|
139
|
+
const ctx_r25 = i0.ɵɵnextContext(3);
|
|
140
|
+
i0.ɵɵproperty("ngStyle", ctx_r25.getIconStyles(item_r22.icon, ctx_r25.activeItem));
|
|
135
141
|
i0.ɵɵadvance(1);
|
|
136
|
-
i0.ɵɵtextInterpolate1(" ", (
|
|
142
|
+
i0.ɵɵtextInterpolate1(" ", (item_r22.label == null ? null : item_r22.label.secondaryText) ? item_r22.label == null ? null : item_r22.label.secondaryText : ctx_r25.additionalInfoMessage, " ");
|
|
137
143
|
}
|
|
138
144
|
}
|
|
139
145
|
const _c3 = function (a0, a1, a2) { return { width: a0, "display": a1, "flex-direction": a2 }; };
|
|
140
146
|
function DropdownComponent_ng_template_10_div_4_div_2_div_1_Template(rf, ctx) {
|
|
141
147
|
if (rf & 1) {
|
|
142
|
-
i0.ɵɵelementStart(0, "div",
|
|
148
|
+
i0.ɵɵelementStart(0, "div", 4)(1, "span", 38);
|
|
143
149
|
i0.ɵɵtext(2);
|
|
144
150
|
i0.ɵɵelementEnd();
|
|
145
151
|
i0.ɵɵtemplate(3, DropdownComponent_ng_template_10_div_4_div_2_div_1_span_3_Template, 2, 2, "span", 39);
|
|
146
152
|
i0.ɵɵelementEnd();
|
|
147
153
|
}
|
|
148
154
|
if (rf & 2) {
|
|
149
|
-
const
|
|
150
|
-
const
|
|
151
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(4, _c3,
|
|
155
|
+
const item_r22 = i0.ɵɵnextContext().$implicit;
|
|
156
|
+
const ctx_r23 = i0.ɵɵnextContext(3);
|
|
157
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(4, _c3, item_r22.icon ? "90%" : "100%", ctx_r23.multiLine ? "flex" : "inherit", ctx_r23.multiLine ? "column" : "inherit"));
|
|
152
158
|
i0.ɵɵadvance(1);
|
|
153
|
-
i0.ɵɵproperty("ngStyle",
|
|
159
|
+
i0.ɵɵproperty("ngStyle", ctx_r23.getIconStyles(item_r22.icon, ctx_r23.activeItem));
|
|
154
160
|
i0.ɵɵadvance(1);
|
|
155
|
-
i0.ɵɵtextInterpolate(
|
|
161
|
+
i0.ɵɵtextInterpolate(ctx_r23.multiLine ? item_r22.label == null ? null : item_r22.label.primaryText : item_r22.label);
|
|
156
162
|
i0.ɵɵadvance(1);
|
|
157
|
-
i0.ɵɵproperty("ngIf",
|
|
163
|
+
i0.ɵɵproperty("ngIf", ctx_r23.multiLine);
|
|
158
164
|
}
|
|
159
165
|
}
|
|
160
166
|
function DropdownComponent_ng_template_10_div_4_div_2_div_2_Template(rf, ctx) {
|
|
@@ -164,29 +170,29 @@ function DropdownComponent_ng_template_10_div_4_div_2_div_2_Template(rf, ctx) {
|
|
|
164
170
|
i0.ɵɵelementEnd();
|
|
165
171
|
}
|
|
166
172
|
if (rf & 2) {
|
|
167
|
-
const
|
|
173
|
+
const item_r22 = i0.ɵɵnextContext().$implicit;
|
|
168
174
|
i0.ɵɵadvance(1);
|
|
169
|
-
i0.ɵɵproperty("src",
|
|
175
|
+
i0.ɵɵproperty("src", item_r22.icon, i0.ɵɵsanitizeUrl);
|
|
170
176
|
}
|
|
171
177
|
}
|
|
172
178
|
const _c4 = function (a0, a1, a2) { return { "item-disabled": a0, "item-selected": a1, "icon-only": a2 }; };
|
|
173
179
|
function DropdownComponent_ng_template_10_div_4_div_2_Template(rf, ctx) {
|
|
174
180
|
if (rf & 1) {
|
|
175
|
-
const
|
|
176
|
-
i0.ɵɵelementStart(0, "div",
|
|
177
|
-
i0.ɵɵlistener("click", function DropdownComponent_ng_template_10_div_4_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(
|
|
178
|
-
i0.ɵɵtemplate(1, DropdownComponent_ng_template_10_div_4_div_2_div_1_Template, 4, 8, "div",
|
|
179
|
-
i0.ɵɵtemplate(2, DropdownComponent_ng_template_10_div_4_div_2_div_2_Template, 2, 1, "div",
|
|
181
|
+
const _r30 = i0.ɵɵgetCurrentView();
|
|
182
|
+
i0.ɵɵelementStart(0, "div", 35);
|
|
183
|
+
i0.ɵɵlistener("click", function DropdownComponent_ng_template_10_div_4_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r30); const item_r22 = restoredCtx.$implicit; const ctx_r29 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(item_r22.disabled ? null : ctx_r29.selectItem(item_r22)); })("keyup.enter", function DropdownComponent_ng_template_10_div_4_div_2_Template_div_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r30); const item_r22 = restoredCtx.$implicit; const ctx_r31 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(item_r22.disabled ? null : ctx_r31.selectItem(item_r22)); });
|
|
184
|
+
i0.ɵɵtemplate(1, DropdownComponent_ng_template_10_div_4_div_2_div_1_Template, 4, 8, "div", 36);
|
|
185
|
+
i0.ɵɵtemplate(2, DropdownComponent_ng_template_10_div_4_div_2_div_2_Template, 2, 1, "div", 37);
|
|
180
186
|
i0.ɵɵelementEnd();
|
|
181
187
|
}
|
|
182
188
|
if (rf & 2) {
|
|
183
|
-
const
|
|
184
|
-
const
|
|
185
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(3, _c4,
|
|
189
|
+
const item_r22 = ctx.$implicit;
|
|
190
|
+
const ctx_r20 = i0.ɵɵnextContext(3);
|
|
191
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(3, _c4, item_r22.disabled, ctx_r20.higlightSelectedValue && item_r22.value === (ctx_r20.selectedItem == null ? null : ctx_r20.selectedItem.value), ctx_r20.showOnlyIcon));
|
|
186
192
|
i0.ɵɵadvance(1);
|
|
187
|
-
i0.ɵɵproperty("ngIf", !
|
|
193
|
+
i0.ɵɵproperty("ngIf", !ctx_r20.showOnlyIcon);
|
|
188
194
|
i0.ɵɵadvance(1);
|
|
189
|
-
i0.ɵɵproperty("ngIf",
|
|
195
|
+
i0.ɵɵproperty("ngIf", item_r22.icon);
|
|
190
196
|
}
|
|
191
197
|
}
|
|
192
198
|
function DropdownComponent_ng_template_10_div_4_div_3_Template(rf, ctx) {
|
|
@@ -196,55 +202,58 @@ function DropdownComponent_ng_template_10_div_4_div_3_Template(rf, ctx) {
|
|
|
196
202
|
i0.ɵɵelementEnd();
|
|
197
203
|
}
|
|
198
204
|
if (rf & 2) {
|
|
199
|
-
const
|
|
205
|
+
const ctx_r21 = i0.ɵɵnextContext(3);
|
|
200
206
|
i0.ɵɵadvance(1);
|
|
201
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
207
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r21.searchInput === "" ? ctx_r21.noDataMessage : "No results", " ");
|
|
202
208
|
}
|
|
203
209
|
}
|
|
204
210
|
function DropdownComponent_ng_template_10_div_4_Template(rf, ctx) {
|
|
205
211
|
if (rf & 1) {
|
|
206
|
-
i0.ɵɵelementStart(0, "div",
|
|
207
|
-
i0.ɵɵtemplate(2, DropdownComponent_ng_template_10_div_4_div_2_Template, 3, 7, "div",
|
|
212
|
+
i0.ɵɵelementStart(0, "div", 31)(1, "cdk-virtual-scroll-viewport", 32);
|
|
213
|
+
i0.ɵɵtemplate(2, DropdownComponent_ng_template_10_div_4_div_2_Template, 3, 7, "div", 33);
|
|
208
214
|
i0.ɵɵelementEnd();
|
|
209
|
-
i0.ɵɵtemplate(3, DropdownComponent_ng_template_10_div_4_div_3_Template, 2, 1, "div",
|
|
215
|
+
i0.ɵɵtemplate(3, DropdownComponent_ng_template_10_div_4_div_3_Template, 2, 1, "div", 34);
|
|
210
216
|
i0.ɵɵelementEnd();
|
|
211
217
|
}
|
|
212
218
|
if (rf & 2) {
|
|
213
|
-
const
|
|
219
|
+
const ctx_r12 = i0.ɵɵnextContext(2);
|
|
214
220
|
i0.ɵɵadvance(1);
|
|
215
|
-
i0.ɵɵproperty("itemSize",
|
|
221
|
+
i0.ɵɵproperty("itemSize", ctx_r12.itemSizeForCdk);
|
|
216
222
|
i0.ɵɵadvance(1);
|
|
217
|
-
i0.ɵɵproperty("cdkVirtualForOf",
|
|
223
|
+
i0.ɵɵproperty("cdkVirtualForOf", ctx_r12.searchInput ? ctx_r12.searchData : ctx_r12.data);
|
|
218
224
|
i0.ɵɵadvance(1);
|
|
219
|
-
i0.ɵɵproperty("ngIf", (
|
|
225
|
+
i0.ɵɵproperty("ngIf", (ctx_r12.searchInput ? ctx_r12.searchData : ctx_r12.data).length === 0);
|
|
220
226
|
}
|
|
221
227
|
}
|
|
222
228
|
const _c5 = function (a0, a1) { return { height: a0, width: a1 }; };
|
|
223
229
|
function DropdownComponent_ng_template_10_Template(rf, ctx) {
|
|
224
230
|
if (rf & 1) {
|
|
225
|
-
const
|
|
231
|
+
const _r33 = i0.ɵɵgetCurrentView();
|
|
226
232
|
i0.ɵɵnamespaceSVG();
|
|
227
233
|
i0.ɵɵnamespaceHTML();
|
|
228
234
|
i0.ɵɵelementStart(0, "div", 15);
|
|
229
|
-
i0.ɵɵlistener("keyup.esc", function DropdownComponent_ng_template_10_Template_div_keyup_esc_0_listener($event) { i0.ɵɵrestoreView(
|
|
230
|
-
i0.ɵɵtemplate(1, DropdownComponent_ng_template_10_div_1_Template, 4,
|
|
235
|
+
i0.ɵɵlistener("keyup.esc", function DropdownComponent_ng_template_10_Template_div_keyup_esc_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.closeOnEsc($event)); });
|
|
236
|
+
i0.ɵɵtemplate(1, DropdownComponent_ng_template_10_div_1_Template, 4, 11, "div", 16);
|
|
231
237
|
i0.ɵɵtemplate(2, DropdownComponent_ng_template_10_div_2_Template, 2, 1, "div", 17);
|
|
232
|
-
i0.ɵɵ
|
|
238
|
+
i0.ɵɵtemplate(3, DropdownComponent_ng_template_10_div_3_Template, 1, 0, "div", 18);
|
|
233
239
|
i0.ɵɵtemplate(4, DropdownComponent_ng_template_10_div_4_Template, 4, 3, "div", 19);
|
|
234
240
|
i0.ɵɵelementEnd();
|
|
235
241
|
}
|
|
236
242
|
if (rf & 2) {
|
|
237
243
|
const ctx_r6 = i0.ɵɵnextContext();
|
|
238
|
-
i0.ɵɵproperty("cdkTrapFocusAutoCapture", true)("ngStyle", i0.ɵɵpureFunction2(
|
|
244
|
+
i0.ɵɵproperty("cdkTrapFocusAutoCapture", true)("ngStyle", i0.ɵɵpureFunction2(6, _c5, ctx_r6.dropdownListHeight, ctx_r6.dropdownListWidth));
|
|
239
245
|
i0.ɵɵadvance(1);
|
|
240
246
|
i0.ɵɵproperty("ngIf", ctx_r6.searchEnabled);
|
|
241
247
|
i0.ɵɵadvance(1);
|
|
242
248
|
i0.ɵɵproperty("ngIf", ctx_r6.loading);
|
|
243
|
-
i0.ɵɵadvance(
|
|
249
|
+
i0.ɵɵadvance(1);
|
|
250
|
+
i0.ɵɵproperty("ngIf", !ctx_r6.searchEnabled);
|
|
251
|
+
i0.ɵɵadvance(1);
|
|
244
252
|
i0.ɵɵproperty("ngIf", !ctx_r6.loading);
|
|
245
253
|
}
|
|
246
254
|
}
|
|
247
|
-
const _c6 = function (a0) { return {
|
|
255
|
+
const _c6 = function (a0) { return { width: a0 }; };
|
|
256
|
+
const _c7 = function (a0) { return { transform: a0 }; };
|
|
248
257
|
class DropdownComponent {
|
|
249
258
|
constructor(eRef, overlay, viewContainerRef) {
|
|
250
259
|
this.eRef = eRef;
|
|
@@ -393,13 +402,13 @@ DropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropdownC
|
|
|
393
402
|
if (rf & 1) {
|
|
394
403
|
i0.ɵɵlistener("keyup.esc", function DropdownComponent_keyup_esc_HostBindingHandler($event) { return ctx.closeOnEsc($event); });
|
|
395
404
|
}
|
|
396
|
-
}, inputs: { data: "data", height: "height", width: "width", label: "label", itemSizeForCdk: "itemSizeForCdk", showOnlyIcon: "showOnlyIcon", higlightSelectedValue: "higlightSelectedValue", dropdownListHeight: "dropdownListHeight", dropdownListWidth: "dropdownListWidth", dropdownListPosition: "dropdownListPosition", config: "config", searchEnabled: "searchEnabled", selectedItem: "selectedItem", noDataMessage: "noDataMessage", multiLine: "multiLine", additionalInfoMessage: "additionalInfoMessage", scrollIntoView: "scrollIntoView", searchLabel: "searchLabel", customStyles: "customStyles", activeItem: "activeItem" }, outputs: { onChange: "onChange" }, decls: 12, vars:
|
|
405
|
+
}, inputs: { data: "data", height: "height", width: "width", label: "label", itemSizeForCdk: "itemSizeForCdk", showOnlyIcon: "showOnlyIcon", higlightSelectedValue: "higlightSelectedValue", dropdownListHeight: "dropdownListHeight", dropdownListWidth: "dropdownListWidth", dropdownListPosition: "dropdownListPosition", config: "config", searchEnabled: "searchEnabled", selectedItem: "selectedItem", noDataMessage: "noDataMessage", multiLine: "multiLine", additionalInfoMessage: "additionalInfoMessage", scrollIntoView: "scrollIntoView", searchLabel: "searchLabel", customStyles: "customStyles", activeItem: "activeItem" }, outputs: { onChange: "onChange" }, decls: 12, vars: 15, consts: [[1, "main-container", 3, "ngStyle", "click", "keyup.enter"], ["tabindex", "0", 1, "dropdown", 3, "ngStyle", "ngClass", "keyup.enter", "click"], ["select", ""], ["class", "img-container", 3, "width", "height", "src", 4, "ngIf"], [1, "label", 3, "ngStyle"], ["class", "text", 4, "ngIf", "ngIfElse"], ["showIcon", ""], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "handle", 3, "ngStyle"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z", "fill", "#181F33"], ["popupContainer", ""], [1, "img-container", 3, "width", "height", "src"], [1, "text"], ["class", "text", 4, "ngIf"], ["class", "icon", "alt", "no img", 3, "src", 4, "ngIf"], ["alt", "no img", 1, "icon", 3, "src"], ["cdkTrapFocus", "", "tabindex", "0", "aria-label", "dropdown", 1, "popup-container", 3, "cdkTrapFocusAutoCapture", "ngStyle", "keyup.esc"], ["class", "search-container", 4, "ngIf"], ["class", "status-container", 4, "ngIf"], ["tabindex", "-1", "cdkFocusInitial", "", 4, "ngIf"], ["class", "items", 4, "ngIf"], [1, "search-container"], ["class", "search-icon", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], [1, "search-input", 3, "ngModel", "ngStyle", "tabIndex", "placeholder", "ngModelChange", "focus"], ["class", "cancel-icon", "width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 3, "click", 4, "ngIf"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "search-icon"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z", "fill", "#6A737D"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "cancel-icon", 3, "click"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z", "fill", "#6A737D"], [1, "status-container"], [3, "mobileView"], ["tabindex", "-1", "cdkFocusInitial", ""], [1, "items"], [1, "dropdown-viewport", 3, "itemSize"], ["class", "item", "tabindex", "0", "tabIndex", "0", 3, "ngClass", "click", "keyup.enter", 4, "cdkVirtualFor", "cdkVirtualForOf"], ["class", "noData", 4, "ngIf"], ["tabindex", "0", "tabIndex", "0", 1, "item", 3, "ngClass", "click", "keyup.enter"], ["class", "label", 3, "ngStyle", 4, "ngIf"], ["class", "icon-container", 4, "ngIf"], [1, "primaryText", 3, "ngStyle"], ["class", "secondaryText", 3, "ngStyle", 4, "ngIf"], [1, "secondaryText", 3, "ngStyle"], [1, "icon-container"], [1, "noData"]], template: function DropdownComponent_Template(rf, ctx) {
|
|
397
406
|
if (rf & 1) {
|
|
398
407
|
i0.ɵɵelementStart(0, "div", 0);
|
|
399
408
|
i0.ɵɵlistener("click", function DropdownComponent_Template_div_click_0_listener() { return ctx.setUpAsyncDataSearch(); })("keyup.enter", function DropdownComponent_Template_div_keyup_enter_0_listener() { return ctx.setUpAsyncDataSearch(); });
|
|
400
409
|
i0.ɵɵelementStart(1, "div", 1, 2);
|
|
401
410
|
i0.ɵɵlistener("keyup.enter", function DropdownComponent_Template_div_keyup_enter_1_listener() { return ctx.toggleDropdown(); })("click", function DropdownComponent_Template_div_click_1_listener() { return ctx.toggleDropdown(); });
|
|
402
|
-
i0.ɵɵtemplate(3, DropdownComponent_img_3_Template, 1,
|
|
411
|
+
i0.ɵɵtemplate(3, DropdownComponent_img_3_Template, 1, 3, "img", 3);
|
|
403
412
|
i0.ɵɵelementStart(4, "div", 4);
|
|
404
413
|
i0.ɵɵtemplate(5, DropdownComponent_p_5_Template, 2, 1, "p", 5);
|
|
405
414
|
i0.ɵɵtemplate(6, DropdownComponent_ng_template_6_Template, 2, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
|
|
@@ -408,25 +417,27 @@ DropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropdownC
|
|
|
408
417
|
i0.ɵɵelementStart(8, "svg", 7);
|
|
409
418
|
i0.ɵɵelement(9, "path", 8);
|
|
410
419
|
i0.ɵɵelementEnd()()();
|
|
411
|
-
i0.ɵɵtemplate(10, DropdownComponent_ng_template_10_Template, 5,
|
|
420
|
+
i0.ɵɵtemplate(10, DropdownComponent_ng_template_10_Template, 5, 9, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
|
|
412
421
|
}
|
|
413
422
|
if (rf & 2) {
|
|
414
423
|
const _r3 = i0.ɵɵreference(7);
|
|
415
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(
|
|
424
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(8, _c5, ctx.height.length > 0 ? ctx.height : "", ctx.width.length > 0 ? ctx.width : ""));
|
|
416
425
|
i0.ɵɵadvance(1);
|
|
417
426
|
i0.ɵɵproperty("ngStyle", ctx.customStyles)("ngClass", ctx.isOpen ? "dropdown-port" : "");
|
|
418
427
|
i0.ɵɵadvance(2);
|
|
419
|
-
i0.ɵɵproperty("ngIf", ctx.selectedItem.customIcon);
|
|
420
|
-
i0.ɵɵadvance(
|
|
428
|
+
i0.ɵɵproperty("ngIf", ctx.selectedItem == null ? null : ctx.selectedItem.customIcon);
|
|
429
|
+
i0.ɵɵadvance(1);
|
|
430
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(11, _c6, (ctx.selectedItem == null ? null : ctx.selectedItem.customIcon) ? "calc(100% - 48px)" : "calc(100% - 32px)"));
|
|
431
|
+
i0.ɵɵadvance(1);
|
|
421
432
|
i0.ɵɵproperty("ngIf", !ctx.showOnlyIcon)("ngIfElse", _r3);
|
|
422
433
|
i0.ɵɵadvance(3);
|
|
423
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(
|
|
434
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(13, _c7, ctx.isOpen ? "rotate(180deg)" : "rotate(0deg)"));
|
|
424
435
|
}
|
|
425
|
-
}, dependencies: [i2.NgClass, i2.NgIf, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.CdkFixedSizeVirtualScroll, i4.CdkVirtualForOf, i4.CdkVirtualScrollViewport, i5.LoaderComponent, i6.CdkTrapFocus], styles: [".main-container[_ngcontent-%COMP%]{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;
|
|
436
|
+
}, dependencies: [i2.NgClass, i2.NgIf, i2.NgStyle, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.CdkFixedSizeVirtualScroll, i4.CdkVirtualForOf, i4.CdkVirtualScrollViewport, i5.LoaderComponent, i6.CdkTrapFocus], styles: [".main-container[_ngcontent-%COMP%]{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;gap:4px;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]:hover, .main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%]:focus-visible{background-color:#f5f7fc;outline:none}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .text[_ngcontent-%COMP%]{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .count[_ngcontent-%COMP%]{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container[_ngcontent-%COMP%] .dropdown[_ngcontent-%COMP%] .handle[_ngcontent-%COMP%]{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-container[_ngcontent-%COMP%] .dropdown-port[_ngcontent-%COMP%]{background:#E6EBF7}.popup-container[_ngcontent-%COMP%]{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:0;height:0}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%]{position:relative;box-sizing:border-box;padding:8px}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%]{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] .cancel-icon[_ngcontent-%COMP%]{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px;height:0}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .noData[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%]{height:200px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%]:focus-visible{background-color:#f5f7fc;outline:none}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%]{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .primaryText[_ngcontent-%COMP%]{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] .secondaryText[_ngcontent-%COMP%]{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .icon-container[_ngcontent-%COMP%]{width:10%;display:flex;justify-content:flex-end}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .dropdown-viewport[_ngcontent-%COMP%] .item[_ngcontent-%COMP%] .icon-container[_ngcontent-%COMP%] .icon[_ngcontent-%COMP%]{width:20px;height:20px}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]{cursor:not-allowed!important}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]:hover, .popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%]:focus-visible{background-color:transparent!important;outline:none!important}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-disabled[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#929dab!important;-webkit-user-select:none!important;user-select:none!important}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .item-selected[_ngcontent-%COMP%]{background-color:#e0e6f6;outline:none}.popup-container[_ngcontent-%COMP%] .items[_ngcontent-%COMP%] .icon-only[_ngcontent-%COMP%]{justify-content:center!important}[_ngcontent-%COMP%]::-webkit-scrollbar{height:8px;width:8px;background:#ffffff;border-radius:13px}[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#c8cdd3;border-radius:13px;cursor:pointer}.status-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;height:128px}.status-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{text-align:center}"] });
|
|
426
437
|
(function () {
|
|
427
438
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropdownComponent, [{
|
|
428
439
|
type: Component,
|
|
429
|
-
args: [{ selector: "mis-dropdown", template: "<div (click)=\"setUpAsyncDataSearch()\"\n(keyup.enter)=\"setUpAsyncDataSearch()\"\n class=\"main-container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"customStyles\"\n [ngClass]=\"isOpen ? 'dropdown-port': ''\"\n >\n <img class=\"img-container\" [src]=\"selectedItem.customIcon\" *ngIf=\"selectedItem.customIcon\">\n <div class=\"label\">\n <p class=\"text\" *ngIf=\"!showOnlyIcon; else showIcon\">\n {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\n </p>\n <ng-template #showIcon>\n <p class=\"text\" *ngIf=\"!selectedItem.icon\">\n {{ label }}\n </p>\n <img class=\"icon\" *ngIf=\"!!selectedItem.icon\" [src]=\"selectedItem.icon\" alt=\"no img\" />\n </ng-template>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n class=\"popup-container\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" tabindex=\"0\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n (keyup.esc)=\"closeOnEsc($event)\"\n aria-label=\"dropdown\"\n >\n <div *ngIf=\"searchEnabled\" class=\"search-container\">\n <svg\n *ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\"\n />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : searchLabel\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n />\n <svg\n *ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\"\n />\n </svg>\n </div>\n <div class=\"status-container\" *ngIf=\"loading\">\n <mis-loader [mobileView]=\"true\"></mis-loader>\n </div>\n <div tabindex=\"-1\" cdkFocusInitial></div>\n <div class=\"items\" *ngIf=\"!loading\"> \n <cdk-virtual-scroll-viewport [itemSize]=\"itemSizeForCdk\" class=\"dropdown-viewport\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled, 'item-selected': (higlightSelectedValue && item.value === selectedItem.value), 'icon-only' : showOnlyIcon }\"\n (click)=\"item.disabled ? null : selectItem(item)\"\n (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n *cdkVirtualFor=\"let item of searchInput ? searchData : data;\"\n tabIndex=\"0\"\n >\n <div class=\"label\" *ngIf=\"!showOnlyIcon\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n <span class=\"primaryText\" [ngStyle]=\"getIconStyles(item.icon, activeItem)\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n <span class=\"secondaryText\" *ngIf=\"multiLine\" [ngStyle]=\"getIconStyles(item.icon, activeItem)\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage }} </span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-container .dropdown .img-container{width:20px;height:20px}.main-container .dropdown-port{background:#E6EBF7}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:hover,.popup-container .items .dropdown-viewport .item:focus-visible{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed!important}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent!important;outline:none!important}.popup-container .items .item-disabled .label>span{color:#929dab!important;-webkit-user-select:none!important;user-select:none!important}.popup-container .items .item-selected{background-color:#e0e6f6;outline:none}.popup-container .items .icon-only{justify-content:center!important}::-webkit-scrollbar{height:8px;width:8px;background:#ffffff;border-radius:13px}::-webkit-scrollbar-thumb{background:#c8cdd3;border-radius:13px;cursor:pointer}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}\n"] }]
|
|
440
|
+
args: [{ selector: "mis-dropdown", template: "<div (click)=\"setUpAsyncDataSearch()\"\n(keyup.enter)=\"setUpAsyncDataSearch()\"\n class=\"main-container\"\n [ngStyle]=\"{\n height: height.length > 0 ? height : '',\n width: width.length > 0 ? width : ''\n }\"\n>\n <div\n class=\"dropdown\"\n #select\n tabindex=\"0\"\n (keyup.enter)=\"toggleDropdown()\"\n (click)=\"toggleDropdown()\"\n [ngStyle]=\"customStyles\"\n [ngClass]=\"isOpen ? 'dropdown-port': ''\"\n >\n <img class=\"img-container\" [width]=\"16\" [height]=\"16\" [src]=\"selectedItem?.customIcon\" *ngIf=\"selectedItem?.customIcon\">\n <div class=\"label\" [ngStyle]=\"{width: selectedItem?.customIcon ? 'calc(100% - 48px)' : 'calc(100% - 32px)'}\">\n <p class=\"text\" *ngIf=\"!showOnlyIcon; else showIcon\">\n {{ multiLine ? selectedItem?.label?.primaryText : selectedItem?.label || label }}\n </p>\n <ng-template #showIcon>\n <p class=\"text\" *ngIf=\"!selectedItem?.icon\">\n {{ label }}\n </p>\n <img class=\"icon\" *ngIf=\"!!selectedItem?.icon\" [src]=\"selectedItem?.icon\" alt=\"no img\" />\n </ng-template>\n </div>\n <svg\n class=\"handle\"\n [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n fill=\"#181F33\"\n />\n </svg>\n </div>\n</div>\n<ng-template #popupContainer>\n <div\n class=\"popup-container\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" tabindex=\"0\"\n [ngStyle]=\"{\n height: dropdownListHeight,\n width: dropdownListWidth\n }\"\n (keyup.esc)=\"closeOnEsc($event)\"\n aria-label=\"dropdown\"\n >\n <div *ngIf=\"searchEnabled\" class=\"search-container\">\n <svg\n *ngIf=\"!isSearchInputFocused\"\n class=\"search-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n fill=\"#6A737D\"\n />\n </svg>\n <input\n [ngModel]=\"searchInput\"\n [ngStyle]=\"{\n paddingLeft: isSearchInputFocused ? '12px' : '45px',\n border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n paddingRight: isSearchInputFocused ? '45px' : '10px'\n }\"\n [tabIndex]=\"0\"\n (ngModelChange)=\"searchInputOnChange($event)\"\n [placeholder]=\"isSearchInputFocused ? '' : searchLabel\"\n (focus)=\"searchInputFocused(true)\"\n class=\"search-input\"\n [attr.aria-label]=\"searchLabel\"\n />\n <svg\n *ngIf=\"isSearchInputFocused\"\n class=\"cancel-icon\"\n (click)=\"searchInputCanceled($event)\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n fill=\"#6A737D\"\n />\n </svg>\n </div>\n <div class=\"status-container\" *ngIf=\"loading\">\n <mis-loader [mobileView]=\"true\"></mis-loader>\n </div>\n <div tabindex=\"-1\" *ngIf=\"!searchEnabled\" cdkFocusInitial></div>\n <div class=\"items\" *ngIf=\"!loading\"> \n <cdk-virtual-scroll-viewport [itemSize]=\"itemSizeForCdk\" class=\"dropdown-viewport\">\n <div\n class=\"item\"\n tabindex=\"0\"\n [ngClass]=\"{ 'item-disabled': item.disabled, 'item-selected': (higlightSelectedValue && item.value === selectedItem?.value), 'icon-only' : showOnlyIcon }\"\n (click)=\"item.disabled ? null : selectItem(item)\"\n (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n *cdkVirtualFor=\"let item of searchInput ? searchData : data;\"\n tabIndex=\"0\"\n >\n <div class=\"label\" *ngIf=\"!showOnlyIcon\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n <span class=\"primaryText\" [ngStyle]=\"getIconStyles(item.icon, activeItem)\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n <span class=\"secondaryText\" *ngIf=\"multiLine\" [ngStyle]=\"getIconStyles(item.icon, activeItem)\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage }} </span>\n </div>\n <div class=\"icon-container\" *ngIf=\"item.icon\">\n <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;gap:4px;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-container .dropdown-port{background:#E6EBF7}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:hover,.popup-container .items .dropdown-viewport .item:focus-visible{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed!important}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent!important;outline:none!important}.popup-container .items .item-disabled .label>span{color:#929dab!important;-webkit-user-select:none!important;user-select:none!important}.popup-container .items .item-selected{background-color:#e0e6f6;outline:none}.popup-container .items .icon-only{justify-content:center!important}::-webkit-scrollbar{height:8px;width:8px;background:#ffffff;border-radius:13px}::-webkit-scrollbar-thumb{background:#c8cdd3;border-radius:13px;cursor:pointer}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}\n"] }]
|
|
430
441
|
}], function () { return [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, { data: [{
|
|
431
442
|
type: Input
|
|
432
443
|
}], height: [{
|