@sunbird-cb/consumption 0.0.71 → 0.0.72
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 +26 -4
- 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/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component.js +21 -5
- package/esm2015/lib/_common/sliders/sliders.component.js +1 -1
- package/esm5/lib/_common/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component.js +27 -5
- package/esm5/lib/_common/sliders/sliders.component.js +1 -1
- package/fesm2015/sunbird-cb-consumption.js +20 -4
- package/fesm2015/sunbird-cb-consumption.js.map +1 -1
- package/fesm5/sunbird-cb-consumption.js +26 -4
- package/fesm5/sunbird-cb-consumption.js.map +1 -1
- package/lib/_common/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component.d.ts +3 -0
- package/package.json +1 -1
- package/sunbird-cb-consumption.metadata.json +1 -1
|
@@ -7050,7 +7050,7 @@
|
|
|
7050
7050
|
{ type: core.Component, args: [{
|
|
7051
7051
|
selector: 'sb-uic-sliders',
|
|
7052
7052
|
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",
|
|
7053
|
-
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}}"]
|
|
7053
|
+
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:320px) and (max-width:769px){.navigation.middle-inline .prev{left:6%!important}}@media screen and (min-width:769px){.navigation.middle-inline .prev{left:23%!important}.navigation.middle-inline .next{right:6%!important}}@media screen and (min-width:820px) and (max-width:1023px){.navigation.middle-inline .prev{left:6%!important}}"]
|
|
7054
7054
|
}] }
|
|
7055
7055
|
];
|
|
7056
7056
|
/** @nocollapse */
|
|
@@ -17261,6 +17261,24 @@
|
|
|
17261
17261
|
}
|
|
17262
17262
|
}));
|
|
17263
17263
|
}
|
|
17264
|
+
/**
|
|
17265
|
+
* @return {?}
|
|
17266
|
+
*/
|
|
17267
|
+
MdoChannelV2Component.prototype.onResize = /**
|
|
17268
|
+
* @return {?}
|
|
17269
|
+
*/
|
|
17270
|
+
function () {
|
|
17271
|
+
this.setWidth();
|
|
17272
|
+
};
|
|
17273
|
+
/**
|
|
17274
|
+
* @return {?}
|
|
17275
|
+
*/
|
|
17276
|
+
MdoChannelV2Component.prototype.setWidth = /**
|
|
17277
|
+
* @return {?}
|
|
17278
|
+
*/
|
|
17279
|
+
function () {
|
|
17280
|
+
this.stripWidth = (window.innerWidth - 1200 + 135) / 2 + "px";
|
|
17281
|
+
};
|
|
17264
17282
|
/**
|
|
17265
17283
|
* @return {?}
|
|
17266
17284
|
*/
|
|
@@ -17280,6 +17298,7 @@
|
|
|
17280
17298
|
title: _this.channnelName, icon: '', url: 'none', disableTranslate: true,
|
|
17281
17299
|
});
|
|
17282
17300
|
}));
|
|
17301
|
+
this.setWidth();
|
|
17283
17302
|
};
|
|
17284
17303
|
/**
|
|
17285
17304
|
* @param {?} tabEvent
|
|
@@ -17431,8 +17450,8 @@
|
|
|
17431
17450
|
MdoChannelV2Component.decorators = [
|
|
17432
17451
|
{ type: core.Component, args: [{
|
|
17433
17452
|
selector: 'sb-uic-mdo-channel-v2',
|
|
17434
|
-
template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container *ngIf=\"sectionList?.length\">\n <ng-container *ngFor=\"let section of sectionList\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n\n<ng-template #topSection let-data=\"data\">\n <!-- top section desktop layout -->\n <div class=\"hidden md:block\">\n <div class=\"web-banner-background\">\n <div class=\"flex sticky-logo-square\">\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n <div class=\"col-span-12 md:col-span-6\">\n <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n <div class=\"\">\n <div class=\"flex items-center logo-square \">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n <h1 class=\" txt-ellipsis-2 break-words pt-10\"\n [style.color]=\"data.titleColor\">{{data.title || channnelName}}</h1>\n <p class=\"mat-body-1\" [style.color]=\"data.descriptionColor\">\n {{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-6\">\n <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n <!-- top section m-site layout -->\n <div class=\"block md:hidden\">\n <div class=\"col-span-12\">\n <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n <div class=\"container px-4 flex flex-col mob-container\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-square top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || channnelName}}</h1>\n <p class=\"mat-body-2\">\n {{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n </div>\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"container metrics-section\" >\n <div class=\"hidden md:block\">\n <div class=\"metrics\"\n [ngStyle]=\"{'background': data?.metrics?.background}\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleFlexeRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n </div>\n <div class=\"block md:hidden pt-14 px-4\">\n <div class=\"mob-metrics mob-metrics-sec\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n \n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mainContent let-data=\"data\">\n <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n <div class=\"container\">\n <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n <sb-uic-cbp-plan\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.cbpPlanSection?.data\">\n </sb-uic-cbp-plan>\n </div>\n <div class=\"block md:hidden col-span-12 mt-6\">\n <sb-uic-announcements\n [layoutType]=\"'mobile'\"\n (openDialog)=\"triggerOpenDialog($event)\"\n [objectData]=\"data?.announcementSection?.data\"\n [fetchDataFromApi]=\"false\"\n [channelId]=\"orgId\">\n </sb-uic-announcements>\n <div class=\"announcements-container\" *ngIf=\"showModal\">\n <div class=\"cursor-pointer close-share-dialog\">\n <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n </div>\n <div class=\"share-modal px-3 pt-8\">\n <sb-uic-announcements\n [layoutType]=\"'web'\"\n (openDialog)=\"triggerOpenDialog($event)\"\n [objectData]=\"data?.announcementSection?.data\"\n [mobileHeight]=\"true\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\">\n </sb-uic-announcements>\n </div>\n </div>\n </div>\n <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n <!-- Tabs Section -->\n <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n [selectedIndex]=\"selectedIndex\" (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n <mat-tab label=\"Content\" >\n <ng-template mat-tab-label i18n>\n Learn\n </ng-template>\n <ng-container *ngIf=\"data.tabSection.contentTab.length === contentTabEmptyResponseCount\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\" >\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n </ng-container>\n <div class=\"padding-top-l \">\n <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n </div>\n </mat-tab>\n <mat-tab label=\"Core Areas\">\n <ng-template mat-tab-label i18n>\n Competency\n </ng-template>\n <div>\n <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </div>\n <div class=\"col-span-12 md:col-span-4\">\n <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n *ngIf=\"data?.cbpPlanSection?.data\">\n <div class=\"pt-4\">\n <sb-uic-cbp-plan\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.cbpPlanSection?.data\">\n </sb-uic-cbp-plan>\n </div> \n </div>\n <div class=\"hidden md:block\" \n *ngIf=\"data?.announcementSection?.data\">\n <div class=\"pt-4\">\n <sb-uic-announcements\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.announcementSection?.data\">\n </sb-uic-announcements>\n </div> \n </div>\n </div> \n </div>\n </div>\n </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n <div class=\"w-full\">\n Announcement Section -->\n <!-- <h1>Announcement</h1>\n </div>\n </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay let-data=\"data\">\n <ng-container *ngIf=\"data?.length\">\n <ng-container *ngFor=\"let section of data\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock;else noData\">\n <div class=\"w-full container-balanced\">\n <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">This section shows the list of top competencies users in this MDO are learning, based on the courses they've completed and enrolled in.</p>\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook-mdo\n [dynamicColor]=\"'#999999'\"\n [dynamicAlignPills]=\"'start'\"\n [cardDisplayCount]=\"2\"\n (emptyResponse)=\"hideCompetency($event)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"orgId\"\n >\n </sb-uic-competency-passbook-mdo>\n </div>\n </div>\n <!-- <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\"> -->\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n <ng-container *ngIf=\"!contentStrip?.hideSection\">\n <div class=\"flex mb-8\">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event, contentStrip)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n [providerId]=\"orgId\"\n [widgetData]=\"contentStrip\"\n [channnelName]=\"channnelName\"\n >\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #noData>\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\" >\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n <div class=\"flex items-center justify-center\">\n <div class=\"container top-learners margin-bottom-l margin-top-l\">\n <sb-uic-top-learners\n [objectData]=\"data\"\n [channnelName]=\"channnelName\"\n [channelId]=\"orgId\">\n </sb-uic-top-learners>\n </div>\n </div>\n</ng-template>",
|
|
17435
|
-
styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sticky-logo-square{position:absolute;top:215px;justify-content:end;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px}.logo-square{width:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:rgba(19,19,19,.6392156863);width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width:768px){::ng-deep.recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep.featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}
|
|
17453
|
+
template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container *ngIf=\"sectionList?.length\">\n <ng-container *ngFor=\"let section of sectionList\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n\n<ng-template #topSection let-data=\"data\">\n <!-- top section desktop layout -->\n <div class=\"hidden md:block\">\n <div class=\"web-banner-background\">\n <div class=\"flex items-center justify-center\">\n <div class=\"container\">\n <div class=\"flex sticky-logo-square\" [style.width]=\"stripWidth\">\n </div>\n <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n <div class=\"col-span-12 md:col-span-6\">\n <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n <div class=\"\">\n <div class=\"flex items-center logo-square \">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n <h1 class=\" txt-ellipsis-2 break-words pt-10\"\n [style.color]=\"data.titleColor\">{{data.title || channnelName}}</h1>\n <p class=\"mat-body-1\" [style.color]=\"data.descriptionColor\">\n {{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-6\">\n <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n <!-- top section m-site layout -->\n <div class=\"block md:hidden\">\n <div class=\"col-span-12\">\n <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n <div class=\"container px-4 flex flex-col mob-container\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-square top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || channnelName}}</h1>\n <p class=\"mat-body-2\">\n {{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n </div>\n </div>\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"container metrics-section\" >\n <div class=\"hidden md:block\">\n <div class=\"metrics\"\n [ngStyle]=\"{'background': data?.metrics?.background}\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleFlexeRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n </div>\n <div class=\"block md:hidden pt-14 px-4\">\n <div class=\"mob-metrics mob-metrics-sec\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n \n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mainContent let-data=\"data\">\n <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n <div class=\"container\">\n <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n <sb-uic-cbp-plan\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.cbpPlanSection?.data\">\n </sb-uic-cbp-plan>\n </div>\n <div class=\"block md:hidden col-span-12 mt-6\">\n <sb-uic-announcements\n [layoutType]=\"'mobile'\"\n (openDialog)=\"triggerOpenDialog($event)\"\n [objectData]=\"data?.announcementSection?.data\"\n [fetchDataFromApi]=\"false\"\n [channelId]=\"orgId\">\n </sb-uic-announcements>\n <div class=\"announcements-container\" *ngIf=\"showModal\">\n <div class=\"cursor-pointer close-share-dialog\">\n <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n </div>\n <div class=\"share-modal px-3 pt-8\">\n <sb-uic-announcements\n [layoutType]=\"'web'\"\n (openDialog)=\"triggerOpenDialog($event)\"\n [objectData]=\"data?.announcementSection?.data\"\n [mobileHeight]=\"true\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\">\n </sb-uic-announcements>\n </div>\n </div>\n </div>\n <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n <!-- Tabs Section -->\n <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n [selectedIndex]=\"selectedIndex\" (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n <mat-tab label=\"Content\" >\n <ng-template mat-tab-label i18n>\n Learn\n </ng-template>\n <ng-container *ngIf=\"data.tabSection.contentTab.length === contentTabEmptyResponseCount\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\" >\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n </ng-container>\n <div class=\"padding-top-l \">\n <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n </div>\n </mat-tab>\n <mat-tab label=\"Core Areas\">\n <ng-template mat-tab-label i18n>\n Competency\n </ng-template>\n <div>\n <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </div>\n <div class=\"col-span-12 md:col-span-4\">\n <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n *ngIf=\"data?.cbpPlanSection?.data\">\n <div class=\"pt-4\">\n <sb-uic-cbp-plan\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.cbpPlanSection?.data\">\n </sb-uic-cbp-plan>\n </div> \n </div>\n <div class=\"hidden md:block\" \n *ngIf=\"data?.announcementSection?.data\">\n <div class=\"pt-4\">\n <sb-uic-announcements\n [layoutType]=\"'web'\"\n [mobileHeight]=\"false\"\n [fetchDataFromApi]=\"true\"\n [channelId]=\"orgId\"\n [objectData]=\"data?.announcementSection?.data\">\n </sb-uic-announcements>\n </div> \n </div>\n </div> \n </div>\n </div>\n </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n <div class=\"w-full\">\n Announcement Section -->\n <!-- <h1>Announcement</h1>\n </div>\n </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay let-data=\"data\">\n <ng-container *ngIf=\"data?.length\">\n <ng-container *ngFor=\"let section of data\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock;else noData\">\n <div class=\"w-full container-balanced\">\n <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">This section shows the list of top competencies users in this MDO are learning, based on the courses they've completed and enrolled in.</p>\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook-mdo\n [dynamicColor]=\"'#999999'\"\n [dynamicAlignPills]=\"'start'\"\n [cardDisplayCount]=\"2\"\n (emptyResponse)=\"hideCompetency($event)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"orgId\"\n >\n </sb-uic-competency-passbook-mdo>\n </div>\n </div>\n <!-- <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\"> -->\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n <ng-container *ngIf=\"!contentStrip?.hideSection\">\n <div class=\"flex mb-8\">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event, contentStrip)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n [providerId]=\"orgId\"\n [widgetData]=\"contentStrip\"\n [channnelName]=\"channnelName\"\n >\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #noData>\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\" >\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n <div class=\"flex items-center justify-center\">\n <div class=\"container top-learners margin-bottom-l margin-top-l\">\n <sb-uic-top-learners\n [objectData]=\"data\"\n [channnelName]=\"channnelName\"\n [channelId]=\"orgId\">\n </sb-uic-top-learners>\n </div>\n </div>\n</ng-template>",
|
|
17454
|
+
styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sticky-logo-square{position:absolute;top:215px;justify-content:end;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:rgba(19,19,19,.6392156863);width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width:768px){::ng-deep.recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep.featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]
|
|
17436
17455
|
}] }
|
|
17437
17456
|
];
|
|
17438
17457
|
/** @nocollapse */
|
|
@@ -17444,7 +17463,8 @@
|
|
|
17444
17463
|
{ type: utilsV2.MultilingualTranslationsService }
|
|
17445
17464
|
]; };
|
|
17446
17465
|
MdoChannelV2Component.propDecorators = {
|
|
17447
|
-
sectionList: [{ type: core.Input }]
|
|
17466
|
+
sectionList: [{ type: core.Input }],
|
|
17467
|
+
onResize: [{ type: core.HostListener, args: ['window:resize',] }]
|
|
17448
17468
|
};
|
|
17449
17469
|
return MdoChannelV2Component;
|
|
17450
17470
|
}());
|
|
@@ -17469,6 +17489,8 @@
|
|
|
17469
17489
|
MdoChannelV2Component.prototype.descriptionMaxLength;
|
|
17470
17490
|
/** @type {?} */
|
|
17471
17491
|
MdoChannelV2Component.prototype.isTelemetryRaised;
|
|
17492
|
+
/** @type {?} */
|
|
17493
|
+
MdoChannelV2Component.prototype.stripWidth;
|
|
17472
17494
|
/**
|
|
17473
17495
|
* @type {?}
|
|
17474
17496
|
* @private
|