@sunbird-cb/consumption 0.0.94 → 0.0.96
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/bundles/sunbird-cb-consumption.umd.js +2 -2
- package/bundles/sunbird-cb-consumption.umd.js.map +1 -1
- package/bundles/sunbird-cb-consumption.umd.min.js +1 -1
- package/bundles/sunbird-cb-consumption.umd.min.js.map +1 -1
- package/esm2015/lib/_common/data-points/data-points.component.js +3 -3
- package/esm5/lib/_common/data-points/data-points.component.js +3 -3
- package/fesm2015/sunbird-cb-consumption.js +2 -2
- package/fesm2015/sunbird-cb-consumption.js.map +1 -1
- package/fesm5/sunbird-cb-consumption.js +2 -2
- package/fesm5/sunbird-cb-consumption.js.map +1 -1
- package/package.json +1 -1
- package/sunbird-cb-consumption.metadata.json +1 -1
|
@@ -141,8 +141,8 @@ export class DataPointsComponent {
|
|
|
141
141
|
DataPointsComponent.decorators = [
|
|
142
142
|
{ type: Component, args: [{
|
|
143
143
|
selector: 'sb-uic-data-points',
|
|
144
|
-
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"flex space-around pt-5\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
145
|
-
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top
|
|
144
|
+
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
145
|
+
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top:22px;z-index:90}.my-arrow{font-size:12px}.less-opacity1{opacity:.75}.less-opacity2{opacity:.5}.nlw-status{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px}.nlw-status-mob{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px;padding-top:32px}.nlw-div{padding:0 16px;margin:10px 0 16px}.divider{border-left:1.6px solid #a6a4a4}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
|
|
146
146
|
}] }
|
|
147
147
|
];
|
|
148
148
|
/** @nocollapse */
|
|
@@ -179,4 +179,4 @@ if (false) {
|
|
|
179
179
|
/** @type {?} */
|
|
180
180
|
DataPointsComponent.prototype.insightSvc;
|
|
181
181
|
}
|
|
182
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
182
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wb2ludHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHN1bmJpcmQtY2IvY29uc3VtcHRpb24vIiwic291cmNlcyI6WyJsaWIvX2NvbW1vbi9kYXRhLXBvaW50cy9kYXRhLXBvaW50cy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBT3hFLE1BQU0sT0FBTyxtQkFBbUI7Ozs7SUFXOUIsWUFBbUIsVUFBNkI7UUFBN0IsZUFBVSxHQUFWLFVBQVUsQ0FBbUI7UUFUdkMsZUFBVSxHQUFXLEVBQUUsQ0FBQTtRQUN2QixxQkFBZ0IsR0FBWSxLQUFLLENBQUE7UUFDakMsZUFBVSxHQUFTLEVBQUUsQ0FBQTtRQUNyQixlQUFVLEdBQVEsRUFBRSxDQUFBO1FBRTdCLGdCQUFXLEdBQVksRUFBRSxDQUFBO1FBQ3pCLGtCQUFhLEdBQVksS0FBSyxDQUFBO0lBR3NCLENBQUM7Ozs7SUFFckQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLFlBQVksRUFBRTtZQUN2RCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFBO1NBQ25FO1FBQ0QsSUFBRyxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDeEIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUE7WUFDekIsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLEtBQUssRUFBRTtnQkFDN0IsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFBO2FBQ2hCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQTthQUNyQjtTQUNGO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxpQkFBaUIsQ0FBQyxHQUFVOztjQUNwQixJQUFJLEdBQVksRUFBRTtRQUN4QixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLEVBQUU7WUFDaEUsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFBO1NBQ3pEO1FBQ0QsT0FBTyxJQUFJLENBQUE7SUFDYixDQUFDOzs7O0lBRUQsYUFBYTs7WUFDUCxPQUFPLEdBQVEsRUFBRTtRQUNyQixPQUFPLEdBQUk7WUFDVCxTQUFTLEVBQUU7Z0JBQ1AsU0FBUyxFQUFFO29CQUNQLGVBQWUsRUFBRTt3QkFDYixJQUFJLENBQUMsVUFBVTtxQkFDbEI7aUJBQ0o7YUFDSjtTQUNGLENBQUE7UUFDRCxJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFVBQVUsS0FBSyxLQUFLLEVBQUU7WUFDaEQsT0FBTyxHQUFJO2dCQUNULFNBQVMsRUFBRTtvQkFDUCxTQUFTLEVBQUU7d0JBQ1QsYUFBYSxFQUFFLGFBQWE7d0JBQzFCLGVBQWUsRUFBRTs0QkFDYixJQUFJLENBQUMsVUFBVTt5QkFDbEI7cUJBQ0o7aUJBQ0o7YUFDRixDQUFBO1NBQ0Y7UUFDRCxJQUFJLENBQUMsVUFBVSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxTQUFTOzs7O1FBQUMsQ0FBQyxHQUFRLEVBQUMsRUFBRTtZQUM3RCxJQUFHLEdBQUcsSUFBSSxHQUFHLENBQUMsTUFBTSxJQUFJLEdBQUcsQ0FBQyxNQUFNLENBQUMsUUFBUSxJQUFJLEdBQUcsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLE1BQU0sSUFBSSxHQUFHLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsTUFBTSxFQUFFO2dCQUM5RyxHQUFHLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsT0FBTzs7OztnQkFBQyxDQUFDLFNBQWMsRUFBRSxFQUFFO29CQUNwRCxJQUFHLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFVBQVUsS0FBSyxTQUFTLENBQUMsS0FBSyxFQUFFO3dCQUN6RCxJQUFJLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUE7cUJBQ2pDO2dCQUNILENBQUMsRUFBQyxDQUFBO2FBQ0g7WUFDRCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQTtRQUM1QixDQUFDLEVBQUMsQ0FBQTtJQUVKLENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxTQUFTOzs7O1FBQUMsQ0FBQyxHQUFRLEVBQUUsRUFBRTtZQUNyRCxJQUFHLEdBQUcsSUFBSSxHQUFHLENBQUMsTUFBTSxJQUFJLEdBQUcsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFO2dCQUN2QyxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFBO2FBQ2xDO1lBQ0QsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUE7UUFDNUIsQ0FBQzs7OztRQUFFLEtBQUssQ0FBQyxFQUFFO1lBQ1QsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUNsQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQTtRQUM1QixDQUFDLEVBQUMsQ0FBQTtJQUNKLENBQUM7Ozs7O0lBRUQsb0JBQW9CLENBQUMsS0FBVTtRQUM3QixJQUFJLEtBQUssRUFBRTs7Z0JBQ0wsTUFBTSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQUU7Z0JBQ3pCLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDOztnQkFDOUMsU0FBUyxHQUFHLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7O2dCQUNqQyxZQUFZLEdBQUcsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDM0MsSUFBSSxZQUFZLEtBQUssRUFBRSxFQUFFO2dCQUN2QixTQUFTLEdBQUcsR0FBRyxHQUFHLFNBQVMsQ0FBQzthQUM3Qjs7Z0JBQ0csb0JBQW9CLEdBQUcsWUFBWSxDQUFDLE9BQU8sQ0FBQyx1QkFBdUIsRUFBRSxHQUFHLENBQUMsR0FBRyxTQUFTOztrQkFDbkYsTUFBTSxHQUFHLFdBQVcsQ0FBQyxDQUFDLENBQUMsR0FBRyxvQkFBb0IsSUFBSSxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxvQkFBb0I7WUFDeEcsT0FBTyxNQUFNLENBQUE7U0FDZDtJQUNILENBQUM7OztZQXJHRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsa25rQkFBMkM7O2FBRTVDOzs7O1lBTlEsaUJBQWlCOzs7eUJBUXZCLEtBQUs7eUJBQ0wsS0FBSzsrQkFDTCxLQUFLO3lCQUNMLEtBQUs7eUJBQ0wsS0FBSztvQkFDTCxLQUFLOzs7O0lBTE4seUNBQXdCOztJQUN4Qix5Q0FBZ0M7O0lBQ2hDLCtDQUEwQzs7SUFDMUMseUNBQThCOztJQUM5Qix5Q0FBNkI7O0lBQzdCLG9DQUFtQjs7SUFDbkIsMENBQXlCOztJQUN6Qiw0Q0FBOEI7O0lBQzlCLHlDQUFlOztJQUVILHlDQUFvQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW5zaXRlRGF0YVNlcnZpY2UgfSBmcm9tICcuLi8uLi9fc2VydmljZXMvaW5zaXRlLWRhdGEuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NiLXVpYy1kYXRhLXBvaW50cycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhLXBvaW50cy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2RhdGEtcG9pbnRzLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEYXRhUG9pbnRzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgb2JqZWN0RGF0YTogYW55XG4gIEBJbnB1dCgpIGxheW91dFR5cGU6IHN0cmluZyA9ICcnXG4gIEBJbnB1dCgpIGZldGNoRGF0YUZyb21BcGk6IGJvb2xlYW4gPSBmYWxzZVxuICBASW5wdXQoKSBwcm92aWRlcklkIDogYW55ID0gJydcbiAgQElucHV0KCkgcGFnZUxheW91dDogYW55ID0gJydcbiAgQElucHV0KCkgdGl0bGU6IGFueVxuICBjdXN0b21BcnJheTogYW55W11bXSA9IFtdXG4gIGlzRGF0YUxvYWRpbmc6IGJvb2xlYW4gPSBmYWxzZVxuICBhcGlSZXN1bHRzOiBhbnlcbiAgXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBpbnNpZ2h0U3ZjOiBJbnNpdGVEYXRhU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMub2JqZWN0RGF0YSAmJiB0aGlzLmxheW91dFR5cGUgPT09ICdncmlkTGF5b3V0Jykge1xuICAgICAgdGhpcy5jdXN0b21BcnJheSA9IHRoaXMuY3JlYXRlQ3VzdG9tQXJyYXkodGhpcy5vYmplY3REYXRhLm1ldHJpY3MpXG4gICAgfVxuICAgIGlmKHRoaXMuZmV0Y2hEYXRhRnJvbUFwaSkge1xuICAgICAgdGhpcy5pc0RhdGFMb2FkaW5nID0gdHJ1ZVxuICAgICAgaWYgKHRoaXMucGFnZUxheW91dCA9PT0gJ25sdycpIHtcbiAgICAgICAgdGhpcy5nZXRTdGF0cygpXG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmdldEluc2l0ZURhdGEoKVxuICAgICAgfVxuICAgIH1cbiAgfSAgXG5cbiAgY3JlYXRlQ3VzdG9tQXJyYXkoYXJyOiBhbnlbXSk6IGFueVtdW10ge1xuICAgIGNvbnN0IG5CeW46IGFueVtdW10gPSBbXVxuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgYXJyLmxlbmd0aDsgaSArPSB0aGlzLm9iamVjdERhdGEuZGF0YUNvbFNwYW4pIHtcbiAgICAgIG5CeW4ucHVzaChhcnIuc2xpY2UoaSwgaSArIHRoaXMub2JqZWN0RGF0YS5kYXRhQ29sU3BhbikpXG4gICAgfVxuICAgIHJldHVybiBuQnluICAgXG4gIH1cblxuICBnZXRJbnNpdGVEYXRhKCl7XG4gICAgbGV0IHJlcXVlc3Q6IGFueSA9IHt9XG4gICAgcmVxdWVzdCAgPSB7XG4gICAgICBcInJlcXVlc3RcIjoge1xuICAgICAgICAgIFwiZmlsdGVyc1wiOiB7XG4gICAgICAgICAgICAgIFwib3JnYW5pc2F0aW9uc1wiOiBbXG4gICAgICAgICAgICAgICAgICB0aGlzLnByb3ZpZGVySWRcbiAgICAgICAgICAgICAgXVxuICAgICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gICAgaWYgKHRoaXMucGFnZUxheW91dCAmJiB0aGlzLnBhZ2VMYXlvdXQgPT09ICdtZG8nKSB7XG4gICAgICByZXF1ZXN0ICA9IHtcbiAgICAgICAgXCJyZXF1ZXN0XCI6IHtcbiAgICAgICAgICAgIFwiZmlsdGVyc1wiOiB7XG4gICAgICAgICAgICAgIFwicmVxdWVzdFR5cGVcIjogXCJNRE9fSU5TSUdIVFwiLFxuICAgICAgICAgICAgICAgIFwib3JnYW5pc2F0aW9uc1wiOiBbXG4gICAgICAgICAgICAgICAgICAgIHRoaXMucHJvdmlkZXJJZFxuICAgICAgICAgICAgICAgIF1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgICB0aGlzLmluc2lnaHRTdmMuZmV0Y2hTZWFyY2hEYXRhKHJlcXVlc3QpLnN1YnNjcmliZSgocmVzOiBhbnkpPT4ge1xuICAgICAgaWYocmVzICYmIHJlcy5yZXN1bHQgJiYgcmVzLnJlc3VsdC5yZXNwb25zZSAmJiByZXMucmVzdWx0LnJlc3BvbnNlLm51ZGdlcyAmJiByZXMucmVzdWx0LnJlc3BvbnNlLm51ZGdlcy5sZW5ndGgpIHtcbiAgICAgICAgcmVzLnJlc3VsdC5yZXNwb25zZS5udWRnZXMuZm9yRWFjaCgobnVkZ2VEYXRhOiBhbnkpID0+IHtcbiAgICAgICAgICBpZih0aGlzLnByb3ZpZGVySWQgJiYgdGhpcy5wcm92aWRlcklkID09PSBudWRnZURhdGEub3JnSWQpIHtcbiAgICAgICAgICAgIHRoaXMub2JqZWN0RGF0YSA9IG51ZGdlRGF0YS5kYXRhXG4gICAgICAgICAgfVxuICAgICAgICB9KVxuICAgICAgfVxuICAgICAgdGhpcy5pc0RhdGFMb2FkaW5nID0gZmFsc2VcbiAgICB9KVxuXG4gIH1cblxuICBnZXRTdGF0cygpIHtcbiAgICB0aGlzLmluc2lnaHRTdmMuZmV0Y2hOd2xTdGF0cygpLnN1YnNjcmliZSgocmVzOiBhbnkpID0+IHtcbiAgICAgIGlmKHJlcyAmJiByZXMucmVzdWx0ICYmIHJlcy5yZXN1bHQuZGF0YSkge1xuICAgICAgICB0aGlzLm9iamVjdERhdGEgPSByZXMucmVzdWx0LmRhdGFcbiAgICAgIH1cbiAgICAgIHRoaXMuaXNEYXRhTG9hZGluZyA9IGZhbHNlXG4gICAgfSwgZXJyb3IgPT4ge1xuICAgICAgY29uc29sZS5sb2coZXJyb3IpXG4gICAgICB0aGlzLmlzRGF0YUxvYWRpbmcgPSBmYWxzZVxuICAgIH0pXG4gIH1cblxuICBjb252ZXJUb0luZGlhblN5c3RlbSh2YWx1ZTogYW55KSB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICBsZXQgbnVtU3RyID0gdmFsdWUudG9TdHJpbmcoKVxuICAgICAgbGV0IFtpbnRlZ2VyUGFydCwgZGVjaW1hbFBhcnRdID0gbnVtU3RyLnNwbGl0KCcuJylcbiAgICAgIGxldCBsYXN0VGhyZWUgPSBpbnRlZ2VyUGFydC5zbGljZSgtMyk7XG4gICAgICBsZXQgb3RoZXJOdW1iZXJzID0gaW50ZWdlclBhcnQuc2xpY2UoMCwgLTMpO1xuICAgICAgaWYgKG90aGVyTnVtYmVycyAhPT0gJycpIHtcbiAgICAgICAgbGFzdFRocmVlID0gJywnICsgbGFzdFRocmVlO1xuICAgICAgfVxuICAgICAgbGV0IGZvcm1hdHRlZEludGVnZXJQYXJ0ID0gb3RoZXJOdW1iZXJzLnJlcGxhY2UoL1xcQig/PShcXGR7Mn0pKyg/IVxcZCkpL2csICcsJykgKyBsYXN0VGhyZWU7XG4gICAgICBjb25zdCByZXN1bHQgPSBkZWNpbWFsUGFydCA/IGAke2Zvcm1hdHRlZEludGVnZXJQYXJ0fS4ke2RlY2ltYWxQYXJ0LnN1YnN0cigwLDIpfWAgOiBmb3JtYXR0ZWRJbnRlZ2VyUGFydDtcbiAgICAgIHJldHVybiByZXN1bHRcbiAgICB9XG4gIH1cbn1cbiJdfQ==
|
|
@@ -157,8 +157,8 @@ var DataPointsComponent = /** @class */ (function () {
|
|
|
157
157
|
DataPointsComponent.decorators = [
|
|
158
158
|
{ type: Component, args: [{
|
|
159
159
|
selector: 'sb-uic-data-points',
|
|
160
|
-
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"flex space-around pt-5\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
161
|
-
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top
|
|
160
|
+
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
161
|
+
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top:22px;z-index:90}.my-arrow{font-size:12px}.less-opacity1{opacity:.75}.less-opacity2{opacity:.5}.nlw-status{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px}.nlw-status-mob{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px;padding-top:32px}.nlw-div{padding:0 16px;margin:10px 0 16px}.divider{border-left:1.6px solid #a6a4a4}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
|
|
162
162
|
}] }
|
|
163
163
|
];
|
|
164
164
|
/** @nocollapse */
|
|
@@ -198,4 +198,4 @@ if (false) {
|
|
|
198
198
|
/** @type {?} */
|
|
199
199
|
DataPointsComponent.prototype.insightSvc;
|
|
200
200
|
}
|
|
201
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
201
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wb2ludHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHN1bmJpcmQtY2IvY29uc3VtcHRpb24vIiwic291cmNlcyI6WyJsaWIvX2NvbW1vbi9kYXRhLXBvaW50cy9kYXRhLXBvaW50cy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUV4RTtJQWdCRSw2QkFBbUIsVUFBNkI7UUFBN0IsZUFBVSxHQUFWLFVBQVUsQ0FBbUI7UUFUdkMsZUFBVSxHQUFXLEVBQUUsQ0FBQTtRQUN2QixxQkFBZ0IsR0FBWSxLQUFLLENBQUE7UUFDakMsZUFBVSxHQUFTLEVBQUUsQ0FBQTtRQUNyQixlQUFVLEdBQVEsRUFBRSxDQUFBO1FBRTdCLGdCQUFXLEdBQVksRUFBRSxDQUFBO1FBQ3pCLGtCQUFhLEdBQVksS0FBSyxDQUFBO0lBR3NCLENBQUM7Ozs7SUFFckQsc0NBQVE7OztJQUFSO1FBQ0UsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUssWUFBWSxFQUFFO1lBQ3ZELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUE7U0FDbkU7UUFDRCxJQUFHLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtZQUN4QixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQTtZQUN6QixJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUssS0FBSyxFQUFFO2dCQUM3QixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUE7YUFDaEI7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFBO2FBQ3JCO1NBQ0Y7SUFDSCxDQUFDOzs7OztJQUVELCtDQUFpQjs7OztJQUFq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LENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztZQUMzQyxJQUFJLFlBQVksS0FBSyxFQUFFLEVBQUU7Z0JBQ3ZCLFNBQVMsR0FBRyxHQUFHLEdBQUcsU0FBUyxDQUFDO2FBQzdCOztnQkFDRyxvQkFBb0IsR0FBRyxZQUFZLENBQUMsT0FBTyxDQUFDLHVCQUF1QixFQUFFLEdBQUcsQ0FBQyxHQUFHLFNBQVM7O2dCQUNuRixNQUFNLEdBQUcsV0FBVyxDQUFDLENBQUMsQ0FBSSxvQkFBb0IsU0FBSSxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBQyxDQUFDLENBQUcsQ0FBQyxDQUFDLENBQUMsb0JBQW9CO1lBQ3hHLE9BQU8sTUFBTSxDQUFBO1NBQ2Q7SUFDSCxDQUFDOztnQkFyR0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLGtua0JBQTJDOztpQkFFNUM7Ozs7Z0JBTlEsaUJBQWlCOzs7NkJBUXZCLEtBQUs7NkJBQ0wsS0FBSzttQ0FDTCxLQUFLOzZCQUNMLEtBQUs7NkJBQ0wsS0FBSzt3QkFDTCxLQUFLOztJQTJGUiwwQkFBQztDQUFBLEFBdEdELElBc0dDO1NBakdZLG1CQUFtQjs7O0lBQzlCLHlDQUF3Qjs7SUFDeEIseUNBQWdDOztJQUNoQywrQ0FBMEM7O0lBQzFDLHlDQUE4Qjs7SUFDOUIseUNBQTZCOztJQUM3QixvQ0FBbUI7O0lBQ25CLDBDQUF5Qjs7SUFDekIsNENBQThCOztJQUM5Qix5Q0FBZTs7SUFFSCx5Q0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEluc2l0ZURhdGFTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vX3NlcnZpY2VzL2luc2l0ZS1kYXRhLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi11aWMtZGF0YS1wb2ludHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGF0YS1wb2ludHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kYXRhLXBvaW50cy5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGF0YVBvaW50c0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIG9iamVjdERhdGE6IGFueVxuICBASW5wdXQoKSBsYXlvdXRUeXBlOiBzdHJpbmcgPSAnJ1xuICBASW5wdXQoKSBmZXRjaERhdGFGcm9tQXBpOiBib29sZWFuID0gZmFsc2VcbiAgQElucHV0KCkgcHJvdmlkZXJJZCA6IGFueSA9ICcnXG4gIEBJbnB1dCgpIHBhZ2VMYXlvdXQ6IGFueSA9ICcnXG4gIEBJbnB1dCgpIHRpdGxlOiBhbnlcbiAgY3VzdG9tQXJyYXk6IGFueVtdW10gPSBbXVxuICBpc0RhdGFMb2FkaW5nOiBib29sZWFuID0gZmFsc2VcbiAgYXBpUmVzdWx0czogYW55XG4gIFxuICBjb25zdHJ1Y3RvcihwdWJsaWMgaW5zaWdodFN2YzogSW5zaXRlRGF0YVNlcnZpY2UpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLm9iamVjdERhdGEgJiYgdGhpcy5sYXlvdXRUeXBlID09PSAnZ3JpZExheW91dCcpIHtcbiAgICAgIHRoaXMuY3VzdG9tQXJyYXkgPSB0aGlzLmNyZWF0ZUN1c3RvbUFycmF5KHRoaXMub2JqZWN0RGF0YS5tZXRyaWNzKVxuICAgIH1cbiAgICBpZih0aGlzLmZldGNoRGF0YUZyb21BcGkpIHtcbiAgICAgIHRoaXMuaXNEYXRhTG9hZGluZyA9IHRydWVcbiAgICAgIGlmICh0aGlzLnBhZ2VMYXlvdXQgPT09ICdubHcnKSB7XG4gICAgICAgIHRoaXMuZ2V0U3RhdHMoKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5nZXRJbnNpdGVEYXRhKClcbiAgICAgIH1cbiAgICB9XG4gIH0gIFxuXG4gIGNyZWF0ZUN1c3RvbUFycmF5KGFycjogYW55W10pOiBhbnlbXVtdIHtcbiAgICBjb25zdCBuQnluOiBhbnlbXVtdID0gW11cbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IGFyci5sZW5ndGg7IGkgKz0gdGhpcy5vYmplY3REYXRhLmRhdGFDb2xTcGFuKSB7XG4gICAgICBuQnluLnB1c2goYXJyLnNsaWNlKGksIGkgKyB0aGlzLm9iamVjdERhdGEuZGF0YUNvbFNwYW4pKVxuICAgIH1cbiAgICByZXR1cm4gbkJ5biAgIFxuICB9XG5cbiAgZ2V0SW5zaXRlRGF0YSgpe1xuICAgIGxldCByZXF1ZXN0OiBhbnkgPSB7fVxuICAgIHJlcXVlc3QgID0ge1xuICAgICAgXCJyZXF1ZXN0XCI6IHtcbiAgICAgICAgICBcImZpbHRlcnNcIjoge1xuICAgICAgICAgICAgICBcIm9yZ2FuaXNhdGlvbnNcIjogW1xuICAgICAgICAgICAgICAgICAgdGhpcy5wcm92aWRlcklkXG4gICAgICAgICAgICAgIF1cbiAgICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICAgIGlmICh0aGlzLnBhZ2VMYXlvdXQgJiYgdGhpcy5wYWdlTGF5b3V0ID09PSAnbWRvJykge1xuICAgICAgcmVxdWVzdCAgPSB7XG4gICAgICAgIFwicmVxdWVzdFwiOiB7XG4gICAgICAgICAgICBcImZpbHRlcnNcIjoge1xuICAgICAgICAgICAgICBcInJlcXVlc3RUeXBlXCI6IFwiTURPX0lOU0lHSFRcIixcbiAgICAgICAgICAgICAgICBcIm9yZ2FuaXNhdGlvbnNcIjogW1xuICAgICAgICAgICAgICAgICAgICB0aGlzLnByb3ZpZGVySWRcbiAgICAgICAgICAgICAgICBdXG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gICAgdGhpcy5pbnNpZ2h0U3ZjLmZldGNoU2VhcmNoRGF0YShyZXF1ZXN0KS5zdWJzY3JpYmUoKHJlczogYW55KT0+IHtcbiAgICAgIGlmKHJlcyAmJiByZXMucmVzdWx0ICYmIHJlcy5yZXN1bHQucmVzcG9uc2UgJiYgcmVzLnJlc3VsdC5yZXNwb25zZS5udWRnZXMgJiYgcmVzLnJlc3VsdC5yZXNwb25zZS5udWRnZXMubGVuZ3RoKSB7XG4gICAgICAgIHJlcy5yZXN1bHQucmVzcG9uc2UubnVkZ2VzLmZvckVhY2goKG51ZGdlRGF0YTogYW55KSA9PiB7XG4gICAgICAgICAgaWYodGhpcy5wcm92aWRlcklkICYmIHRoaXMucHJvdmlkZXJJZCA9PT0gbnVkZ2VEYXRhLm9yZ0lkKSB7XG4gICAgICAgICAgICB0aGlzLm9iamVjdERhdGEgPSBudWRnZURhdGEuZGF0YVxuICAgICAgICAgIH1cbiAgICAgICAgfSlcbiAgICAgIH1cbiAgICAgIHRoaXMuaXNEYXRhTG9hZGluZyA9IGZhbHNlXG4gICAgfSlcblxuICB9XG5cbiAgZ2V0U3RhdHMoKSB7XG4gICAgdGhpcy5pbnNpZ2h0U3ZjLmZldGNoTndsU3RhdHMoKS5zdWJzY3JpYmUoKHJlczogYW55KSA9PiB7XG4gICAgICBpZihyZXMgJiYgcmVzLnJlc3VsdCAmJiByZXMucmVzdWx0LmRhdGEpIHtcbiAgICAgICAgdGhpcy5vYmplY3REYXRhID0gcmVzLnJlc3VsdC5kYXRhXG4gICAgICB9XG4gICAgICB0aGlzLmlzRGF0YUxvYWRpbmcgPSBmYWxzZVxuICAgIH0sIGVycm9yID0+IHtcbiAgICAgIGNvbnNvbGUubG9nKGVycm9yKVxuICAgICAgdGhpcy5pc0RhdGFMb2FkaW5nID0gZmFsc2VcbiAgICB9KVxuICB9XG5cbiAgY29udmVyVG9JbmRpYW5TeXN0ZW0odmFsdWU6IGFueSkge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgbGV0IG51bVN0ciA9IHZhbHVlLnRvU3RyaW5nKClcbiAgICAgIGxldCBbaW50ZWdlclBhcnQsIGRlY2ltYWxQYXJ0XSA9IG51bVN0ci5zcGxpdCgnLicpXG4gICAgICBsZXQgbGFzdFRocmVlID0gaW50ZWdlclBhcnQuc2xpY2UoLTMpO1xuICAgICAgbGV0IG90aGVyTnVtYmVycyA9IGludGVnZXJQYXJ0LnNsaWNlKDAsIC0zKTtcbiAgICAgIGlmIChvdGhlck51bWJlcnMgIT09ICcnKSB7XG4gICAgICAgIGxhc3RUaHJlZSA9ICcsJyArIGxhc3RUaHJlZTtcbiAgICAgIH1cbiAgICAgIGxldCBmb3JtYXR0ZWRJbnRlZ2VyUGFydCA9IG90aGVyTnVtYmVycy5yZXBsYWNlKC9cXEIoPz0oXFxkezJ9KSsoPyFcXGQpKS9nLCAnLCcpICsgbGFzdFRocmVlO1xuICAgICAgY29uc3QgcmVzdWx0ID0gZGVjaW1hbFBhcnQgPyBgJHtmb3JtYXR0ZWRJbnRlZ2VyUGFydH0uJHtkZWNpbWFsUGFydC5zdWJzdHIoMCwyKX1gIDogZm9ybWF0dGVkSW50ZWdlclBhcnQ7XG4gICAgICByZXR1cm4gcmVzdWx0XG4gICAgfVxuICB9XG59XG4iXX0=
|
|
@@ -6633,8 +6633,8 @@ class DataPointsComponent {
|
|
|
6633
6633
|
DataPointsComponent.decorators = [
|
|
6634
6634
|
{ type: Component, args: [{
|
|
6635
6635
|
selector: 'sb-uic-data-points',
|
|
6636
|
-
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"flex space-around pt-5\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
6637
|
-
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top
|
|
6636
|
+
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
6637
|
+
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top:22px;z-index:90}.my-arrow{font-size:12px}.less-opacity1{opacity:.75}.less-opacity2{opacity:.5}.nlw-status{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px}.nlw-status-mob{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px;padding-top:32px}.nlw-div{padding:0 16px;margin:10px 0 16px}.divider{border-left:1.6px solid #a6a4a4}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
|
|
6638
6638
|
}] }
|
|
6639
6639
|
];
|
|
6640
6640
|
/** @nocollapse */
|