@sunbird-cb/consumption 0.0.57 → 0.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +10 -9
  2. package/bundles/sunbird-cb-consumption.umd.js.map +1 -1
  3. package/bundles/sunbird-cb-consumption.umd.min.js +1 -1
  4. package/bundles/sunbird-cb-consumption.umd.min.js.map +1 -1
  5. package/esm2015/lib/_common/announcements/announcements.component.js +1 -1
  6. package/esm2015/lib/_common/data-points/data-points.component.js +2 -2
  7. package/esm2015/lib/_common/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component.js +1 -1
  8. package/esm2015/lib/_common/microsites/providers/providers-v2/providers-v2.component.js +1 -1
  9. package/esm2015/lib/_common/sliders/sliders.component.js +1 -1
  10. package/esm2015/lib/_common/top-learners/top-learners.component.js +2 -2
  11. package/esm2015/lib/_common/top-learners/top-learners.module.js +4 -2
  12. package/esm2015/lib/_common/user-content-rating/user-content-rating-lib.component.js +2 -2
  13. package/esm5/lib/_common/announcements/announcements.component.js +1 -1
  14. package/esm5/lib/_common/data-points/data-points.component.js +2 -2
  15. package/esm5/lib/_common/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component.js +1 -1
  16. package/esm5/lib/_common/microsites/providers/providers-v2/providers-v2.component.js +1 -1
  17. package/esm5/lib/_common/sliders/sliders.component.js +1 -1
  18. package/esm5/lib/_common/top-learners/top-learners.component.js +2 -2
  19. package/esm5/lib/_common/top-learners/top-learners.module.js +4 -2
  20. package/esm5/lib/_common/user-content-rating/user-content-rating-lib.component.js +2 -2
  21. package/fesm2015/sunbird-cb-consumption.js +10 -9
  22. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  23. package/fesm5/sunbird-cb-consumption.js +10 -9
  24. package/fesm5/sunbird-cb-consumption.js.map +1 -1
  25. package/package.json +1 -1
  26. package/sunbird-cb-consumption.metadata.json +1 -1
@@ -5860,7 +5860,7 @@ SlidersLibComponent.decorators = [
5860
5860
  { type: Component, args: [{
5861
5861
  selector: 'sb-uic-sliders',
5862
5862
  template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n class=\"banner-overlay {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" \n *ngFor=\"let slide of widgetData; let i = index\" \n [hidden]=\"i !== currentIndex\" \n [ngStyle]=\"{\n 'border-width': isMobile? styleData?.responsive?.imageBorderWidth : styleData?.imageBorderWidth,\n 'border-color': isMobile? styleData?.responsive?.imageBorderColor : styleData?.imageBorderColor,\n 'border-style': isMobile? styleData?.responsive?.imageBorderStyle: styleData?.imageBorderStyle}\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n class=\"banner-title text-truncate {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n </div>\n</div>\n<div class=\"banner-container-solo \" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\" *ngIf=\"widgetData?.length == 1\">\n <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n<!-- <div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n *ngIf=\"widgetData?.length\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n [queryParams]=\"widgetData[currentIndex].queryParams || {}\"\n [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{ 'cursor-auto': !widgetData[currentIndex].redirectUrl }\"></a>\n <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n <div class=\"banner-meta\">\n <a [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n <button *ngIf=\"widgetData?.length > 1\" class=\"prev\" aria-label=\"Previous slide\" (click)=\"slideTo(currentIndex - 1)\">\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\">&#10094;</a>\n </button>\n <button *ngIf=\"widgetData?.length > 1\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\" aria-label=\"Next slide\">\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\">&#10095;</a>\n </button>\n\n</div> -->\n<ng-container *ngIf=\"!widgetData?.length\">\n <div class=\"slider default-slider h-full\">\n <div class=\"relative h-full\">\n <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n <div class=\"default-title rounded-full\">\n <p class=\"mat-h1\">{{title}}</p>\n </div>\n </div>\n </div>\n</ng-container>\n",
5863
- styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}@media screen and (min-width:769px){.banner-container{height:380px!important}}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
5863
+ styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}@media screen and (min-width:769px){.banner-container,.banner-container-solo{height:380px!important}}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:380px;display:block;border-radius:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}@media screen and (min-width:769px){.navigation.middle-inline .prev{left:18%!important}.navigation.middle-inline .next{right:6%!important}}"]
5864
5864
  }] }
5865
5865
  ];
5866
5866
  /** @nocollapse */
@@ -6334,7 +6334,7 @@ class DataPointsComponent {
6334
6334
  DataPointsComponent.decorators = [
6335
6335
  { type: Component, args: [{
6336
6336
  selector: 'sb-uic-data-points',
6337
- 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 customdiv\" *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?.valueColor\">\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 {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\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\">\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<!-- 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",
6337
+ 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 customdiv\" *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?.valueColor\">\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<!-- 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",
6338
6338
  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')}.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 (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}"]
6339
6339
  }] }
6340
6340
  ];
@@ -7728,7 +7728,7 @@ AnnouncementsComponent.decorators = [
7728
7728
  { type: Component, args: [{
7729
7729
  selector: 'sb-uic-announcements',
7730
7730
  template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web' && !isLoading\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo\">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"{{mobileHeight ? 'mob-key-list' : expand && expanded ? 'exp-key-list' : 'key-list'}}\" *ngIf=\"objectData?.list?.length\">\n <div *ngFor=\"let item of objectData?.list; let i = index\">\n <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" *ngIf=\"!objectData?.list?.length\">\n <div class=\"text-center\">No announcements yet!</div>\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"!mobileHeight && expand\">\n <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" *ngIf=\"!expanded\">\n <mat-icon>expand_more</mat-icon>\n </div>\n <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" *ngIf=\"expanded\">\n <mat-icon>expand_less</mat-icon>\n </div>\n</ng-container>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n <div class=\"flex item-center key-logo \">\n <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n <div class=\"flex key-button gap-3\">\n <div>\n <img [src]=\"objectData?.mobileIcon\">\n </div>\n <div>{{objectData?.title}}</div> \n <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n </div> \n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'web' && isLoading\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo pt-1\">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" > \n <div class=\"key-list-item mb-4\" \n *ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content un-expand\">\n <div class=\"py-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"py-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n</div>\n",
7731
- styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{height:325px;overflow:auto}.exp-key-list{height:100%;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}.announcements-expand{width:32px;height:32px;position:relative;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;left:50%;right:50%;top:-16px;cursor:pointer}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
7731
+ styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{height:380px;overflow:auto}.exp-key-list{height:100%;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}.announcements-expand{width:32px;height:32px;position:relative;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;left:50%;right:50%;top:-16px;cursor:pointer}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
7732
7732
  }] }
7733
7733
  ];
7734
7734
  /** @nocollapse */
@@ -7906,7 +7906,7 @@ class TopLearnersComponent {
7906
7906
  TopLearnersComponent.decorators = [
7907
7907
  { type: Component, args: [{
7908
7908
  selector: 'sb-uic-top-learners',
7909
- template: "<div class=\"flex flex-center\">\n <div>\n <div class=\"title-border\"></div>\n <div class=\"title\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n <div class=\"title-border\"></div>\n </div> \n</div>\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length\">\n <div class=\"w-full margin-bottom-l margin-top-l\">\n <div class=\"flex gap-3\">\n <div *ngFor=\"let obj of results; let i=index\" class=\"flex-container\">\n <div class=\"flex-item user-box\">\n <div class=\"flex gap-3 img-name-sec\">\n <div class=\"flex gap-3\">\n <div class=\"profile-pic\" *ngIf=\"obj?.profile_image\">\n <img [src]=\"obj?.profile_image\" class=\"user-image\"/>\n </div>\n <div class=\"initial\" *ngIf=\"!obj?.profile_image\"\n [style.backgroundColor]=\"colors[i]\">\n {{createInititals(obj?.fullname)}}\n </div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"name-sec\">{{obj?.fullname}}</div>\n <div class=\"designation-sec\">{{obj?.designation}}</div>\n <div class=\"designation-sec\">{{channnelName}}</div>\n </div>\n </div>\n <div class=\"flex gap-3\"> \n <div class=\"rank-sec\">{{getRank(+obj?.rank)}}</div>\n </div> \n </div>\n <div class=\"flex gap-2 kp-section\">\n <div class=\"kp-icon\"><img [src]=\"objectData?.kpIcon\" class=\"kp-image\"/></div>\n <div class=\"points\">{{obj?.total_points || 0}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length === 0\">\n <div class=\"margin-top-l noData\">\n No data\n </div>\n</div>\n\n<ng-container>\n <div class=\"top-learners-container\" *ngIf=\"loading\">\n <div class=\"w-full margin-bottom-l margin-top-l\">\n <div class=\"flex gap-3\">\n <div *ngFor=\"let obj of [1,2,3]\" class=\"flex-container\">\n <div class=\"flex-item user-box\">\n <div class=\"flex gap-3 img-name-sec\">\n <div class=\"flex gap-3\">\n <div class=\"profile-pic\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n [height]=\"'44px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"name-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"designation-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"designation-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"flex gap-3\"> \n <div class=\"rank-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n [height]=\"'44px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n <div class=\"flex gap-2 kp-section\">\n <div class=\"kp-icon\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n <div class=\"points\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>",
7909
+ template: "<div class=\"flex flex-center\">\n <div>\n <div class=\"title-border\"></div>\n <div class=\"title\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n <div class=\"title-border\"></div>\n </div> \n</div>\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length\">\n <div class=\"w-full margin-bottom-l margin-top-l\">\n <div class=\"flex gap-3\">\n <div *ngFor=\"let obj of results; let i=index\" class=\"flex-container\">\n <div class=\"flex-item user-box\">\n <div class=\"flex gap-3 img-name-sec\">\n <div class=\"flex gap-3\">\n <div class=\"profile-pic\" *ngIf=\"obj?.profile_image\">\n <img [src]=\"obj?.profile_image\" class=\"user-image\"/>\n </div>\n <div class=\"initial\" *ngIf=\"!obj?.profile_image\"\n [style.backgroundColor]=\"colors[i]\"\n >\n {{createInititals(obj?.fullname)}}\n </div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"name-sec\" *ngIf=\"obj?.fullname?.length >= 24\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.fullname}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.fullname}}\n </div>\n <div class=\"name-sec\" *ngIf=\"obj?.fullname?.length < 24\">\n {{obj?.fullname}}\n </div>\n <div class=\"designation-sec\" *ngIf=\"obj?.fullname?.length >= 32\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.designation}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.designation}}\n </div>\n <div class=\"designation-sec\" *ngIf=\"obj?.designation?.length < 32\">{{obj?.designation}}</div>\n <div class=\"designation-sec\" *ngIf=\"obj?.org_name?.length >= 32\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.org_name}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.org_name}}\n </div>\n <div class=\"designation-sec\" *ngIf=\"obj?.org_name?.length < 32\">{{obj?.org_name}}</div>\n </div>\n </div>\n <div class=\"flex gap-3\"> \n <div class=\"rank-sec\">{{getRank(+obj?.row_num)}}</div>\n </div> \n </div>\n <div class=\"flex gap-2 kp-section\">\n <div class=\"kp-icon\"><img [src]=\"objectData?.kpIcon\" class=\"kp-image\"/></div>\n <div class=\"points\">{{obj?.total_points || 0}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length === 0\">\n <div class=\"margin-top-l noData\">\n No data\n </div>\n</div>\n\n<ng-container>\n <div class=\"top-learners-container\" *ngIf=\"loading\">\n <div class=\"w-full margin-bottom-l margin-top-l\">\n <div class=\"flex gap-3\">\n <div *ngFor=\"let obj of [1,2,3]\" class=\"flex-container\">\n <div class=\"flex-item user-box\">\n <div class=\"flex gap-3 img-name-sec\">\n <div class=\"flex gap-3\">\n <div class=\"profile-pic\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n [height]=\"'44px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"name-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"designation-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"designation-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"flex gap-3\"> \n <div class=\"rank-sec\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n [height]=\"'44px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n <div class=\"flex gap-2 kp-section\">\n <div class=\"kp-icon\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n <div class=\"points\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>",
7910
7910
  styles: [".title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:15px}.title-border{margin:10px;width:240px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.noData{border:1px solid #1b4ca1;padding:15px;display:flex;justify-content:center;border-radius:12px}.top-learners-container{overflow:auto}::-webkit-scrollbar{height:10px!important}::-webkit-scrollbar-track{background:#eff3f9!important}.user-box{width:360px;height:134px;border-radius:8px;background-color:#fff;padding:16px;position:relative}.flex-container{display:flex}.flex-item{flex:0 0 auto;white-space:nowrap}.img-name-sec{justify-content:space-between}.initial{width:44px;height:44px;border-radius:50%;align-items:center;display:flex;justify-content:center;font-weight:700;color:#fff}.user-image{width:44px;height:44px;border-radius:50%}.name-sec{font-family:Lato;font-size:16px;font-weight:700;line-height:19.2px;text-align:left;width:200px!important;overflow:hidden;text-overflow:ellipsis}.designation-sec{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6;width:200px!important;overflow:hidden;text-overflow:ellipsis}.rank-sec{font-family:Montserrat;font-size:36px;font-weight:700;line-height:43.88px;text-align:left;color:#ef951e}.kp-section{justify-content:flex-end;position:absolute;right:18px;bottom:16px;align-items:center}.kp-image{width:32px;height:32px;padding-top:3px}.points{font-family:Lato;font-size:24px;font-weight:700;line-height:28.8px;text-align:left;color:#1b4ca1;padding-bottom:3px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(204,204,204,.8);border-radius:10px}@media screen and (max-width:768px){.user-box{width:343px}}"]
7911
7911
  }] }
7912
7912
  ];
@@ -7949,7 +7949,8 @@ TopLearnersModule.decorators = [
7949
7949
  declarations: [TopLearnersComponent],
7950
7950
  imports: [
7951
7951
  CommonModule,
7952
- SkeletonLoaderLibModule
7952
+ SkeletonLoaderLibModule,
7953
+ MatTooltipModule
7953
7954
  ],
7954
7955
  exports: [TopLearnersComponent],
7955
7956
  },] }
@@ -14774,8 +14775,8 @@ class UserContentRatingLibComponent {
14774
14775
  UserContentRatingLibComponent.decorators = [
14775
14776
  { type: Component, args: [{
14776
14777
  selector: 'sb-uic-user-content-rating',
14777
- template: "<ng-container *ngIf=\"contentdata.length\">\n <div class=\"user-rating-section\">\n <sb-uic-sliders-ng-content [title]=\"'providerName'\" [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div class=\"flex justify-start md:justify-center users-block\">\n <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </div>\n </ng-container>\n </div>\n <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8 pb-5\">\n <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n </div>\n <div class=\"title-border-v2\"></div>\n <p class=\"userName w-full mb-4 pt-6\">{{ratingData?.userDetails?.firstName}}</p>\n <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating, ratingData?.rating) }}\n </mat-icon>\n </div>\n <p class=\"content-feedback w-full mb-4 px-4 md:px-8\">{{ratingData?.review}}</p>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n</ng-container>\n\n",
14778
- styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:10px!important;width:100%}.title-border-v2{margin:10px;width:300px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.user-ratting-wrapper{border:2px solid #f3962f;border-radius:15px;padding:30px 0;background:linear-gradient(111.16deg,rgba(243,150,47,.24) 9.09%,rgba(255,255,255,0) 74.81%)}.user-rating-section ::ng-deep.prev{margin-left:-50px;top:59%}.user-rating-section ::ng-deep.next{margin-right:-50px;top:59%}.user-rating-section ::ng-deep.dots-container{display:none!important}@media screen and (max-width:768px){.user-rating-section ::ng-deep.next{margin-right:-16px;top:59%}.user-rating-section .users-block{width:90%}.user-rating-section ::ng-deep.widget-card-content-new{margin:0 15px}.user-rating-section .user-ratting-wrapper{padding:15px 0}.user-rating-section ::ng-deep.dots-container{display:block!important}.user-rating-section ::ng-deep.banner-meta{bottom:-12px}}"]
14778
+ template: "<ng-container *ngIf=\"contentdata.length\">\n <div class=\"user-rating-section\">\n <sb-uic-sliders-ng-content [title]=\"'providerName'\" [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div class=\"flex justify-start md:justify-center users-block\">\n <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </div>\n </ng-container>\n </div>\n <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8 pb-5\">\n <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n </div>\n <div class=\"title-border-v2\"></div>\n <p class=\"userName w-full mb-4 pt-2\">{{ratingData?.userDetails?.firstName}}</p>\n <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating, ratingData?.rating) }}\n </mat-icon>\n </div>\n <p class=\"content-feedback w-full mb-4 px-4 md:px-8\">{{ratingData?.review}}</p>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n</ng-container>\n\n",
14779
+ styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:10px!important;width:100%}.title-border-v2{margin:10px;width:300px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.user-ratting-wrapper{border:1px solid #f3962f;border-radius:15px;padding:15px 0;background:linear-gradient(111.16deg,rgba(243,150,47,.24) 9.09%,rgba(255,255,255,0) 74.81%)}.user-rating-section ::ng-deep.prev{margin-left:-50px;top:59%}.user-rating-section ::ng-deep.next{margin-right:-50px;top:59%}.user-rating-section ::ng-deep.dots-container{display:none!important}@media screen and (max-width:768px){.user-rating-section ::ng-deep.next{margin-right:-16px;top:59%}.user-rating-section .users-block{width:90%}.user-rating-section ::ng-deep.widget-card-content-new{margin:0 15px}.user-rating-section .user-ratting-wrapper{padding:15px 0}.user-rating-section ::ng-deep.dots-container{display:block!important}.user-rating-section ::ng-deep.banner-meta{bottom:-12px}}"]
14779
14780
  }] }
14780
14781
  ];
14781
14782
  /** @nocollapse */
@@ -15044,7 +15045,7 @@ MdoChannelV2Component.decorators = [
15044
15045
  { type: Component, args: [{
15045
15046
  selector: 'sb-uic-mdo-channel-v2',
15046
15047
  template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container *ngIf=\"sectionList?.length\">\n <ng-container *ngFor=\"let section of sectionList\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n\n<ng-template #topSection let-data=\"data\">\n <!-- top section desktop layout -->\n <div class=\"hidden md:block\">\n <div class=\"web-banner-background\">\n <div class=\"flex sticky-logo-square\">\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n <div class=\"col-span-12 md:col-span-6\">\n <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n <div class=\"\">\n <div class=\"flex items-center logo-square \">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n <h1 class=\" txt-ellipsis-2 break-words pt-10\"\n [style.color]=\"data.titleColor\">{{data.title || channnelName}}</h1>\n <p class=\"mat-body-1\" [style.color]=\"data.descriptionColor\">\n {{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-6\">\n <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n <!-- top section m-site layout -->\n <div class=\"block md:hidden\">\n <div class=\"col-span-12\">\n <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n <div class=\"container px-4 flex flex-col mob-container\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-square top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || channnelName}}</h1>\n <p class=\"mat-body-2\">\n {{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n </div>\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"container metrics-section\" >\n <div class=\"hidden md:block\">\n <div class=\"metrics\"\n [ngStyle]=\"{'background': data?.metrics?.background}\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleFlexeRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n </div>\n <div class=\"block md:hidden pt-14 px-4\">\n <div class=\"mob-metrics mob-metrics-sec\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n \n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mainContent let-data=\"data\">\n <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n <div class=\"container\">\n <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n <sb-uic-cbp-plan\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.cbpPlanSection?.data\">\n </sb-uic-cbp-plan>\n </div>\n <div class=\"block md:hidden col-span-12 mt-6\">\n <sb-uic-announcements\n [layoutType]=\"'mobile'\"\n (openDialog)=\"triggerOpenDialog($event)\"\n [objectData]=\"data?.announcementSection?.data\"\n [fetchDataFromApi]=\"false\"\n [channelId]=\"orgId\">\n </sb-uic-announcements>\n <div class=\"announcements-container\" *ngIf=\"showModal\">\n <div class=\"cursor-pointer close-share-dialog\">\n <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n </div>\n <div class=\"share-modal px-3 pt-8\">\n <sb-uic-announcements\n [layoutType]=\"'web'\"\n (openDialog)=\"triggerOpenDialog($event)\"\n [objectData]=\"data?.announcementSection?.data\"\n [mobileHeight]=\"true\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\">\n </sb-uic-announcements>\n </div>\n </div>\n </div>\n <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n <!-- Tabs Section -->\n <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n [selectedIndex]=\"selectedIndex\" (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n <mat-tab label=\"Content\" >\n <ng-template mat-tab-label i18n>\n Learn\n </ng-template>\n <ng-container *ngIf=\"data.tabSection.contentTab.length === contentTabEmptyResponseCount\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\" >\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n </ng-container>\n <div class=\"padding-top-l \">\n <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n </div>\n </mat-tab>\n <mat-tab label=\"Core Areas\">\n <ng-template mat-tab-label i18n>\n Competency\n </ng-template>\n <div>\n <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </div>\n <div class=\"col-span-12 md:col-span-4\">\n <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n *ngIf=\"data?.cbpPlanSection?.data\">\n <div class=\"pt-4\">\n <sb-uic-cbp-plan\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.cbpPlanSection?.data\">\n </sb-uic-cbp-plan>\n </div> \n </div>\n <div class=\"hidden md:block\" \n *ngIf=\"data?.announcementSection?.data\">\n <div class=\"pt-4\">\n <sb-uic-announcements\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.announcementSection?.data\">\n </sb-uic-announcements>\n </div> \n </div>\n </div> \n </div>\n </div>\n </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n <div class=\"w-full\">\n Announcement Section -->\n <!-- <h1>Announcement</h1>\n </div>\n </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay let-data=\"data\">\n <ng-container *ngIf=\"data?.length\">\n <ng-container *ngFor=\"let section of data\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock;else noData\">\n <div class=\"w-full container-balanced\">\n <p class=\"mat-body-1\">This section shows the list of top competencies users in this MDO are learning, based on the courses they've completed and enrolled in.</p>\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook-mdo\n [dynamicColor]=\"'#999999'\"\n [dynamicAlignPills]=\"'start'\"\n [cardDisplayCount]=\"2\"\n (emptyResponse)=\"hideCompetency($event)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"orgId\"\n >\n </sb-uic-competency-passbook-mdo>\n </div>\n </div>\n <!-- <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\"> -->\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n <ng-container *ngIf=\"!contentStrip?.hideSection\">\n <div class=\"flex mb-8\">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event, contentStrip)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n [providerId]=\"orgId\"\n [widgetData]=\"contentStrip\"\n [channnelName]=\"channnelName\"\n >\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #noData>\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\" >\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n <div class=\"flex items-center justify-center\">\n <div class=\"container top-learners margin-bottom-l margin-top-l\">\n <sb-uic-top-learners\n [objectData]=\"data\"\n [channnelName]=\"channnelName\"\n [channelId]=\"orgId\">\n </sb-uic-top-learners>\n </div>\n </div>\n</ng-template>",
15047
- styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720698778795_MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:right;background-repeat:no-repeat}.sticky-logo-square{position:absolute;top:215px;justify-content:end;width:20.5%;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px}.logo-square{width:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:rgba(19,19,19,.6392156863);width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width:768px){.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]
15048
+ styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720698778795_MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:right;background-repeat:no-repeat}.sticky-logo-square{position:absolute;top:215px;justify-content:end;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px}.logo-square{width:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:rgba(19,19,19,.6392156863);width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width:768px){.metrics-section{margin-top:0}.top-learners{padding-left:30px}}@media screen and (min-width:769px){.sticky-logo-square{width:8%}}@media screen and (min-width:1280px){.sticky-logo-square{width:10%}}@media screen and (min-width:1520px){.sticky-logo-square{width:15%}}@media screen and (min-width:1904px){.sticky-logo-square{width:20%}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]
15048
15049
  }] }
15049
15050
  ];
15050
15051
  /** @nocollapse */
@@ -15361,7 +15362,7 @@ ProvidersV2Component.decorators = [
15361
15362
  { type: Component, args: [{
15362
15363
  selector: 'sb-uic-providers-v2',
15363
15364
  template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container *ngIf=\"sectionList?.length\">\n <ng-container *ngFor=\"let section of sectionList\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'trainingCalendar'\" [ngTemplateOutlet]=\"trainingCalendar\"\n [ngTemplateOutletContext]=\"{trainingCalendar: column.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contributors'\" [ngTemplateOutlet]=\"contributors\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'infra'\" [ngTemplateOutlet]=\"infra\"\n [ngTemplateOutletContext]=\"{infra: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentTopStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container> \n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container> \n <ng-container *ngSwitchCase=\"'learnerReview'\" [ngTemplateOutlet]=\"learnerReviewBlock\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container> \n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n<div class=\"container-fluid\" *ngIf=\"navList?.length\">\n <div class=\"flex sticky-navigator gap-4\">\n <mat-icon class=\"nav-up-arrow cursor-pointer\" (click)=\"scrollToSection('section-micro-sites')\">arrow_upwards</mat-icon>\n <ng-container *ngFor=\"let section of navList\">\n <ng-container *ngIf=\"section.navigation\">\n <div class=\"nav-button\" (click)=\"scrollToSection(section?.key); raiseNavTelemetry(section?.title)\">{{section?.title}}</div>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n <!-- <div class=\"w-full grid grid-cols-12 gap-4\"> -->\n <div class=\"col-span-12 \">\n <div class=\"grid grid-cols-12\">\n <div class=\"hidden md:block p-5 custombgsection\">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'multipleRows-V2'\"></sb-uic-data-points>\n </div>\n <div class=\"col-span-3\"></div>\n <div class=\"col-span-12 md:col-span-9\">\n <div class=\"slider h-full\" *ngIf=\"data?.sliderData?.sliders\">\n <sb-uic-sliders [title]=\"providerName\" [widgetData]=\"data?.sliderData?.sliders\" [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 title-section px-5 md:py-5 mob-container\">\n <div class=\"container flex flex-col md:flex-row\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-rounded top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || providerName}}</h1>\n <p>{{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n <div class=\"block md:hidden overflow-y-auto mb-3\">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow-v2'\"></sb-uic-data-points>\n </div>\n <button\n (click)=\"raiseTelemetry(data?.contentButton?.title)\"\n [routerLink]=\"[data?.contentButton?.redirectUrl, providerName, providerId, 'all-CBP']\"\n [queryParams]=\"{pageDetails: true}\" mat-button type=\"button\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{data?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <!-- </div> -->\n</ng-template>\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n <ng-container *ngIf=\"!contentStrip?.hideSection\">\n <div class=\"flex justify-center relative mt-8 mb-8\">\n <img class=\"absolute {{contentStrip?.sectionImagePosition}}\" src=\"{{contentStrip?.sectionImage}}\" alt=\"\">\n <div class=\"container \">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event,contentStrip)\"\n (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n [providerId]=\"providerId\"\n [widgetData]=\"contentStrip\">\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #contributors let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-3 contributor-desc\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.detaulTitle}}<span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n </div>\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.myTitle}}<span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title-v2\">{{data.detaulTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n <span class=\"infra-title-v2\"> {{data.myTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{data.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-9\">\n <sb-uic-common-strip [widgetData]=\"data\"></sb-uic-common-strip>\n </div>\n </div>\n <div class=\"w-full section-divider pt-6\">\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #infra let-infra=\"infra\">\n <div class=\"infra-background px-5\" [style.background]=\"infra?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 infra-sec padding-top-l\">\n <div class=\"col-span-12 md:col-span-4 infra-sec-desc\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title2 hidden md:block\">\n {{infra?.detaulTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title2\">{{infra?.detaulTitle}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{infra?.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-8\">\n <sb-uic-data-points [objectData]=\"infra\" [layoutType]=\"'gridLayout'\"></sb-uic-data-points>\n </div>\n </div>\n </div>\n </div>\n <div class=\"infra-background slider-background\" [style.background]=\"infra?.background\">\n </div>\n <div class=\"slider-background1 mb-8\">\n <div class=\"container-balanced w-full slider-background-2\">\n <div class=\"info-slider\">\n <sb-uic-sliders [widgetData]=\"infra?.sliderData?.sliders\" [styleData]=\"infra?.sliderData?.styleData\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock\">\n <div class=\"w-full container-balanced\">\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook\n (emptyResponse)=\"hideCompetency($event, competency)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"providerId\">\n </sb-uic-competency-passbook>\n </div>\n </div>\n <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\">\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #trainingCalendar let-trainingCalendar=\"trainingCalendar\">\n <div class=\"hidden md:block\">\n <div class=\"col-span-12 px-8 py-8\" [style.background]=\"trainingCalendar?.background\">\n <div class=\"container-balanced flex flex-col\">\n <div class=\"col-span-12 mat-subheading-1 margin-remove\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'grid'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"block md:hidden\">\n <div class=\"col-span-12 px-5 py-3 mob-header\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <div class=\"col-span-12\">\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'row'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"col-span-12 flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n</ng-template>\n<ng-template #learnerReviewBlock let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\" *ngIf=\"!data?.hideSection\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-4 contributor-desc\">\n <div class=\"infra-box-review flex flex-col\">\n <div class=\"learner-title hidden md:block\">\n {{data?.detaulTitle}}\n </div>\n <div class=\"infra-title2 hidden md:block\">\n {{data?.myTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"learner-title\">{{data?.detaulTitle}}</span> <span class=\"infra-title2\"> {{data?.myTitle}}</span>\n </div> \n </div> \n </div>\n <div class=\"col-span-12 md:col-span-8\">\n <sb-uic-user-content-rating (emptyResponse)=\"hideLearnerReview($event, data)\" [formData]=\"data\" [providerId]=\"providerId\"></sb-uic-user-content-rating>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n",
15364
- styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec{padding:25px 0}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-180px;padding:25px}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:768px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1721377495600_test%2011.svg) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:769px){::ng-deep.prev{left:20%!important}.custombgsection{width:30%}}@media screen and (min-width:1280px){.custombgsection{width:38%}}"]
15365
+ styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec{padding:25px 0}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-180px;padding:25px}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:768px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1721377495600_test%2011.svg) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:769px){.custombgsection{width:30%}}@media screen and (min-width:1280px){.custombgsection{width:38%}}"]
15365
15366
  }] }
15366
15367
  ];
15367
15368
  /** @nocollapse */