@sunbird-cb/consumption 0.0.69 → 0.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/sunbird-cb-consumption.umd.js +17 -17
- package/bundles/sunbird-cb-consumption.umd.js.map +1 -1
- package/bundles/sunbird-cb-consumption.umd.min.js +1 -1
- package/bundles/sunbird-cb-consumption.umd.min.js.map +1 -1
- package/esm2015/lib/_common/cards/card-karma-programs/card-karma-programs.component.js +1 -1
- package/esm2015/lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component.js +1 -1
- package/esm2015/lib/_common/cards/card-landscape/card-landscape.component.js +1 -1
- package/esm2015/lib/_common/cards/card-mdo-channel/card-mdo-channel.component.js +1 -1
- package/esm2015/lib/_common/cards/card-mdo-channel-v1/card-mdo-channel-v1.component.js +1 -1
- package/esm2015/lib/_common/cards/card-portrait/card-portrait.component.js +1 -1
- package/esm2015/lib/_common/cards/card-portrait-ext/card-portrait-ext.component.js +1 -1
- package/esm2015/lib/_common/cards/card-progress-portrait-lib/card-progress-portrait-lib.component.js +1 -1
- package/esm2015/lib/_common/cards/card-resource/card-resource.component.js +1 -1
- package/esm2015/lib/_common/cards/card-user/card-user.component.js +1 -1
- package/esm2015/lib/_common/cards/card-wide/card-wide.component.js +2 -2
- package/esm2015/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +1 -1
- package/esm2015/lib/_common/data-points/data-points.component.js +3 -3
- package/esm2015/lib/_common/microsites/providers/providers-v2/providers-v2.component.js +3 -3
- package/esm2015/lib/_common/sliders/sliders.component.js +1 -1
- package/esm5/lib/_common/cards/card-karma-programs/card-karma-programs.component.js +1 -1
- package/esm5/lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component.js +1 -1
- package/esm5/lib/_common/cards/card-landscape/card-landscape.component.js +1 -1
- package/esm5/lib/_common/cards/card-mdo-channel/card-mdo-channel.component.js +1 -1
- package/esm5/lib/_common/cards/card-mdo-channel-v1/card-mdo-channel-v1.component.js +1 -1
- package/esm5/lib/_common/cards/card-portrait/card-portrait.component.js +1 -1
- package/esm5/lib/_common/cards/card-portrait-ext/card-portrait-ext.component.js +1 -1
- package/esm5/lib/_common/cards/card-progress-portrait-lib/card-progress-portrait-lib.component.js +1 -1
- package/esm5/lib/_common/cards/card-resource/card-resource.component.js +1 -1
- package/esm5/lib/_common/cards/card-user/card-user.component.js +1 -1
- package/esm5/lib/_common/cards/card-wide/card-wide.component.js +2 -2
- package/esm5/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +1 -1
- package/esm5/lib/_common/data-points/data-points.component.js +3 -3
- package/esm5/lib/_common/microsites/providers/providers-v2/providers-v2.component.js +3 -3
- package/esm5/lib/_common/sliders/sliders.component.js +1 -1
- package/fesm2015/sunbird-cb-consumption.js +17 -17
- package/fesm2015/sunbird-cb-consumption.js.map +1 -1
- package/fesm5/sunbird-cb-consumption.js +17 -17
- package/fesm5/sunbird-cb-consumption.js.map +1 -1
- package/package.json +1 -1
- package/sunbird-cb-consumption.metadata.json +1 -1
|
@@ -6013,7 +6013,7 @@ SlidersLibComponent.decorators = [
|
|
|
6013
6013
|
{ type: Component, args: [{
|
|
6014
6014
|
selector: 'sb-uic-sliders',
|
|
6015
6015
|
template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}} {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" (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=\"{{type === 'atictitopbanner' ? 'banner-image' : 'bannerimage-mdo'}}\" />\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)\">❮</a>\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </div>\n</div>\n<div class=\"banner-container-solo {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" [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\">❮</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\">❯</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",
|
|
6016
|
-
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:768px) and (max-width:1024px){.banner-container{min-height:280px!important}.navigation.middle-inline .prev{left:15%!important}}@media screen and (min-width:768px) and (max-width:
|
|
6016
|
+
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:768px) and (max-width:1024px){.banner-container{min-height:280px!important}.navigation.middle-inline .prev{left:15%!important}}@media screen and (min-width:768px) and (max-width:1279px){.atictitopbanner{height:280px!important}}@media screen and (min-width:1280px){.atictitopbanner{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;-o-object-fit:cover;object-fit:cover}.banner .bannerimage-mdo{width:100%;display:block;height:inherit;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.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;background:#f5f6fa;-o-object-fit:cover;object-fit:cover;height:inherit}.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:23%!important}.navigation.middle-inline .next{right:6%!important}}"]
|
|
6017
6017
|
}] }
|
|
6018
6018
|
];
|
|
6019
6019
|
/** @nocollapse */
|
|
@@ -6493,8 +6493,8 @@ class DataPointsComponent {
|
|
|
6493
6493
|
DataPointsComponent.decorators = [
|
|
6494
6494
|
{ type: Component, args: [{
|
|
6495
6495
|
selector: 'sb-uic-data-points',
|
|
6496
|
-
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?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- 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",
|
|
6497
|
-
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 (min-width:768px) and (max-width:
|
|
6496
|
+
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 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- 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",
|
|
6497
|
+
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 (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
|
|
6498
6498
|
}] }
|
|
6499
6499
|
];
|
|
6500
6500
|
/** @nocollapse */
|
|
@@ -8882,7 +8882,7 @@ CardResourceComponent.decorators = [
|
|
|
8882
8882
|
{ type: Component, args: [{
|
|
8883
8883
|
selector: 'ws-cb-widget-card-resource',
|
|
8884
8884
|
template: " <!-- <mat-card class=\"card-resource-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n greyOut:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container *ngIf=\"widgetData.content\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <ng-container *ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container *ngIf=\"widgetData.content.posterImage\">\n <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container *ngIf=\"!widgetData.content.posterImage\">\n <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <ws-widget-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </ws-widget-display-content-type>\n </div>\n <div class=\"flex ml-5 flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <ws-widget-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </ws-widget-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 description-text font-medium ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <span class=\"org-text\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container *ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2>\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData.content.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card> -->\n",
|
|
8885
|
-
styles: [".card-resource-container{position:relative;width:384px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:450px;margin:20px 8px}.card-resource-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-resource-container .description-text{margin:12px 0;font-weight:400}.card-resource-container .course_logo_box{width:24px;height:24px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1607843137);box-sizing:border-box}.card-resource-container .course_logo_box img{height:18px;width:18px;padding:2px;display:inline-block}.card-resource-container .course_logo_box p{display:inline-block;vertical-align:top}.card-resource-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-resource-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-resource-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-resource-container mat-card-content{background:#fff}.card-resource-container .card-img{max-height:240px;min-height:240px;width:100%;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px}.card-resource-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-resource-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-resource-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-resource-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-resource-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-resource-container .basic{margin:auto 0}.card-resource-container .title-text{word-break:break-
|
|
8885
|
+
styles: [".card-resource-container{position:relative;width:384px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:450px;margin:20px 8px}.card-resource-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-resource-container .description-text{margin:12px 0;font-weight:400}.card-resource-container .course_logo_box{width:24px;height:24px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1607843137);box-sizing:border-box}.card-resource-container .course_logo_box img{height:18px;width:18px;padding:2px;display:inline-block}.card-resource-container .course_logo_box p{display:inline-block;vertical-align:top}.card-resource-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-resource-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-resource-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-resource-container mat-card-content{background:#fff}.card-resource-container .card-img{max-height:240px;min-height:240px;width:100%;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px}.card-resource-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-resource-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-resource-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-resource-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-resource-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-resource-container .basic{margin:auto 0}.card-resource-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-resource-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}"]
|
|
8886
8886
|
}] }
|
|
8887
8887
|
];
|
|
8888
8888
|
/** @nocollapse */
|
|
@@ -8977,7 +8977,7 @@ CardPortraitComponent.decorators = [
|
|
|
8977
8977
|
{ type: Component, args: [{
|
|
8978
8978
|
selector: 'sb-uic-card-portrait',
|
|
8979
8979
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n greyOut:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container *ngIf=\"widgetData.content\">\n <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n role=\"link\" i18n-aria-label>\n <ng-container *ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container *ngIf=\"widgetData.content.posterImage\">\n <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container *ngIf=\"!widgetData.content.posterImage\">\n <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n <div class=\"cbp-mark\">\n <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n </div>\n </ng-container> -->\n <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n <span class=\"org-text\">By {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData.content.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n </span>\n </ng-container>\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n </span>\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container *ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData.content.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n <div class=\"display-contents\" >\n <ng-container *ngIf=\"!isCardFlipped\">\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n</ng-template>",
|
|
8980
|
-
styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-
|
|
8980
|
+
styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
|
|
8981
8981
|
}] }
|
|
8982
8982
|
];
|
|
8983
8983
|
/** @nocollapse */
|
|
@@ -9501,7 +9501,7 @@ CardUserComponent.decorators = [
|
|
|
9501
9501
|
{ type: Component, args: [{
|
|
9502
9502
|
selector: 'sb-uic-card-user',
|
|
9503
9503
|
template: "<mat-card class=\"user-card card-users-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container *ngIf=\"widgetData.content\">\n <a (click)=\"raiseTelemetry();$event.stopPropagation()\" role=\"link\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container *ngIf=\"widgetData.content.image\">\n <img mat-card-image [src]=\"widgetData.content.image\"\n loading=\"lazy\" class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container *ngIf=\"!widgetData.content.image\">\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"user_widget flex margin-remove\">\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.userId\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <p class=\"whitespace-normal description-text mat-body-2\">\n {{ widgetData?.content?.description }}\n </p>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>",
|
|
9504
|
-
styles: [".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{width:282px;height:158px;display:block;-o-object-fit:cover;object-fit:cover;border-top-left-radius:8px;border-top-right-radius:8px}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-
|
|
9504
|
+
styles: [".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{width:282px;height:158px;display:block;-o-object-fit:cover;object-fit:cover;border-top-left-radius:8px;border-top-right-radius:8px}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
|
|
9505
9505
|
}] }
|
|
9506
9506
|
];
|
|
9507
9507
|
/** @nocollapse */
|
|
@@ -9671,7 +9671,7 @@ CardLandscapeComponent.decorators = [
|
|
|
9671
9671
|
{ type: Component, args: [{
|
|
9672
9672
|
selector: 'sb-uic-card-landscape',
|
|
9673
9673
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <a class=\"cursor-pointer\" (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"course_widget portrait_widget flex margin-bottom-xs\">\n <div class=\"flex flex-end flex-middle course_port\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [useTranslation]=\"false\" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n <div class=\" img-block-portrait position-relative\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"portrait-subheading mat-subheading-2 title-text\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-middle\">\n <div class=\"portrait_course_logo_box margin-right-xs\">\n <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"portrait-org-name font-normal mat-caption\">By {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n </div>\n\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData.content.avgRating}}</span>\n </div>\n <!-- <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n </ng-container> -->\n </div>\n </div>\n </div>\n </mat-card>\n </a>\n</ng-container>\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n\n<ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div class=\"portrait-subheading title-text\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\" [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"portrait_widget flex margin-top-xs\">\n <div class=\"flex flex-end flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </mat-card>\n</ng-container>",
|
|
9674
|
-
styles: [".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:350px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-
|
|
9674
|
+
styles: [".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:350px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable{min-height:146px!important}.card-portrait-clickable .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable:hover{transform:scale(1.02)}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}@media only screen and (max-width:768px){.card-portrait{width:calc(100vw - 66px)}.card-wide-v2{min-height:356px}.card-wide-v2 .imageholder img{border-radius:12px 12px 0 0!important}.cbpwidth{width:calc(100vw - 100px)}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
|
|
9675
9675
|
}] }
|
|
9676
9676
|
];
|
|
9677
9677
|
/** @nocollapse */
|
|
@@ -9839,7 +9839,7 @@ class CardWideComponent {
|
|
|
9839
9839
|
CardWideComponent.decorators = [
|
|
9840
9840
|
{ type: Component, args: [{
|
|
9841
9841
|
selector: 'sb-uic-card-wide',
|
|
9842
|
-
template: "<mat-card class=\"card-wide-lib\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <div class=\"flex\">\n <div>\n <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon | pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div>\n <div class=\"pl-4 pr-4 w-full\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n\n <div class=\"flex w-full flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n <span class=\"org-text\">By {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </div>\n </div>\n </a>\n</mat-card>\n",
|
|
9842
|
+
template: "<mat-card class=\"card-wide-lib\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <div class=\"flex\">\n <div>\n <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon | pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div>\n <div class=\"pl-4 pr-4 w-full\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"mat-subheading-1 title-text break-words ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n\n <div class=\"flex w-full flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n <span class=\"org-text\">By {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </div>\n </div>\n </a>\n</mat-card>\n",
|
|
9843
9843
|
styles: [".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-wide-img{width:147px!important;height:117px!important;border-radius:12px!important}.course_widget{max-width:145px}.org-text{width:56%!important}}"]
|
|
9844
9844
|
}] }
|
|
9845
9845
|
];
|
|
@@ -9996,7 +9996,7 @@ CardMDOChannelComponent.decorators = [
|
|
|
9996
9996
|
{ type: Component, args: [{
|
|
9997
9997
|
selector: 'sb-uic-card-mdo-channel',
|
|
9998
9998
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container *ngIf=\"widgetData?.content\">\n <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container *ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.orgName\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container >\n <a i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>",
|
|
9999
|
-
styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-
|
|
9999
|
+
styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]
|
|
10000
10000
|
}] }
|
|
10001
10001
|
];
|
|
10002
10002
|
/** @nocollapse */
|
|
@@ -10146,7 +10146,7 @@ CardWideV2Component.decorators = [
|
|
|
10146
10146
|
{ type: Component, args: [{
|
|
10147
10147
|
selector: 'sb-uic-card-wide-v2',
|
|
10148
10148
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n <div class=\"imageholder \">\n <img mat-card-image class=\"margin-remove\"\n [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\">\n <div class=\"source-div\" [hidden]=\"true\">\n <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n </div>\n <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n <mat-card-content class=\"mat-text-box mb-0\">\n <div class=\"course_widget flex flex-between margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <span class=\"ws-mat-black60-text font-normal mat-caption \">\n {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"flex main_title_box\">\n <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n {{widgetData?.content?.name}}\n </a>\n </p>\n </div>\n\n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle provider\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"org-text\">By \n <!-- {{'cardcontentv2.by' | translate}} -->\n {{widgetData?.content?.organisation[0] }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon>star</mat-icon>\n <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n </ng-container>\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n</ng-container>\n <ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n </div>\n <mat-card-content class=\"mat-text-box\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end \">\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n \n <div class=\"flex main_title_box\">\n <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <!-- </p> -->\n </div>\n \n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box mr-2\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle mr-2\">\n <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n </ng-container>",
|
|
10149
|
-
styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-
|
|
10149
|
+
styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-word;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:38px;height:38px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px 12px 11px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}.mb-0{margin-bottom:0!important}@media screen and (min-width:344px) and (max-width:882px){.min-width-763{min-width:300px;overflow:hidden}}@media screen and (min-width:357px) and (max-width:667px){.min-width-763{min-width:340px;overflow:hidden}}@media screen and (min-width:360px) and (max-width:740px){.min-width-763{min-width:325px;overflow:hidden}}@media screen and (min-width:390px) and (max-width:844px){.min-width-763{min-width:358px;overflow:hidden}}@media screen and (min-width:414px) and (max-width:896px){.min-width-763{min-width:380px;overflow:hidden}}@media screen and (min-width:430px) and (max-width:932px){.min-width-763{min-width:395px;overflow:hidden}}"]
|
|
10150
10150
|
}] }
|
|
10151
10151
|
];
|
|
10152
10152
|
/** @nocollapse */
|
|
@@ -10329,7 +10329,7 @@ CardKarmaProgramsComponent.decorators = [
|
|
|
10329
10329
|
{ type: Component, args: [{
|
|
10330
10330
|
selector: 'sb-uic-card-karma-programs',
|
|
10331
10331
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n <div class=\"display-contents\">\n <ng-container *ngIf=\"widgetData?.content\">\n <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation();\">\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container *ngIf=\"widgetData?.content?.imgSource && widgetData?.content?.imgSource?.length ; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgSource[0]\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.title\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.title\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.title }}\n </div>\n </div>\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.children?.length}} Programs\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n<ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" >\n <div class=\"display-contents\">\n <ng-container >\n <a >\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container >\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex px-2\">\n <div class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n <sb-uic-skeleton-loader [width]=\"'120px'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>",
|
|
10332
|
-
styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:20px 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:139px;max-height:139px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-
|
|
10332
|
+
styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:20px 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:139px;max-height:139px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]
|
|
10333
10333
|
}] }
|
|
10334
10334
|
];
|
|
10335
10335
|
/** @nocollapse */
|
|
@@ -10497,7 +10497,7 @@ CardKarmaProgramsV2Component.decorators = [
|
|
|
10497
10497
|
{ type: Component, args: [{
|
|
10498
10498
|
selector: 'sb-uic-card-karma-programs-v2',
|
|
10499
10499
|
template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n <div class=\"display-contents\">\n <ng-container *ngIf=\"widgetData?.content\">\n <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation()\">\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-row md:flex-col h-full\">\n <div class=\"image-container\">\n <ng-container *ngIf=\"widgetData?.content?.imgSource && widgetData?.content?.imgSource?.length ; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgSource[0]\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.title\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.title\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex items-center\">\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.title }}\n </div>\n </div>\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.children?.length}} Programs\n </div>\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>",
|
|
10500
|
-
styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:233px;height:233px;max-height:233px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:156px;max-height:156px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-
|
|
10500
|
+
styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:233px;height:233px;max-height:233px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:156px;max-height:156px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}@media screen and (max-width:768px){.card-channels-container{width:100%;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:unset;height:unset;max-height:unset;margin:0;padding:8px!important}.image-container{background-color:#fff;width:155px!important;min-width:155px!important;max-width:155px!important;height:106px!important;max-height:106px!important;border-radius:12px}}"]
|
|
10501
10501
|
}] }
|
|
10502
10502
|
];
|
|
10503
10503
|
/** @nocollapse */
|
|
@@ -10725,7 +10725,7 @@ CardPortraitExtComponent.decorators = [
|
|
|
10725
10725
|
{ type: Component, args: [{
|
|
10726
10726
|
selector: 'sb-uic-card-portrait-ext',
|
|
10727
10727
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n greyOut:\n widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container *ngIf=\"widgetData?.content\">\n <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n role=\"link\" i18n-aria-label>\n <ng-container *ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container *ngIf=\"!widgetData.content.posterImage\">\n <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData?.content?.contentPartner?.link\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.contentId)\" />\n </div>\n <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2 \">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.contentId]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <!-- <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type [useTranslation]=\"false\" i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.topic\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"'External Course'\">\n \n </sb-uic-display-content-type>\n </div> -->\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.contentId\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\" [matTooltip]=\"widgetData?.content?.name\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.contentPartner?.link \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.contentId)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n <span class=\"org-text\">By {{ (widgetData?.content?.contentPartner?.contentPartnerName) ? widgetData?.content?.contentPartner?.contentPartnerName : 'Karmayogi Bharat' }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n </span>\n </ng-container>\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n </span>\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container *ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData?.content?.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n </ng-container>\n \n <ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n <div class=\"display-contents\" >\n <ng-container *ngIf=\"!isCardFlipped\">\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </div>\n </mat-card>\n </ng-container>\n \n <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>",
|
|
10728
|
-
styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:300px;height:300px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-
|
|
10728
|
+
styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:300px;height:300px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.tooltiptext{visibility:hidden;width:90px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:4px 0;position:absolute;z-index:1;top:25px;left:-32px;font-size:12px}.title-text:hover .tooltiptext{visibility:visible}"]
|
|
10729
10729
|
}] }
|
|
10730
10730
|
];
|
|
10731
10731
|
/** @nocollapse */
|
|
@@ -11399,7 +11399,7 @@ CardProgressPortraitLibComponent.decorators = [
|
|
|
11399
11399
|
{ type: Component, args: [{
|
|
11400
11400
|
selector: 'sb-uic-card-progress-portrait-lib',
|
|
11401
11401
|
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"card-portrait card-progress-portrait-lib cursor-pointer\" [ngClass]=\"widgetData?.cardCustomeClass ? widgetData?.cardCustomeClass : ''\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" >\n <div class=\"course_widget portrait_widget flex margin-bottom-xs\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\n <div class=\"flex flex-end flex-middle course_port\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div class=\"flex\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\n <div class=\"margin-right-s\">\n <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n <div class=\" img-block-portrait position-relative\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon | pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"portrait-subheading mat-subheading-2 title-text\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-middle\">\n <div class=\"portrait_course_logo_box margin-right-xs\">\n <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' | translate}} {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n\n </div>\n </div>\n <ng-container *ngIf=\"widgetData?.content?.completionPercentage < 100\">\n <div class=\"flex flex-align-end progress-wrapper flex-between\" >\n <div class=\"progress-block\" >\n <div class=\"completed-time\">\n <mat-icon class=\"mat-icon schedule margin-right-xs\">schedule</mat-icon>\n <span>{{widgetData?.content?.completionPercentage}}%</span>\n </div>\n <div>\n <ng-container *ngIf=\"widgetData?.content?.completionStatus < 2\">\n <sb-uic-content-progress class=\"progress-bar-new\" [customClassName]=\"'course-progress-bar'\" *ngIf=\"widgetData?.content?.identifier\"\n [contentId]=\"widgetData?.content?.identifier\" [progress]=\"widgetData?.content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </sb-uic-content-progress>\n </ng-container>\n </div>\n </div>\n <div class=\"progress-btn\">\n <button class=\"resume-btn flex flex-middle flex-between\" [routerLink]=\"['/app/toc/',widgetData?.content?.identifier,'overview']\"\n [queryParams]=\"{primaryCategory: widgetData?.content?.primaryCategory}\" [state]=\"widgetData?.stateData\" \n [matTooltipPosition]=\"'below'\"\n [matTooltipDisabled]=\"(!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')).length < 11\"\n matTooltip=\"{{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}\">\n <span class=\"textwrap margin-right-xs\">\n {{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}</span>\n <img class=\"stats-icon\" height=\"20\" width=\"20\" src=\"/assets/icons/home/play.svg\">\n </button>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"widgetData?.content?.completionPercentage === 100\">\n <div class=\"flex flex-align-end progress-wrapper flex-end mt-1\">\n <div class=\"progress-btn\">\n <button class=\"resume-btn flex flex-middle flex-between view-btn\" [ngClass]=\"{'disable-btn': downloadCertificateLoading || widgetData?.content?.issuedCertificates?.length === 0}\" (click)=\"!downloadCertificateLoading && downloadCertificate(widgetData?.content);$event.stopPropagation()\" \n [matTooltipPosition]=\"'below'\"\n [matTooltipDisabled]=\"(translateLabels('viewCertificate', 'cardcontentv2')).length < 11\"\n matTooltip=\"{{'cardcontentv2.viewCertificate' | translate }}\">\n <span class=\"margin-right-xs textwrap\">{{'cardcontentv2.viewCertificate' | translate }}</span>\n <img class=\"stats-icon\" *ngIf=\"!downloadCertificateLoading\" height=\"20\" width=\"20\" src=\"/assets/icons/home/eye-white.svg\">\n <div class=\"center flex flex-middle\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'red'\" class=\"white-spinner\" [diameter]=\"16\"></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n </mat-card>\n</ng-container>\n\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"card-portrait\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"margin-bottom-xs\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'26px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'98px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div class=\"portrait-subheading title-text\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\" margin-right-xs\">\n <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"\"><sb-uic-skeleton-loader [width]=\"'133px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"portrait_widget flex margin-top-xs\">\n <div class=\"flex flex-end flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-align-end progress-wrapper flex-between\">\n <div class=\"progress-block\">\n <div class=\"completed-time\">\n <sb-uic-skeleton-loader [width]=\"'211px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-xs md:w-211'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"progress-btn\">\n <sb-uic-skeleton-loader [width]=\"'117px'\" [height]=\"'32px'\" [bindingClass]=\"'flex rounded margin-top-xs'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card>\n</ng-container>",
|
|
11402
|
-
styles: [".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:318px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-
|
|
11402
|
+
styles: [".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:318px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
|
|
11403
11403
|
}] }
|
|
11404
11404
|
];
|
|
11405
11405
|
/** @nocollapse */
|
|
@@ -11720,7 +11720,7 @@ CardMdoChannelV1Component.decorators = [
|
|
|
11720
11720
|
{ type: Component, args: [{
|
|
11721
11721
|
selector: 'sb-uic-card-mdo-channel-v1',
|
|
11722
11722
|
template: "\n<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container *ngIf=\"widgetData?.content\">\n <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container *ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.orgName\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n\n<ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container >\n <a i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <sb-uic-skeleton-loader class=\"w-full\" [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex title-container px-2\">\n <div class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded mb-2'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>",
|
|
11723
|
-
styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-
|
|
11723
|
+
styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}"]
|
|
11724
11724
|
}] }
|
|
11725
11725
|
];
|
|
11726
11726
|
/** @nocollapse */
|
|
@@ -15524,8 +15524,8 @@ class ProvidersV2Component {
|
|
|
15524
15524
|
ProvidersV2Component.decorators = [
|
|
15525
15525
|
{ type: Component, args: [{
|
|
15526
15526
|
selector: 'sb-uic-providers-v2',
|
|
15527
|
-
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\" [type]=\"'atictitop'\"></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 margin-bottom-xl\">\n <div class=\"col-span-12 md:col-span-4 infra-sec-desc margin-bottom-xl\">\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 margin-bottom-xl\">\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 class=\"infobanner\" [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",
|
|
15528
|
-
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-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:-12em;left:50%;transform:translateX(-50%)}.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;z-index:-1}.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:767px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.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;width:94%}.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%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(/assets/icons/microsite/side_banner.png) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:768px) and (max-width:
|
|
15527
|
+
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\" [type]=\"'atictitop'\"></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\">\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 margin-bottom-xl\">\n <div class=\"col-span-12 md:col-span-4 infra-sec-desc margin-bottom-xl\">\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 margin-bottom-xl\">\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 class=\"infobanner\" [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",
|
|
15528
|
+
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-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:-12em;left:50%;transform:translateX(-50%)}.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;z-index:-1}.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:767px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.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;width:94%}.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%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(/assets/icons/microsite/side_banner.png) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:768px) and (max-width:1023px){.custombgsection{height:16em!important;width:22%;padding:.75rem 1rem!important}}@media screen and (max-width:768px){::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}@media screen and (min-width:1023px){.custombgsection{width:38%;height:15em}}@media screen and (min-width:1014px){.info-slider{width:1014px!important}}@media screen and (min-width:1280px){.custombgsection{width:42%;height:21.3em}.infobanner.banner-container{width:1014px!important}}"]
|
|
15529
15529
|
}] }
|
|
15530
15530
|
];
|
|
15531
15531
|
/** @nocollapse */
|