@sunbird-cb/consumption 0.0.53 → 0.0.54

package/bundles/sunbird-cb-consumption.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@sunbird-cb/utils-v2'), require('@angular/material'), require('@sunbird-cb/resolver-v2'), require('@angular/common/http'), require('lodash'), require('moment'), require('@ngx-translate/core'), require('dayjs'), require('@ngx-translate/http-loader'), require('@angular/cdk/layout'), require('@angular/platform-browser'), require('hammerjs'), require('@angular/forms'), require('jspdf')) :
     typeof define === 'function' && define.amd ? define('@sunbird-cb/consumption', ['exports', '@angular/core', '@angular/common', '@angular/router', 'rxjs', 'rxjs/operators', '@sunbird-cb/utils-v2', '@angular/material', '@sunbird-cb/resolver-v2', '@angular/common/http', 'lodash', 'moment', '@ngx-translate/core', 'dayjs', '@ngx-translate/http-loader', '@angular/cdk/layout', '@angular/platform-browser', 'hammerjs', '@angular/forms', 'jspdf'], factory) :
     (global = global || self, factory((global['sunbird-cb'] = global['sunbird-cb'] || {}, global['sunbird-cb'].consumption = {}), global.ng.core, global.ng.common, global.ng.router, global.rxjs, global.rxjs.operators, global['@sunbird-cb/utils-v2'], global.ng.material, global['@sunbird-cb/resolver-v2'], global.ng.common.http, global.lodash, global.moment, global.core$1, global.dayjs_, global.httpLoader, global.ng.cdk.layout, global.ng.platformBrowser, global.hammerjs, global.ng.forms, global.jspdf));
-}(this, (function (exports, core, common, router, rxjs, operators, utilsV2, material, resolverV2, http, lodash, moment$1, core$1, dayjs_, httpLoader, layout, platformBrowser, Hammer, forms, jspdf) { 'use strict';
+}(this, (function (exports, core, common, router, rxjs, operators, utilsV2, material, resolverV2, http, lodash, moment$2, core$1, dayjs_, httpLoader, layout, platformBrowser, Hammer, forms, jspdf) { 'use strict';
 
     Hammer = Hammer && Hammer.hasOwnProperty('default') ? Hammer['default'] : Hammer;
 
@@ -1683,7 +1683,7 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /** @type {?} */
-    var moment = moment$1;
+    var moment = moment$2;
     // tslint:enable
     // TODO: move this in some common place
     /** @type {?} */
@@ -3868,6 +3868,8 @@
         /** @type {?} */
         IStripUnitContentData.prototype.stripConfig;
         /** @type {?|undefined} */
+        IStripUnitContentData.prototype.tabsType;
+        /** @type {?|undefined} */
         IStripUnitContentData.prototype.tabs;
         /** @type {?|undefined} */
         IStripUnitContentData.prototype.stripName;
@@ -5165,6 +5167,7 @@
                         disableTranslate: strip.disableTranslate,
                         sliderConfig: strip.sliderConfig,
                         tabs: tabsResults ? tabsResults : strip.tabs,
+                        tabsType: strip.tabsType ? strip.tabsType : '',
                         stripName: strip.name,
                         mode: strip.mode,
                         stripConfig: strip.stripConfig,
@@ -5322,6 +5325,12 @@
                     else if (currentTabFromMap.request.trendingSearch) {
                         this.getTabDataByNewReqTrending(currentStrip, tabEvent.index, currentTabFromMap, true);
                     }
+                    else if (currentTabFromMap.request.topContent) {
+                        this.getTabDataByNewReqTopContent(currentStrip, tabEvent.index, currentTabFromMap, true);
+                    }
+                    else if (currentTabFromMap.request.playlistRead) {
+                        this.getTabDataByNewReqPlaylistReadContent(currentStrip, tabEvent.index, currentTabFromMap, true);
+                    }
                     if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
                         stripMap.tabs[tabEvent.index].tabLoading = false;
                     }
@@ -5767,7 +5776,7 @@
         function (strip, calculateParentStatus) {
             if (calculateParentStatus === void 0) { calculateParentStatus = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var originalFilters, response, error_5;
+                var originalFilters, firstTab, allTabs, currentTabFromMap, response, error_5;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -5780,7 +5789,17 @@
                                 originalFilters = strip.request.topContent.request.filters;
                                 strip.request.topContent.request.filters = this.postMethodFilters(strip.request.topContent.request.filters);
                             }
-                            _a.label = 1;
+                            if (!(strip.tabs && strip.tabs.length)) return [3 /*break*/, 1];
+                            // TODO: Have to extract requestRequired to outer level of tabs config
+                            firstTab = strip.tabs[0];
+                            if (firstTab.requestRequired) {
+                                if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                    allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                    currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
+                                    this.getTabDataByNewReqTopContent(strip, 0, currentTabFromMap, calculateParentStatus);
+                                }
+                            }
+                            return [3 /*break*/, 4];
                         case 1:
                             _a.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus)];
@@ -5867,6 +5886,64 @@
                 });
             });
         };
+        /**
+         * @param {?} strip
+         * @param {?} tabIndex
+         * @param {?} currentTab
+         * @param {?} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.getTabDataByNewReqTopContent = /**
+         * @param {?} strip
+         * @param {?} tabIndex
+         * @param {?} currentTab
+         * @param {?} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, tabIndex, currentTab, calculateParentStatus) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, widgets, tabResults, allTabs, error_7;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (currentTab.request &&
+                                currentTab.request.topContent &&
+                                currentTab.request.topContent.request &&
+                                currentTab.request.topContent.request.filters) {
+                                currentTab.request.topContent.request.filters = this.postMethodFilters(currentTab.request.topContent.request.filters);
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            // const response = await this.searchV6Request(strip, currentTab.request, calculateParentStatus);
+                            return [4 /*yield*/, this.postRequestMethod(strip, currentTab.request.topContent, currentTab.request.apiUrl, calculateParentStatus)];
+                        case 2:
+                            response = _a.sent();
+                            if (response.results && response.results.result) {
+                                widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                                tabResults = [];
+                                if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                    allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                    if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                        allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { widgets: widgets, fetchTabStatus: 'done' });
+                                        tabResults = allTabs;
+                                    }
+                                }
+                                this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
+                                );
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_7 = _a.sent();
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         /**
          * @param {?} stripData
          * @return {?}
@@ -6040,7 +6117,7 @@
         function (filters) {
             if (filters.organisation &&
                 filters.organisation.indexOf('<orgID>') >= 0) {
-                filters.organisation = this.providerId;
+                filters.organisation = filters.organisation.replace('<orgID>', this.providerId);
             }
             return filters;
         };
@@ -6056,7 +6133,7 @@
          */
         function (apiUrl, id) {
             /** @type {?} */
-            var formedUrl = '';
+            var formedUrl = apiUrl;
             if (apiUrl.indexOf('<bookmarkId>') >= 0) {
                 formedUrl = apiUrl.replace('<bookmarkId>', this.environment.mdoChannelsBookmarkId);
             }
@@ -6102,7 +6179,7 @@
         function (strip, calculateParentStatus) {
             if (calculateParentStatus === void 0) { calculateParentStatus = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var originalFilters, response, content, error_7;
+                var originalFilters, response, content, error_8;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6129,7 +6206,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_7 = _a.sent();
+                            error_8 = _a.sent();
                             this.emptyResponse.emit(true);
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
@@ -6180,7 +6257,7 @@
         function (strip, calculateParentStatus) {
             if (calculateParentStatus === void 0) { calculateParentStatus = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var originalFilters, response, finalPlaylistData_1, programData, error_8;
+                var originalFilters, response, finalPlaylistData_1, programData, error_9;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6232,7 +6309,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_8 = _a.sent();
+                            error_9 = _a.sent();
                             this.emptyResponse.emit(true);
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
@@ -6253,7 +6330,7 @@
         function (strip, calculateParentStatus) {
             if (calculateParentStatus === void 0) { calculateParentStatus = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var originalFilters, response, content, featuredProviders, error_9;
+                var originalFilters, firstTab, allTabs, currentTabFromMap, response, content, featuredProviders, error_10;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6264,7 +6341,17 @@
                                 strip.request.playlistRead.type) {
                                 strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.playlistRead.type);
                             }
-                            _a.label = 1;
+                            if (!(strip.tabs && strip.tabs.length)) return [3 /*break*/, 1];
+                            // TODO: Have to extract requestRequired to outer level of tabs config
+                            firstTab = strip.tabs[0];
+                            if (firstTab.requestRequired) {
+                                if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                    allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                    currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
+                                    this.getTabDataByNewReqPlaylistReadContent(strip, 0, currentTabFromMap, calculateParentStatus);
+                                }
+                            }
+                            return [3 /*break*/, 4];
                         case 1:
                             _a.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, this.getRequestMethod(strip, strip.request.playlistRead, strip.request.apiUrl, calculateParentStatus)];
@@ -6286,7 +6373,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_9 = _a.sent();
+                            error_10 = _a.sent();
                             this.emptyResponse.emit(true);
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
@@ -6294,6 +6381,107 @@
                 });
             });
         };
+        /**
+         * @param {?} strip
+         * @param {?} tabIndex
+         * @param {?} currentTab
+         * @param {?} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.getTabDataByNewReqPlaylistReadContent = /**
+         * @param {?} strip
+         * @param {?} tabIndex
+         * @param {?} currentTab
+         * @param {?} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, tabIndex, currentTab, calculateParentStatus) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, widgets, tabResults, allTabs, tabResults, allTabs, error_11, tabResults, allTabs;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (currentTab.request &&
+                                strip.request.playlistRead &&
+                                strip.request.playlistRead.type) {
+                                currentTab.request.apiUrl = this.getFullUrl(currentTab.request.apiUrl, currentTab.request.playlistRead.type);
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.getRequestMethod(strip, currentTab.request.playlistRead, currentTab.request.apiUrl, calculateParentStatus)];
+                        case 2:
+                            response = _a.sent();
+                            // if (response && response.results.result.content) {  
+                            //   let content  = response.results.result.content
+                            //   if(strip.key === 'providers'){
+                            //     let featuredProviders : any = JSON.parse(content.featuredProviders|| '[]')
+                            //     this.processStrip(
+                            //       strip,
+                            //       this.transformAllContentsToWidgets(featuredProviders, strip),
+                            //       'done',
+                            //       calculateParentStatus,
+                            //       response,
+                            //     );
+                            //   } else {
+                            //     this.processStrip(
+                            //       strip,
+                            //       this.transformAllContentsToWidgets(content, strip),
+                            //       'done',
+                            //       calculateParentStatus,
+                            //       response,
+                            //     );
+                            //   }
+                            // } else {
+                            //   this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            //   this.emptyResponse.emit(true)
+                            // }
+                            if (response.results && response.results.result) {
+                                widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                                tabResults = [];
+                                if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                    allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                    if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                        allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { widgets: widgets, fetchTabStatus: 'done' });
+                                        tabResults = allTabs;
+                                    }
+                                }
+                                this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
+                                );
+                            }
+                            else {
+                                tabResults = [];
+                                if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                    allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                    if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                        allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
+                                        tabResults = allTabs;
+                                    }
+                                }
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_11 = _a.sent();
+                            console.error('Error:', error_11);
+                            tabResults = [];
+                            if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs && this.stripsResultDataMap[strip.key].tabs.length) {
+                                allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                    allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
+                                    tabResults = allTabs;
+                                }
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            }
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         /**
          * @param {?} strip
          * @param {?=} calculateParentStatus
@@ -6307,7 +6495,7 @@
         function (strip, calculateParentStatus) {
             if (calculateParentStatus === void 0) { calculateParentStatus = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var originalFilters, response, extContentData, error_10;
+                var originalFilters, response, extContentData, error_12;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6348,7 +6536,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_10 = _a.sent();
+                            error_12 = _a.sent();
                             this.emptyResponse.emit(true);
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
@@ -6359,8 +6547,8 @@
         ContentStripWithTabsLibComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-content-strip-with-tabs',
-                        template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                    (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n                    <div>\n                      <!-- <ng-container [ngTemplateOutlet]=\"loader\" *ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n                      </ng-container> -->\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                              <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                      <div *ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n                      (!tab?.widgets || !tab?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                      <ng-container *ngIf=\"(tab?.fetchTabStatus === 'done' || tab?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.tabLoading\">\n\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n                            *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.widgets| slice:0:(tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n              <ng-container *ngIf=\"!stripsResultDataMap[key].tabs || !stripsResultDataMap[key].tabs.length\">\n                <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n                      <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                              [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                        <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                          <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                        </ng-container>\n                      </sb-uic-horizontal-scroller-v2>\n                </div>\n                <div class=\"\">\n                    <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                    *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\" [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                      <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.widgets| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                      <!-- <ng-container *ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n                      <!-- <ng-container *ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n                        [sbUiResolverWidget]=\"widget\"></ng-container> -->\n                        <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                      <!-- </ng-container> -->\n                      </ng-container>\n                  </sb-uic-horizontal-scroller-v2>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
-                        styles: [".view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more .icon{font-size:24px;width:24px;height:24px;border:1px solid;border-radius:50%;padding:8px;margin-bottom:8px}.margin-bottom-custom{margin-bottom:60px}.view-more:hover{background-color:#dcdfe5}::ng-deep.strips-tabgroup .mat-tab-header{border-bottom:2px solid rgba(0,0,0,.12)}::ng-deep.strips-tabgroup .mat-tab-body{padding:20px 0!important;box-sizing:border-box;overflow-y:initial!important}::ng-deep.strips-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep.strips-tabgroup .mat-tab-label{border-bottom:0 solid rgba(0,0,0,.1);margin-right:0;opacity:1}::ng-deep.strips-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:inherit;font:400 14px/20px Lato}::ng-deep.strips-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}"]
+                        template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 min-height-40 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                    (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group  animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup  \" dynamicHeight\n                [ngClass]=\"stripsResultDataMap[key]?.tabsType ? stripsResultDataMap[key]?.tabsType : ''\"\n                  (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n                    <div>\n                      <!-- <ng-container [ngTemplateOutlet]=\"loader\" *ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n                      </ng-container> -->\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                              <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                      <div *ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n                      (!tab?.widgets || !tab?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                      <ng-container *ngIf=\"(tab?.fetchTabStatus === 'done' || tab?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.tabLoading\">\n\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n                            *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.widgets| slice:0:(tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n              <ng-container *ngIf=\"!stripsResultDataMap[key].tabs || !stripsResultDataMap[key].tabs.length\">\n                <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n                      <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                              [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                        <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                          <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                        </ng-container>\n                      </sb-uic-horizontal-scroller-v2>\n                </div>\n                <div class=\"\">\n                    <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                    *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\" [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                      <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.widgets| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                      <!-- <ng-container *ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n                      <!-- <ng-container *ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n                        [sbUiResolverWidget]=\"widget\"></ng-container> -->\n                        <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                      <!-- </ng-container> -->\n                      </ng-container>\n                  </sb-uic-horizontal-scroller-v2>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
+                        styles: [".view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more .icon{font-size:24px;width:24px;height:24px;border:1px solid;border-radius:50%;padding:8px;margin-bottom:8px}.margin-bottom-custom{margin-bottom:60px}.view-more:hover{background-color:#dcdfe5}::ng-deep.strips-tabgroup .mat-tab-header{border-bottom:2px solid rgba(0,0,0,.12)}::ng-deep.strips-tabgroup .mat-tab-body{padding:20px 0!important;box-sizing:border-box;overflow-y:initial!important}::ng-deep.strips-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep.strips-tabgroup .mat-tab-label{border-bottom:0 solid rgba(0,0,0,.1);margin-right:0;opacity:1}::ng-deep.strips-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:inherit;font:400 14px/20px Lato}::ng-deep.strips-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}::ng-deep .pills-tab .mat-tab-header{border-bottom:unset!important}::ng-deep .pills-tab .mat-tab-label{border:1px solid rgba(0,0,0,.2392156863)!important;padding:2px 8px;margin-right:8px!important;min-width:unset!important;border-radius:12px;height:unset!important}::ng-deep .pills-tab .mat-ink-bar{background-color:transparent!important;visibility:hidden!important}::ng-deep .pills-tab .mat-tab-label-active{color:#fff!important;background-color:#1b4ca1!important}::ng-deep .pills-tab .mat-tab-body{padding:0!important}.min-height-40{min-height:40px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -7043,7 +7231,8 @@
     var API_END_POINTS$2 = {
         PROVIDER_INSIGHTS: "/apis/proxies/v8/microsite/read/insights",
         TRAINING_DETAILS: "apis/proxies/v8/sunbirdigot/search",
-        ANNOUNCEMENTS_DETAILS: "apis/proxies/v8/announcements/v1/search"
+        ANNOUNCEMENTS_DETAILS: "apis/proxies/v8/announcements/v1/search",
+        LEARNERS: "apis/proxies/v8/halloffame/top/learners"
     };
     var InsiteDataService = /** @class */ (function () {
         function InsiteDataService(http) {
@@ -7082,6 +7271,15 @@
         function (request) {
             return this.http.post(API_END_POINTS$2.TRAINING_DETAILS, request);
         };
+        /**
+         * @return {?}
+         */
+        InsiteDataService.prototype.fetchLearner = /**
+         * @return {?}
+         */
+        function () {
+            return this.http.get(API_END_POINTS$2.LEARNERS);
+        };
         InsiteDataService.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root'
@@ -7197,11 +7395,36 @@
                 _this.isDataLoading = false;
             }));
         };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        DataPointsComponent.prototype.converToIndianSystem = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            /** @type {?} */
+            var numStr = value.toString();
+            var _a = __read(numStr.split('.'), 2), integerPart = _a[0], decimalPart = _a[1];
+            /** @type {?} */
+            var lastThree = integerPart.slice(-3);
+            /** @type {?} */
+            var otherNumbers = integerPart.slice(0, -3);
+            if (otherNumbers !== '') {
+                lastThree = ',' + lastThree;
+            }
+            /** @type {?} */
+            var formattedIntegerPart = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + lastThree;
+            /** @type {?} */
+            var result = decimalPart ? formattedIntegerPart + "." + decimalPart.substr(0, 2) : formattedIntegerPart;
+            return result;
+        };
         DataPointsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-data-points',
-                        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\" *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\">\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                        <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                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\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\" *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</ng-container>\n",
-                        styles: [".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-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}@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}}"]
+                        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\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; 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                    [style.background]=\"obj?.iconBackgroupColorV2\"\n                    [style.borderColor]=\"obj?.valueColor\">\n                    <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n                </div>\n            </div>\n            <div class=\"v2-content-div\">\n                <div class=\"flex flex-col\">\n                    <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                    <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n                        {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n                        {{obj?.label}}\n                    </div>\n                    <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData.length\">\n                        <div class=\"v2-dot\"\n                            [style.background]=\"obj?.valueColorV2\"\n                            [style.borderColor]=\"obj?.labelColorV2\"></div>\n                        <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div class=\"mob-image-container-v2\">\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\"  *ngIf=\"(item && item.value)\">\n                                    {{item?.value  | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                                </div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n    <div class=\"flex space-around\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div class=\"flex flex-col\">\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *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\" *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",
+                        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:50px;width:50px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:24px;font-weight:600;line-height:24px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}"]
                     }] }
         ];
         /** @nocollapse */
@@ -8689,6 +8912,8 @@
             this.openDialog = new core.EventEmitter();
             this.isLoading = false;
             this.announcements = [];
+            this.expand = false;
+            this.expanded = false;
         }
         /**
          * @return {?}
@@ -8746,6 +8971,9 @@
                         });
                     }));
                 }
+                if (_this.announcements.length > 3) {
+                    _this.expand = true;
+                }
                 _this.objectData.list = _this.announcements;
                 _this.isLoading = false;
             }), (/**
@@ -8780,11 +9008,20 @@
         function () {
             this.openDialog.emit(true);
         };
+        /**
+         * @return {?}
+         */
+        AnnouncementsComponent.prototype.showMoreOrLess = /**
+         * @return {?}
+         */
+        function () {
+            this.expanded = !this.expanded;
+        };
         AnnouncementsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-announcements',
-                        template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web' && !isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" *ngIf=\"objectData?.list?.length\">\n            <div *ngFor=\"let item of objectData?.list; let i = index\">\n                <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n                    [style.borderColor]=\"objectData?.listItem?.border\"\n                    [style.backgroundColor]=\"objectData?.listItem?.background\">\n                    <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n                    <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n                    </div>\n                </div>\n            </div>                        \n        </div>\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" *ngIf=\"!objectData?.list?.length\">\n            <div class=\"text-center\">No announcements yet!</div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n    <div class=\"flex item-center key-logo \">\n        <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            <div class=\"flex key-button gap-3\">\n                <div>\n                    <img [src]=\"objectData?.mobileIcon\">\n                </div>\n                <div>{{objectData?.title}}</div>                \n                <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n            </div>            \n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'web' && isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo pt-1\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >            \n            <div class=\"key-list-item mb-4\" \n                *ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n                [style.borderColor]=\"objectData?.listItem?.border\"\n                [style.backgroundColor]=\"objectData?.listItem?.background\">\n                <div class=\"key-list-item-content un-expand\">\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>        \n    </div>\n</div>\n",
-                        styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{height:600px;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
+                        template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web' && !isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : expand && expanded ? 'exp-key-list' : 'key-list'}}\" *ngIf=\"objectData?.list?.length\">\n            <div *ngFor=\"let item of objectData?.list; let i = index\">\n                <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n                    [style.borderColor]=\"objectData?.listItem?.border\"\n                    [style.backgroundColor]=\"objectData?.listItem?.background\">\n                    <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n                    <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n                    </div>\n                </div>\n            </div>                        \n        </div>\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" *ngIf=\"!objectData?.list?.length\">\n            <div class=\"text-center\">No announcements yet!</div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!mobileHeight && expand\">\n    <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" *ngIf=\"!expanded\">\n        <mat-icon>expand_more</mat-icon>\n    </div>\n    <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" *ngIf=\"expanded\">\n        <mat-icon>expand_less</mat-icon>\n    </div>\n</ng-container>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n    <div class=\"flex item-center key-logo \">\n        <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            <div class=\"flex key-button gap-3\">\n                <div>\n                    <img [src]=\"objectData?.mobileIcon\">\n                </div>\n                <div>{{objectData?.title}}</div>                \n                <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n            </div>            \n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'web' && isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo pt-1\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >            \n            <div class=\"key-list-item mb-4\" \n                *ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n                [style.borderColor]=\"objectData?.listItem?.border\"\n                [style.backgroundColor]=\"objectData?.listItem?.background\">\n                <div class=\"key-list-item-content un-expand\">\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>        \n    </div>\n</div>\n",
+                        styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{height:325px;overflow:auto}.exp-key-list{height:100%;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}.announcements-expand{width:32px;height:32px;position:relative;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;left:50%;right:50%;top:-16px;cursor:pointer}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
                     }] }
         ];
         /** @nocollapse */
@@ -8819,6 +9056,10 @@
         /** @type {?} */
         AnnouncementsComponent.prototype.announcements;
         /** @type {?} */
+        AnnouncementsComponent.prototype.expand;
+        /** @type {?} */
+        AnnouncementsComponent.prototype.expanded;
+        /** @type {?} */
         AnnouncementsComponent.prototype.insightSvc;
     }
 
@@ -8843,560 +9084,1296 @@
         return AnnouncementsModule;
     }());
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var ConsumptionModule = /** @class */ (function () {
-        function ConsumptionModule() {
-        }
-        ConsumptionModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [ConsumptionComponent],
-                        imports: [
-                            ContentStripWithTabsLibModule,
-                            SlidersLibModule
-                        ],
-                        exports: [ConsumptionComponent,
-                            ContentStripWithTabsLibModule,
-                            SlidersLibModule,
-                            DataPointsModule,
-                            CalenderModule,
-                            CommonStripModule,
-                            AnnouncementsModule
-                        ],
-                    },] }
-        ];
-        return ConsumptionModule;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /** @type {?} */
-    var ROOT_WIDGET_CONFIG = {
-        card: {
-            _type: 'cardLib',
-            cardResource: 'cardContentLib'
-        },
-    };
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var NsCardContent$1;
-    (function (NsCardContent) {
-        /**
-         * @record
-         */
-        function ICard() { }
-        NsCardContent.ICard = ICard;
-        if (false) {
-            /** @type {?} */
-            ICard.prototype.content;
-            /** @type {?} */
-            ICard.prototype.cardSubType;
-            /** @type {?} */
-            ICard.prototype.context;
-            /** @type {?|undefined} */
-            ICard.prototype.intranetMode;
-            /** @type {?|undefined} */
-            ICard.prototype.deletedMode;
-            /** @type {?|undefined} */
-            ICard.prototype.likes;
-            /** @type {?|undefined} */
-            ICard.prototype.contentTags;
-            /** @type {?} */
-            ICard.prototype.stateData;
-            /** @type {?|undefined} */
-            ICard.prototype.cardCustomeClass;
+    var moment$1 = moment$2;
+    var TopLearnersComponent = /** @class */ (function () {
+        function TopLearnersComponent(insightSvc) {
+            this.insightSvc = insightSvc;
+            this.loading = false;
+            this.month = '';
+            this.results = [];
+            this.colors = [
+                '#EB7181',
+                '#306933',
+                '#000000',
+                '#3670B2',
+                '#4E9E87',
+                '#7E4C8D',
+                '#EB7181',
+                '#306933',
+                '#000000',
+                '#3670B2',
+            ];
         }
         /**
-         * @record
+         * @return {?}
          */
-        function IContentTags() { }
-        NsCardContent.IContentTags = IContentTags;
-        if (false) {
-            /** @type {?|undefined} */
-            IContentTags.prototype.daysSpan;
-            /** @type {?|undefined} */
-            IContentTags.prototype.excludeContentType;
-            /** @type {?|undefined} */
-            IContentTags.prototype.excludeMimeType;
-            /** @type {?} */
-            IContentTags.prototype.tag;
-            /** @type {?|undefined} */
-            IContentTags.prototype.criteriaField;
-        }
-        var EContentStatus;
-        (function (EContentStatus) {
-            EContentStatus["LIVE"] = "Live";
-            EContentStatus["EXPIRED"] = "Expired";
-            EContentStatus["DELETED"] = "Deleted";
-            EContentStatus["MARK_FOR_DELETION"] = "MarkedForDeletion";
-        })(EContentStatus = NsCardContent.EContentStatus || (NsCardContent.EContentStatus = {}));
-        var ACBPConst;
-        (function (ACBPConst) {
-            ACBPConst["UPCOMING"] = "upcoming";
-            ACBPConst["ALL"] = "All";
-            ACBPConst["OVERDUE"] = "overdue";
-            ACBPConst["SUCCESS"] = "success";
-        })(ACBPConst = NsCardContent.ACBPConst || (NsCardContent.ACBPConst = {}));
-        var IGOTConst;
-        (function (IGOTConst) {
-            IGOTConst["COMPETENCIES"] = "competencies_v5";
-            IGOTConst["RETIRED"] = "Retired";
-        })(IGOTConst = NsCardContent.IGOTConst || (NsCardContent.IGOTConst = {}));
-    })(NsCardContent$1 || (NsCardContent$1 = {}));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var CardsComponent = /** @class */ (function (_super) {
-        __extends(CardsComponent, _super);
-        function CardsComponent(utilitySvc, contSvc, router) {
-            var _this = _super.call(this) || this;
-            _this.utilitySvc = utilitySvc;
-            _this.contSvc = contSvc;
-            _this.router = router;
-            _this.triggerTelemetry = new core.EventEmitter();
-            _this.isIntranetAllowedSettings = false;
-            return _this;
-        }
+        TopLearnersComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            this.getData();
+            this.month = new Date().toLocaleString('default', { month: 'long' });
+        };
         /**
          * @return {?}
          */
-        CardsComponent.prototype.ngOnInit = /**
+        TopLearnersComponent.prototype.getData = /**
          * @return {?}
          */
         function () {
             var _this = this;
-            this.cbPlanInterval = setInterval((/**
-             * @return {?}
-             */
-            function () {
-                _this.getCbPlanData();
-            }), 1000);
-            this.enrollInterval = setInterval((/**
-             * @return {?}
-             */
-            function () {
-                _this.getEnrollmentData();
-                // tslint:disable-next-line
-            }), 1000);
-        };
-        Object.defineProperty(CardsComponent.prototype, "isLiveOrMarkForDeletion", {
-            get: /**
+            this.loading = true;
+            this.insightSvc.fetchLearner().subscribe((/**
+             * @param {?} res
              * @return {?}
              */
-            function () {
-                if (!this.widgetData.content.status ||
-                    this.widgetData.content.status === 'Live' ||
-                    this.widgetData.content.status === 'MarkedForDeletion') {
-                    return true;
+            function (res) {
+                if (res && res.result && res.result.result) {
+                    _this.results = res.result.result;
+                    _this.month = moment$1().month(Number(res.result.result[0].month) - 1).format('MMMM');
+                    _this.loading = false;
                 }
-                return false;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(CardsComponent.prototype, "showIntranetContent", {
-            get: /**
+            }), (/**
+             * @param {?} _error
              * @return {?}
              */
-            function () {
-                if (this.widgetData.content.isInIntranet && this.utilitySvc.isMobile) {
-                    return !this.isIntranetAllowedSettings;
-                }
-                return false;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * @param {?} content
-         * @return {?}
-         */
-        CardsComponent.prototype.getRedirectUrlData = /**
-         * @param {?} content
-         * @return {?}
-         */
-        function (content) {
-            return __awaiter(this, void 0, void 0, function () {
-                var urlData;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!content.externalId) return [3 /*break*/, 1];
-                            this.router.navigate(["app/toc/ext/" + content.contentId]);
-                            return [3 /*break*/, 3];
-                        case 1: return [4 /*yield*/, this.contSvc.getResourseLink(content)];
-                        case 2:
-                            urlData = _a.sent();
-                            this.router.navigate([urlData.url], {
-                                queryParams: urlData.queryParams
-                            });
-                            _a.label = 3;
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            });
+            function (_error) {
+                // tslint:disable-next-line: align
+                _this.loading = false;
+            }));
         };
         /**
+         * @param {?} rank
          * @return {?}
          */
-        CardsComponent.prototype.getCbPlanData = /**
+        TopLearnersComponent.prototype.getRank = /**
+         * @param {?} rank
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var cbpList = {};
-            if (localStorage.getItem('cbpData')) {
-                /** @type {?} */
-                var cbpListArr = JSON.parse(localStorage.getItem('cbpData') || '');
-                if (cbpListArr && cbpListArr.length) {
-                    cbpListArr.forEach((/**
-                     * @param {?} data
-                     * @return {?}
-                     */
-                    function (data) {
-                        cbpList[data.identifier] = data;
-                    }));
-                }
-                this.cbPlanMapData = cbpList;
-                // this.karmaPointLoading = false
-                clearInterval(this.cbPlanInterval);
+        function (rank) {
+            if (rank === 1) {
+                return "1st";
+            }
+            if (rank === 2) {
+                return "2nd";
+            }
+            if (rank === 3) {
+                return "3rd";
+            }
+            else {
+                return rank + "th";
             }
         };
         /**
          * @return {?}
          */
-        CardsComponent.prototype.getEnrollmentData = /**
+        TopLearnersComponent.prototype.getColor = /**
          * @return {?}
          */
         function () {
-            if (localStorage.getItem('enrollmentMapData')) {
-                this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
-                clearInterval(this.enrollInterval);
-            }
+            /** @type {?} */
+            var circleColor = '';
+            /** @type {?} */
+            var randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+            circleColor = this.colors[randomIndex];
+            return circleColor;
         };
         /**
-         * @param {?} data
+         * @param {?} name
          * @return {?}
          */
-        CardsComponent.prototype.raiseCardClick = /**
-         * @param {?} data
+        TopLearnersComponent.prototype.createInititals = /**
+         * @param {?} name
          * @return {?}
          */
-        function (data) {
-            this.triggerTelemetry.emit(data);
+        function (name) {
+            /** @type {?} */
+            var initials = '';
+            /** @type {?} */
+            var array = name.toString().split(' ');
+            if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+                initials += array[0].charAt(0);
+                initials += array[1].charAt(0);
+            }
+            else {
+                for (var i = 0; i < name.length; i += 1) {
+                    if (name.charAt(i) === ' ') {
+                        continue;
+                    }
+                    if (name.charAt(i) === name.charAt(i)) {
+                        initials += name.charAt(i);
+                        if (initials.length === 2) {
+                            break;
+                        }
+                    }
+                }
+            }
+            return initials.toUpperCase();
         };
-        CardsComponent.decorators = [
+        TopLearnersComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" \n  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" [enrollmentMapData]=\"enrollmentMapData\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n<ng-template #cardProvider>\n  <sb-uic-provider-card  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n  <sb-uic-provider-card  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n",
-                        styles: [""]
+                        selector: 'sb-uic-top-learners',
+                        template: "<div class=\"flex flex-center\">\n    <div>\n        <div class=\"title-border\"></div>\n        <div class=\"title\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n        <div class=\"title-border\"></div>\n    </div>    \n</div>\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length\">\n    <div class=\"w-full margin-bottom-l margin-top-l\">\n        <div class=\"flex gap-3\">\n            <div *ngFor=\"let obj of results; let i=index\" class=\"flex-container\">\n                <div class=\"flex-item user-box\">\n                    <div class=\"flex gap-3 img-name-sec\">\n                        <div class=\"flex gap-3\">\n                            <div class=\"profile-pic\" *ngIf=\"obj?.profile_image\">\n                                <img [src]=\"obj?.profile_image\" class=\"user-image\"/>\n                            </div>\n                            <div class=\"initial\" *ngIf=\"!obj?.profile_image\"\n                                [style.backgroundColor]=\"colors[i]\">\n                                {{createInititals(obj?.fullname)}}\n                            </div>\n                            <div class=\"flex flex-col gap-1\">\n                                <div class=\"name-sec\">{{obj?.fullname}}</div>\n                                <div class=\"designation-sec\">{{obj?.designation}}</div>\n                                <div class=\"designation-sec\">{{channnelName}}</div>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-3\">                                                       \n                            <div class=\"rank-sec\">{{getRank(+obj?.rank)}}</div>\n                        </div>                        \n                    </div>\n                    <div class=\"flex gap-2 kp-section\">\n                        <div class=\"kp-icon\"><img [src]=\"objectData?.kpIcon\" class=\"kp-image\"/></div>\n                        <div class=\"points\">{{obj?.total_points || 0}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length === 0\">\n    <div class=\"margin-top-l noData\">\n        No data\n    </div>\n</div>\n\n<ng-container>\n    <div class=\"top-learners-container\" *ngIf=\"loading\">\n        <div class=\"w-full margin-bottom-l margin-top-l\">\n            <div class=\"flex gap-3\">\n                <div *ngFor=\"let obj of [1,2,3]\" class=\"flex-container\">\n                    <div class=\"flex-item user-box\">\n                        <div class=\"flex gap-3 img-name-sec\">\n                            <div class=\"flex gap-3\">\n                                <div class=\"profile-pic\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex flex-col gap-1\">\n                                    <div class=\"name-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-3\">                                                       \n                                <div class=\"rank-sec\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>                        \n                        </div>\n                        <div class=\"flex gap-2 kp-section\">\n                            <div class=\"kp-icon\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>   \n                            </div>\n                            <div class=\"points\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>",
+                        styles: [".title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:15px}.title-border{margin:10px;width:240px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.noData{border:1px solid #1b4ca1;padding:15px;display:flex;justify-content:center;border-radius:12px}.top-learners-container{overflow:auto}::-webkit-scrollbar{height:10px!important}::-webkit-scrollbar-track{background:#eff3f9!important}.user-box{width:360px;height:134px;border-radius:8px;background-color:#fff;padding:16px;position:relative}.flex-container{display:flex}.flex-item{flex:0 0 auto;white-space:nowrap}.img-name-sec{justify-content:space-between}.initial{width:44px;height:44px;border-radius:50%;align-items:center;display:flex;justify-content:center;font-weight:700;color:#fff}.user-image{width:44px;height:44px;border-radius:50%}.name-sec{font-family:Lato;font-size:16px;font-weight:700;line-height:19.2px;text-align:left;width:200px!important;overflow:hidden;text-overflow:ellipsis}.designation-sec{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6;width:200px!important;overflow:hidden;text-overflow:ellipsis}.rank-sec{font-family:Montserrat;font-size:36px;font-weight:700;line-height:43.88px;text-align:left;color:#ef951e}.kp-section{justify-content:flex-end;position:absolute;right:18px;bottom:16px;align-items:center}.kp-image{width:32px;height:32px;padding-top:3px}.points{font-family:Lato;font-size:24px;font-weight:700;line-height:28.8px;text-align:left;color:#1b4ca1;padding-bottom:3px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(204,204,204,.8);border-radius:10px}@media screen and (max-width:768px){.user-box{width:343px}}"]
                     }] }
         ];
         /** @nocollapse */
-        CardsComponent.ctorParameters = function () { return [
-            { type: utilsV2.UtilityService },
-            { type: WidgetContentService },
-            { type: router.Router }
+        TopLearnersComponent.ctorParameters = function () { return [
+            { type: InsiteDataService }
         ]; };
-        CardsComponent.propDecorators = {
-            widgetData: [{ type: core.Input }],
-            triggerTelemetry: [{ type: core.Output }]
+        TopLearnersComponent.propDecorators = {
+            objectData: [{ type: core.Input }],
+            channelId: [{ type: core.Input }],
+            channnelName: [{ type: core.Input }]
         };
-        return CardsComponent;
-    }(resolverV2.WidgetBaseComponent));
+        return TopLearnersComponent;
+    }());
     if (false) {
         /** @type {?} */
-        CardsComponent.prototype.widgetData;
+        TopLearnersComponent.prototype.objectData;
         /** @type {?} */
-        CardsComponent.prototype.triggerTelemetry;
+        TopLearnersComponent.prototype.channelId;
         /** @type {?} */
-        CardsComponent.prototype.isIntranetAllowedSettings;
+        TopLearnersComponent.prototype.channnelName;
         /** @type {?} */
-        CardsComponent.prototype.cbPlanMapData;
+        TopLearnersComponent.prototype.loading;
         /** @type {?} */
-        CardsComponent.prototype.cbPlanInterval;
+        TopLearnersComponent.prototype.month;
         /** @type {?} */
-        CardsComponent.prototype.enrollInterval;
+        TopLearnersComponent.prototype.results;
         /** @type {?} */
-        CardsComponent.prototype.enrollmentMapData;
-        /**
-         * @type {?}
-         * @private
-         */
-        CardsComponent.prototype.utilitySvc;
-        /**
-         * @type {?}
-         * @private
-         */
-        CardsComponent.prototype.contSvc;
+        TopLearnersComponent.prototype.colors;
         /** @type {?} */
-        CardsComponent.prototype.router;
+        TopLearnersComponent.prototype.insightSvc;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var CardResourceComponent = /** @class */ (function (_super) {
-        __extends(CardResourceComponent, _super);
-        function CardResourceComponent() {
-            return _super.call(this) || this;
+    var TopLearnersModule = /** @class */ (function () {
+        function TopLearnersModule() {
+        }
+        TopLearnersModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [TopLearnersComponent],
+                        imports: [
+                            common.CommonModule,
+                            SkeletonLoaderLibModule
+                        ],
+                        exports: [TopLearnersComponent],
+                    },] }
+        ];
+        return TopLearnersModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ScrollableItemDirective = /** @class */ (function () {
+        function ScrollableItemDirective(el) {
+            this.el = el;
         }
         /**
+         * @param {?} blockValue
          * @return {?}
          */
-        CardResourceComponent.prototype.ngOnInit = /**
+        ScrollableItemDirective.prototype.scrollIntoView = /**
+         * @param {?} blockValue
          * @return {?}
          */
-        function () {
+        function (blockValue) {
+            this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
         };
-        CardResourceComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'ws-cb-widget-card-resource',
-                        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",
-                        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-all;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}"]
-                    }] }
+        ScrollableItemDirective.decorators = [
+            { type: core.Directive, args: [{
+                        selector: '[sbUicScrollableItem]'
+                    },] }
         ];
         /** @nocollapse */
-        CardResourceComponent.ctorParameters = function () { return []; };
-        CardResourceComponent.propDecorators = {
-            widgetData: [{ type: core.Input }]
+        ScrollableItemDirective.ctorParameters = function () { return [
+            { type: core.ElementRef }
+        ]; };
+        ScrollableItemDirective.propDecorators = {
+            key: [{ type: core.Input, args: ['sbUicScrollableItem',] }]
         };
-        return CardResourceComponent;
-    }(resolverV2.WidgetBaseComponent));
+        return ScrollableItemDirective;
+    }());
     if (false) {
         /** @type {?} */
-        CardResourceComponent.prototype.widgetData;
+        ScrollableItemDirective.prototype.key;
+        /**
+         * @type {?}
+         * @private
+         */
+        ScrollableItemDirective.prototype.el;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var CardPortraitComponent = /** @class */ (function () {
-        function CardPortraitComponent(snackBar, translate, langtranslations, configSvc, contSvc) {
-            var _this = this;
-            this.snackBar = snackBar;
+    var CbpPlanComponent = /** @class */ (function () {
+        function CbpPlanComponent(translate, langtranslations) {
             this.translate = translate;
             this.langtranslations = langtranslations;
-            this.configSvc = configSvc;
-            this.contSvc = contSvc;
-            this.isCardLoading = false;
-            this.contentData = new core.EventEmitter();
-            this.isCardFlipped = false;
-            this.acbpConstants = NsCardContent$1.ACBPConst;
-            this.showFlip = false;
-            this.widgetType = 'df';
-            this.widgetSubType = 'sdf';
-            this.langtranslations.languageSelectedObservable.subscribe((/**
-             * @return {?}
-             */
-            function () {
-                if (localStorage.getItem('websiteLanguage')) {
-                    _this.translate.setDefaultLang('en');
-                    /** @type {?} */
-                    var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
-                    _this.translate.use(lang);
-                }
-            }));
+            this.mobileHeight = false;
+            this.fetchDataFromApi = false;
+            this.openDialog = new core.EventEmitter();
+            this.isLoading = false;
+            this.currentIndex = 0;
+            this.styleData = {};
+            this.contentdata = [];
         }
         /**
          * @return {?}
          */
-        CardPortraitComponent.prototype.ngOnInit = /**
+        CbpPlanComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            /** @type {?} */
-            var instanceConfig = this.configSvc.instanceConfig;
-            if (instanceConfig) {
-                this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
-                this.sourceLogos = instanceConfig.sources;
-                this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
-            }
-            else {
-                this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
-                this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+            var _this = this;
+            this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+            if (this.objectData && this.objectData.list) {
+                this.objectData.list.forEach((/**
+                 * @param {?} contentEle
+                 * @return {?}
+                 */
+                function (contentEle) {
+                    /** @type {?} */
+                    var localData = {};
+                    localData['title'] = contentEle.title;
+                    localData['downloaUrl'] = contentEle.downloaUrl;
+                    localData['cardSubType'] = "card-wide-lib";
+                    localData['cardCustomeClass'] = "";
+                    _this.contentdata.push(localData);
+                }));
             }
         };
         /**
+         * @param {?} indexValue
          * @return {?}
          */
-        CardPortraitComponent.prototype.showSnackbar = /**
+        CbpPlanComponent.prototype.getCurrentIndex = /**
+         * @param {?} indexValue
          * @return {?}
          */
-        function () {
-            if (this.showIntranetContent) {
-                this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
-            }
-            else if (!this.isLiveOrMarkForDeletion) {
-                this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
-            }
+        function (indexValue) {
+            this.currentIndex = indexValue;
         };
         /**
-         * @param {?} contentData
+         * @param {?} item
          * @return {?}
          */
-        CardPortraitComponent.prototype.getRedirectUrlData = /**
-         * @param {?} contentData
+        CbpPlanComponent.prototype.getFileName = /**
+         * @param {?} item
          * @return {?}
          */
-        function (contentData) {
-            // for telemetry
-            if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
-                contentData['typeOfTelemetry'] = this.widgetData.context.pageSection;
-            }
-            this.contSvc.changeTelemetryData(contentData);
-            // for redirection
-            this.contentData.emit(contentData);
+        function (item) {
+            console.log(item.downloadUrl);
+            return item.downloadUrl.split("/").at(-1);
         };
-        CardPortraitComponent.decorators = [
+        /**
+         * @param {?} label
+         * @param {?} type
+         * @return {?}
+         */
+        CbpPlanComponent.prototype.translateLabels = /**
+         * @param {?} label
+         * @param {?} type
+         * @return {?}
+         */
+        function (label, type) {
+            return this.langtranslations.translateActualLabel(label, type, '');
+        };
+        /**
+         * @param {?} item
+         * @return {?}
+         */
+        CbpPlanComponent.prototype.downloadCBPPlan = /**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) {
+            /** @type {?} */
+            var downloadUrl = item.downloaUrl;
+            /** @type {?} */
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', downloadUrl, true);
+            xhr.responseType = 'blob';
+            xhr.onload = (/**
+             * @return {?}
+             */
+            function () {
+                if (xhr.status === 200) {
+                    /** @type {?} */
+                    var blob = new Blob([xhr.response], { type: 'application/pdf' });
+                    /** @type {?} */
+                    var url = window.URL.createObjectURL(blob);
+                    /** @type {?} */
+                    var a = document.createElement('a');
+                    a.href = url;
+                    a.download = downloadUrl.split("/").at(-1);
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+                }
+                else {
+                    console.error('Error downloading the PDF', xhr.statusText);
+                }
+            });
+            xhr.onerror = (/**
+             * @return {?}
+             */
+            function () {
+                console.error('Network error');
+            });
+            xhr.send();
+        };
+        CbpPlanComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'sb-uic-card-portrait',
-                        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&nbsp; {{ (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>",
-                        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-all;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}"]
+                        selector: 'sb-uic-cbp-plan',
+                        template: "<div class=\"w-full\">\n    <div class=\"flex item-center cbp-logo\">\n        <div class=\"cbp-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    \n    <div class=\"cbp-list-container\" *ngIf=\"contentdata.length\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <ng-container *ngIf=\"contentdata.length; else msgTemp\">\n            <sb-uic-sliders-ng-content\n                [title]=\"'providerName'\"\n                [currentIndex]=\"currentIndex\"\n                (currentIndexValue)=\"getCurrentIndex($event)\"\n                [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n                [styleData]=\"styleData\">\n                <div sliderbody>\n                    <div *ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                        <div class=\"cbp-list-item\"\n                            [style.borderColor]=\"objectData?.listItem?.border\"\n                            [style.color]=\"objectData?.listItem?.border\"\n                            [style.backgroundColor]=\"objectData?.listItem?.background\">\n                            <div class=\"cbp-item-title\">{{item?.title}}</div>\n                            <div class=\"flex download-sec\">\n                                <div class=\"flex gap-3 cbp-download\" (click)=\"downloadCBPPlan(item)\">\n                                    <img [src]=\"objectData?.downloadIcon\">Download\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </sb-uic-sliders-ng-content>\n        </ng-container>\n        <ng-template #msgTemp>\n            <div class=\"padding-bottom-m\">\n                {{ translateLabels(objectData?.noData, 'home') }}\n            </div>\n        </ng-template>\n    </div>\n</div>",
+                        styles: [".cbp-logo{align-items:center;justify-content:center}.cbp-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px}.cbp-list-container{border:1px solid #ccc;padding:40px 25px 0;border-radius:12px;margin-top:-20px}.cbp-list-item{padding:16px;border:1px solid #ccc;border-radius:12px}.cbp-item-title{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;height:48px;padding-bottom:10px}.cbp-mob-icon{font-size:20px;width:20px;height:20px}.download-sec{align-items:center;justify-content:end}.cbp-download{display:flex;align-items:center;gap:4px;background:#fff;padding:6px 8px;border-radius:20px;cursor:pointer;font-family:Lato;font-size:12px;font-weight:700;line-height:20px;text-align:left}[hidden]{display:none!important}.cbp-list-container ::ng-deep.cbp-card{min-height:115px!important;padding-bottom:30px!important}.cbp-list-container ::ng-deep.banner-title{display:none}.cbp-list-container ::ng-deep.prev{font-size:10px;height:20px!important;width:20px!important;margin-left:-11px}.cbp-list-container ::ng-deep.next{font-size:10px;height:20px!important;width:20px!important;margin-right:-11px}"]
                     }] }
         ];
         /** @nocollapse */
-        CardPortraitComponent.ctorParameters = function () { return [
-            { type: material.MatSnackBar },
+        CbpPlanComponent.ctorParameters = function () { return [
             { type: core$1.TranslateService },
-            { type: MultilingualTranslationsService },
-            { type: utilsV2.ConfigurationsService },
-            { type: WidgetContentService }
+            { type: MultilingualTranslationsService }
         ]; };
-        CardPortraitComponent.propDecorators = {
-            widgetData: [{ type: core.Input }],
-            isLiveOrMarkForDeletion: [{ type: core.Input }],
-            showIntranetContent: [{ type: core.Input }],
-            isIntranetAllowedSettings: [{ type: core.Input }],
-            isCardLoading: [{ type: core.Input }],
-            contentData: [{ type: core.Output }],
-            cbPlanMapData: [{ type: core.Input }]
+        CbpPlanComponent.propDecorators = {
+            objectData: [{ type: core.Input }],
+            layoutType: [{ type: core.Input }],
+            mobileHeight: [{ type: core.Input }],
+            fetchDataFromApi: [{ type: core.Input }],
+            channelId: [{ type: core.Input }],
+            openDialog: [{ type: core.Output }],
+            scrollableItems: [{ type: core.ViewChildren, args: [ScrollableItemDirective,] }]
         };
-        return CardPortraitComponent;
+        return CbpPlanComponent;
     }());
     if (false) {
         /** @type {?} */
-        CardPortraitComponent.prototype.widgetData;
-        /** @type {?} */
-        CardPortraitComponent.prototype.isLiveOrMarkForDeletion;
-        /** @type {?} */
-        CardPortraitComponent.prototype.showIntranetContent;
-        /** @type {?} */
-        CardPortraitComponent.prototype.isIntranetAllowedSettings;
-        /** @type {?} */
-        CardPortraitComponent.prototype.isCardLoading;
+        CbpPlanComponent.prototype.objectData;
         /** @type {?} */
-        CardPortraitComponent.prototype.contentData;
+        CbpPlanComponent.prototype.layoutType;
         /** @type {?} */
-        CardPortraitComponent.prototype.cbPlanMapData;
+        CbpPlanComponent.prototype.mobileHeight;
         /** @type {?} */
-        CardPortraitComponent.prototype.isCardFlipped;
+        CbpPlanComponent.prototype.fetchDataFromApi;
         /** @type {?} */
-        CardPortraitComponent.prototype.acbpConstants;
+        CbpPlanComponent.prototype.channelId;
         /** @type {?} */
-        CardPortraitComponent.prototype.defaultThumbnail;
+        CbpPlanComponent.prototype.openDialog;
         /** @type {?} */
-        CardPortraitComponent.prototype.sourceLogos;
+        CbpPlanComponent.prototype.isLoading;
         /** @type {?} */
-        CardPortraitComponent.prototype.defaultSLogo;
+        CbpPlanComponent.prototype.currentIndex;
         /** @type {?} */
-        CardPortraitComponent.prototype.showFlip;
+        CbpPlanComponent.prototype.styleData;
         /** @type {?} */
-        CardPortraitComponent.prototype.widgetType;
+        CbpPlanComponent.prototype.contentdata;
         /** @type {?} */
-        CardPortraitComponent.prototype.widgetSubType;
-        /**
-         * @type {?}
-         * @private
-         */
-        CardPortraitComponent.prototype.snackBar;
-        /**
-         * @type {?}
-         * @private
-         */
-        CardPortraitComponent.prototype.translate;
+        CbpPlanComponent.prototype.scrollableItems;
         /**
          * @type {?}
          * @private
          */
-        CardPortraitComponent.prototype.langtranslations;
-        /**
-         * @type {?}
-         * @private
-         */
-        CardPortraitComponent.prototype.configSvc;
+        CbpPlanComponent.prototype.translate;
         /**
          * @type {?}
          * @private
          */
-        CardPortraitComponent.prototype.contSvc;
+        CbpPlanComponent.prototype.langtranslations;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var PipePublicURL = /** @class */ (function () {
-        function PipePublicURL(environment) {
-            this.environment = environment;
+    var SlidersNgContentLibComponent = /** @class */ (function (_super) {
+        __extends(SlidersNgContentLibComponent, _super);
+        function SlidersNgContentLibComponent(events, valueSvc) {
+            var _this = _super.call(this) || this;
+            _this.events = events;
+            _this.valueSvc = valueSvc;
+            _this.title = '';
+            _this.loadNgContentData = false;
+            _this.autoScroll = false;
+            _this.currentIndexValue = new core.EventEmitter();
+            _this.id = "banner_" + Math.random();
+            _this.defaultMenuSubscribe = null;
+            _this.isLtMedium$ = _this.valueSvc.isLtMedium$;
+            _this.currentIndex = 0;
+            _this.slideInterval = null;
+            _this.isMobile = false;
+            return _this;
         }
         /**
-         * @param {?} value
          * @return {?}
          */
-        PipePublicURL.prototype.transform = /**
-         * @param {?} value
+        SlidersNgContentLibComponent.prototype.ngOnInit = /**
          * @return {?}
          */
-        function (value) {
-            /** @type {?} */
-            var mainUrl = value && value.split('/content').pop() || '';
-            /** @type {?} */
-            var finalURL = this.environment.contentHost + "/" + this.environment.contentBucket + "/content" + mainUrl;
-            return value ? finalURL : '';
+        function () {
+            var _this = this;
+            if (this.autoScroll) {
+                this.reInitiateSlideInterval();
+            }
+            this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
+             * @param {?} isLtMedium
+             * @return {?}
+             */
+            function (isLtMedium) {
+                _this.isMobile = isLtMedium;
+            }));
         };
-        PipePublicURL.decorators = [
-            { type: core.Pipe, args: [{
-                        name: 'pipePublicURL',
-                    },] }
-        ];
-        /** @nocollapse */
-        PipePublicURL.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: core.Inject, args: ['environment',] }] }
-        ]; };
-        return PipePublicURL;
-    }());
-    if (false) {
-        /** @type {?} */
-        PipePublicURL.prototype.environment;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PipePublicURLModule = /** @class */ (function () {
-        function PipePublicURLModule() {
-        }
-        PipePublicURLModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [PipePublicURL],
-                        imports: [
-                            common.CommonModule,
-                        ],
-                        exports: [PipePublicURL],
-                    },] }
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.reInitiateSlideInterval = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            if (this.widgetData && this.widgetData.length > 1) {
+                try {
+                    if (this.slideInterval) {
+                        this.slideInterval.unsubscribe();
+                    }
+                }
+                catch (e) {
+                }
+                finally {
+                    this.slideInterval = rxjs.interval(8000).subscribe((/**
+                     * @return {?}
+                     */
+                    function () {
+                        if (_this.currentIndex === _this.widgetData.length - 1) {
+                            _this.currentIndex = 0;
+                            _this.currentIndexValue.emit(_this.currentIndex);
+                        }
+                        else {
+                            _this.currentIndex += 1;
+                            _this.currentIndexValue.emit(_this.currentIndex);
+                        }
+                    }));
+                }
+            }
+        };
+        /**
+         * @param {?} index
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.slideTo = /**
+         * @param {?} index
+         * @return {?}
+         */
+        function (index) {
+            if (index >= 0 && index < this.widgetData.length) {
+                this.currentIndex = index;
+                this.currentIndexValue.emit(this.currentIndex);
+            }
+            else if (index === this.widgetData.length) {
+                this.currentIndex = 0;
+                this.currentIndexValue.emit(this.currentIndex);
+            }
+            else {
+                this.currentIndex = this.widgetData.length + index;
+                this.currentIndexValue.emit(this.currentIndex);
+            }
+            if (this.autoScroll) {
+                this.reInitiateSlideInterval();
+            }
+        };
+        Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var currentData = this.widgetData[this.currentIndex];
+                if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+                    return true;
+                }
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.openInNewTab = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var currentData = this.widgetData[this.currentIndex];
+            if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+                window.open(currentData.redirectUrl);
+            }
+        };
+        /**
+         * @param {?} bannerUrl
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.raiseTelemetry = /**
+         * @param {?} bannerUrl
+         * @return {?}
+         */
+        function (bannerUrl) {
+            this.openInNewTab();
+            /** @type {?} */
+            var path = window.location.pathname.replace('/', '');
+            /** @type {?} */
+            var url = path + window.location.search;
+            this.events.raiseInteractTelemetry({
+                type: 'click',
+                subType: 'banner',
+            }, {
+                pageUrl: url,
+                bannerRedirectUrl: bannerUrl,
+            }, {
+                pageIdExt: 'banner',
+                module: utilsV2.WsEvents.EnumTelemetrymodules.CONTENT,
+            });
+        };
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+        function () {
+            if (this.defaultMenuSubscribe) {
+                this.defaultMenuSubscribe.unsubscribe();
+            }
+        };
+        SlidersNgContentLibComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-sliders-ng-content',
+                        template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\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    </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\" 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    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\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\" 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            <ng-content select=\"[sliderMeta]\"></ng-content>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *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\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",
+                        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}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        SlidersNgContentLibComponent.ctorParameters = function () { return [
+            { type: utilsV2.EventService },
+            { type: utilsV2.ValueService }
+        ]; };
+        SlidersNgContentLibComponent.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            styleData: [{ type: core.Input }],
+            title: [{ type: core.Input }],
+            loadNgContentData: [{ type: core.Input }],
+            autoScroll: [{ type: core.Input }],
+            currentIndexValue: [{ type: core.Output }],
+            id: [{ type: core.HostBinding, args: ['id',] }],
+            currentIndex: [{ type: core.Input }]
+        };
+        return SlidersNgContentLibComponent;
+    }(resolverV2.WidgetBaseComponent));
+    if (false) {
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.widgetData;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.styleData;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.title;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.loadNgContentData;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.autoScroll;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.currentIndexValue;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.id;
+        /**
+         * @type {?}
+         * @private
+         */
+        SlidersNgContentLibComponent.prototype.defaultMenuSubscribe;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.isLtMedium$;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.currentIndex;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.slideInterval;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.isMobile;
+        /**
+         * @type {?}
+         * @private
+         */
+        SlidersNgContentLibComponent.prototype.events;
+        /**
+         * @type {?}
+         * @private
+         */
+        SlidersNgContentLibComponent.prototype.valueSvc;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /* tslint:enable */
+    var   /* tslint:enable */
+    MyHammerConfig$1 = /** @class */ (function (_super) {
+        __extends(MyHammerConfig, _super);
+        function MyHammerConfig() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        /**
+         * @param {?} element
+         * @return {?}
+         */
+        MyHammerConfig.prototype.buildHammer = /**
+         * @param {?} element
+         * @return {?}
+         */
+        function (element) {
+            /** @type {?} */
+            var mc = new Hammer(element, {
+                touchAction: 'pan-y',
+            });
+            return mc;
+        };
+        return MyHammerConfig;
+    }(platformBrowser.HammerGestureConfig));
+    // tslint:disable-next-line: max-classes-per-file
+    var SlidersNgContentLibModule = /** @class */ (function () {
+        function SlidersNgContentLibModule() {
+        }
+        SlidersNgContentLibModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [SlidersNgContentLibComponent],
+                        imports: [
+                            common.CommonModule,
+                            router.RouterModule,
+                            NavigationModule,
+                            ImageResponsiveModule,
+                        ],
+                        exports: [SlidersNgContentLibComponent],
+                        entryComponents: [SlidersNgContentLibComponent],
+                        providers: [
+                            {
+                                provide: platformBrowser.HAMMER_GESTURE_CONFIG,
+                                useClass: MyHammerConfig$1,
+                            },
+                        ],
+                    },] }
+        ];
+        return SlidersNgContentLibModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ScrollableItemModule = /** @class */ (function () {
+        function ScrollableItemModule() {
+        }
+        ScrollableItemModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [ScrollableItemDirective],
+                        imports: [
+                            common.CommonModule,
+                        ],
+                        exports: [ScrollableItemDirective],
+                    },] }
+        ];
+        return ScrollableItemModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CbpPlanModule = /** @class */ (function () {
+        function CbpPlanModule() {
+        }
+        CbpPlanModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [CbpPlanComponent],
+                        imports: [
+                            common.CommonModule,
+                            SkeletonLoaderLibModule,
+                            material.MatIconModule,
+                            ScrollableItemModule,
+                            SlidersNgContentLibModule,
+                        ],
+                        exports: [CbpPlanComponent]
+                    },] }
+        ];
+        return CbpPlanModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ConsumptionModule = /** @class */ (function () {
+        function ConsumptionModule() {
+        }
+        ConsumptionModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [ConsumptionComponent,],
+                        imports: [
+                            ContentStripWithTabsLibModule,
+                            SlidersLibModule
+                        ],
+                        exports: [ConsumptionComponent,
+                            ContentStripWithTabsLibModule,
+                            SlidersLibModule,
+                            DataPointsModule,
+                            CalenderModule,
+                            CommonStripModule,
+                            AnnouncementsModule,
+                            TopLearnersModule,
+                            CbpPlanModule,
+                        ],
+                    },] }
+        ];
+        return ConsumptionModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @type {?} */
+    var ROOT_WIDGET_CONFIG = {
+        card: {
+            _type: 'cardLib',
+            cardResource: 'cardContentLib'
+        },
+    };
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var NsCardContent$1;
+    (function (NsCardContent) {
+        /**
+         * @record
+         */
+        function ICard() { }
+        NsCardContent.ICard = ICard;
+        if (false) {
+            /** @type {?} */
+            ICard.prototype.content;
+            /** @type {?} */
+            ICard.prototype.cardSubType;
+            /** @type {?} */
+            ICard.prototype.context;
+            /** @type {?|undefined} */
+            ICard.prototype.intranetMode;
+            /** @type {?|undefined} */
+            ICard.prototype.deletedMode;
+            /** @type {?|undefined} */
+            ICard.prototype.likes;
+            /** @type {?|undefined} */
+            ICard.prototype.contentTags;
+            /** @type {?} */
+            ICard.prototype.stateData;
+            /** @type {?|undefined} */
+            ICard.prototype.cardCustomeClass;
+        }
+        /**
+         * @record
+         */
+        function IContentTags() { }
+        NsCardContent.IContentTags = IContentTags;
+        if (false) {
+            /** @type {?|undefined} */
+            IContentTags.prototype.daysSpan;
+            /** @type {?|undefined} */
+            IContentTags.prototype.excludeContentType;
+            /** @type {?|undefined} */
+            IContentTags.prototype.excludeMimeType;
+            /** @type {?} */
+            IContentTags.prototype.tag;
+            /** @type {?|undefined} */
+            IContentTags.prototype.criteriaField;
+        }
+        var EContentStatus;
+        (function (EContentStatus) {
+            EContentStatus["LIVE"] = "Live";
+            EContentStatus["EXPIRED"] = "Expired";
+            EContentStatus["DELETED"] = "Deleted";
+            EContentStatus["MARK_FOR_DELETION"] = "MarkedForDeletion";
+        })(EContentStatus = NsCardContent.EContentStatus || (NsCardContent.EContentStatus = {}));
+        var ACBPConst;
+        (function (ACBPConst) {
+            ACBPConst["UPCOMING"] = "upcoming";
+            ACBPConst["ALL"] = "All";
+            ACBPConst["OVERDUE"] = "overdue";
+            ACBPConst["SUCCESS"] = "success";
+        })(ACBPConst = NsCardContent.ACBPConst || (NsCardContent.ACBPConst = {}));
+        var IGOTConst;
+        (function (IGOTConst) {
+            IGOTConst["COMPETENCIES"] = "competencies_v5";
+            IGOTConst["RETIRED"] = "Retired";
+        })(IGOTConst = NsCardContent.IGOTConst || (NsCardContent.IGOTConst = {}));
+    })(NsCardContent$1 || (NsCardContent$1 = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CardsComponent = /** @class */ (function (_super) {
+        __extends(CardsComponent, _super);
+        function CardsComponent(utilitySvc, contSvc, router) {
+            var _this = _super.call(this) || this;
+            _this.utilitySvc = utilitySvc;
+            _this.contSvc = contSvc;
+            _this.router = router;
+            _this.triggerTelemetry = new core.EventEmitter();
+            _this.isIntranetAllowedSettings = false;
+            return _this;
+        }
+        /**
+         * @return {?}
+         */
+        CardsComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.cbPlanInterval = setInterval((/**
+             * @return {?}
+             */
+            function () {
+                _this.getCbPlanData();
+            }), 1000);
+            this.enrollInterval = setInterval((/**
+             * @return {?}
+             */
+            function () {
+                _this.getEnrollmentData();
+                // tslint:disable-next-line
+            }), 1000);
+        };
+        Object.defineProperty(CardsComponent.prototype, "isLiveOrMarkForDeletion", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                if (!this.widgetData.content.status ||
+                    this.widgetData.content.status === 'Live' ||
+                    this.widgetData.content.status === 'MarkedForDeletion') {
+                    return true;
+                }
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CardsComponent.prototype, "showIntranetContent", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                if (this.widgetData.content.isInIntranet && this.utilitySvc.isMobile) {
+                    return !this.isIntranetAllowedSettings;
+                }
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {?} content
+         * @return {?}
+         */
+        CardsComponent.prototype.getRedirectUrlData = /**
+         * @param {?} content
+         * @return {?}
+         */
+        function (content) {
+            return __awaiter(this, void 0, void 0, function () {
+                var urlData;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!content.externalId) return [3 /*break*/, 1];
+                            this.router.navigate(["app/toc/ext/" + content.contentId]);
+                            return [3 /*break*/, 3];
+                        case 1: return [4 /*yield*/, this.contSvc.getResourseLink(content)];
+                        case 2:
+                            urlData = _a.sent();
+                            this.router.navigate([urlData.url], {
+                                queryParams: urlData.queryParams
+                            });
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * @return {?}
+         */
+        CardsComponent.prototype.getCbPlanData = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var cbpList = {};
+            if (localStorage.getItem('cbpData')) {
+                /** @type {?} */
+                var cbpListArr = JSON.parse(localStorage.getItem('cbpData') || '');
+                if (cbpListArr && cbpListArr.length) {
+                    cbpListArr.forEach((/**
+                     * @param {?} data
+                     * @return {?}
+                     */
+                    function (data) {
+                        cbpList[data.identifier] = data;
+                    }));
+                }
+                this.cbPlanMapData = cbpList;
+                // this.karmaPointLoading = false
+                clearInterval(this.cbPlanInterval);
+            }
+        };
+        /**
+         * @return {?}
+         */
+        CardsComponent.prototype.getEnrollmentData = /**
+         * @return {?}
+         */
+        function () {
+            if (localStorage.getItem('enrollmentMapData')) {
+                this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
+                clearInterval(this.enrollInterval);
+            }
+        };
+        /**
+         * @param {?} data
+         * @return {?}
+         */
+        CardsComponent.prototype.raiseCardClick = /**
+         * @param {?} data
+         * @return {?}
+         */
+        function (data) {
+            this.triggerTelemetry.emit(data);
+        };
+        CardsComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-cards',
+                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" \n  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" [enrollmentMapData]=\"enrollmentMapData\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n<ng-template #cardProvider>\n  <sb-uic-provider-card  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n  <sb-uic-provider-card  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n",
+                        styles: [""]
+                    }] }
+        ];
+        /** @nocollapse */
+        CardsComponent.ctorParameters = function () { return [
+            { type: utilsV2.UtilityService },
+            { type: WidgetContentService },
+            { type: router.Router }
+        ]; };
+        CardsComponent.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            triggerTelemetry: [{ type: core.Output }]
+        };
+        return CardsComponent;
+    }(resolverV2.WidgetBaseComponent));
+    if (false) {
+        /** @type {?} */
+        CardsComponent.prototype.widgetData;
+        /** @type {?} */
+        CardsComponent.prototype.triggerTelemetry;
+        /** @type {?} */
+        CardsComponent.prototype.isIntranetAllowedSettings;
+        /** @type {?} */
+        CardsComponent.prototype.cbPlanMapData;
+        /** @type {?} */
+        CardsComponent.prototype.cbPlanInterval;
+        /** @type {?} */
+        CardsComponent.prototype.enrollInterval;
+        /** @type {?} */
+        CardsComponent.prototype.enrollmentMapData;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardsComponent.prototype.utilitySvc;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardsComponent.prototype.contSvc;
+        /** @type {?} */
+        CardsComponent.prototype.router;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CardResourceComponent = /** @class */ (function (_super) {
+        __extends(CardResourceComponent, _super);
+        function CardResourceComponent() {
+            return _super.call(this) || this;
+        }
+        /**
+         * @return {?}
+         */
+        CardResourceComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        CardResourceComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'ws-cb-widget-card-resource',
+                        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",
+                        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-all;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}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        CardResourceComponent.ctorParameters = function () { return []; };
+        CardResourceComponent.propDecorators = {
+            widgetData: [{ type: core.Input }]
+        };
+        return CardResourceComponent;
+    }(resolverV2.WidgetBaseComponent));
+    if (false) {
+        /** @type {?} */
+        CardResourceComponent.prototype.widgetData;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CardPortraitComponent = /** @class */ (function () {
+        function CardPortraitComponent(snackBar, translate, langtranslations, configSvc, contSvc) {
+            var _this = this;
+            this.snackBar = snackBar;
+            this.translate = translate;
+            this.langtranslations = langtranslations;
+            this.configSvc = configSvc;
+            this.contSvc = contSvc;
+            this.isCardLoading = false;
+            this.contentData = new core.EventEmitter();
+            this.isCardFlipped = false;
+            this.acbpConstants = NsCardContent$1.ACBPConst;
+            this.showFlip = false;
+            this.widgetType = 'df';
+            this.widgetSubType = 'sdf';
+            this.langtranslations.languageSelectedObservable.subscribe((/**
+             * @return {?}
+             */
+            function () {
+                if (localStorage.getItem('websiteLanguage')) {
+                    _this.translate.setDefaultLang('en');
+                    /** @type {?} */
+                    var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                    _this.translate.use(lang);
+                }
+            }));
+        }
+        /**
+         * @return {?}
+         */
+        CardPortraitComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var instanceConfig = this.configSvc.instanceConfig;
+            if (instanceConfig) {
+                this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+                this.sourceLogos = instanceConfig.sources;
+                this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
+            }
+            else {
+                this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+                this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+            }
+        };
+        /**
+         * @return {?}
+         */
+        CardPortraitComponent.prototype.showSnackbar = /**
+         * @return {?}
+         */
+        function () {
+            if (this.showIntranetContent) {
+                this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
+            }
+            else if (!this.isLiveOrMarkForDeletion) {
+                this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
+            }
+        };
+        /**
+         * @param {?} contentData
+         * @return {?}
+         */
+        CardPortraitComponent.prototype.getRedirectUrlData = /**
+         * @param {?} contentData
+         * @return {?}
+         */
+        function (contentData) {
+            // for telemetry
+            if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
+                contentData['typeOfTelemetry'] = this.widgetData.context.pageSection;
+            }
+            this.contSvc.changeTelemetryData(contentData);
+            // for redirection
+            this.contentData.emit(contentData);
+        };
+        CardPortraitComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-card-portrait',
+                        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&nbsp; {{ (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>",
+                        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-all;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}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        CardPortraitComponent.ctorParameters = function () { return [
+            { type: material.MatSnackBar },
+            { type: core$1.TranslateService },
+            { type: MultilingualTranslationsService },
+            { type: utilsV2.ConfigurationsService },
+            { type: WidgetContentService }
+        ]; };
+        CardPortraitComponent.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            isLiveOrMarkForDeletion: [{ type: core.Input }],
+            showIntranetContent: [{ type: core.Input }],
+            isIntranetAllowedSettings: [{ type: core.Input }],
+            isCardLoading: [{ type: core.Input }],
+            contentData: [{ type: core.Output }],
+            cbPlanMapData: [{ type: core.Input }]
+        };
+        return CardPortraitComponent;
+    }());
+    if (false) {
+        /** @type {?} */
+        CardPortraitComponent.prototype.widgetData;
+        /** @type {?} */
+        CardPortraitComponent.prototype.isLiveOrMarkForDeletion;
+        /** @type {?} */
+        CardPortraitComponent.prototype.showIntranetContent;
+        /** @type {?} */
+        CardPortraitComponent.prototype.isIntranetAllowedSettings;
+        /** @type {?} */
+        CardPortraitComponent.prototype.isCardLoading;
+        /** @type {?} */
+        CardPortraitComponent.prototype.contentData;
+        /** @type {?} */
+        CardPortraitComponent.prototype.cbPlanMapData;
+        /** @type {?} */
+        CardPortraitComponent.prototype.isCardFlipped;
+        /** @type {?} */
+        CardPortraitComponent.prototype.acbpConstants;
+        /** @type {?} */
+        CardPortraitComponent.prototype.defaultThumbnail;
+        /** @type {?} */
+        CardPortraitComponent.prototype.sourceLogos;
+        /** @type {?} */
+        CardPortraitComponent.prototype.defaultSLogo;
+        /** @type {?} */
+        CardPortraitComponent.prototype.showFlip;
+        /** @type {?} */
+        CardPortraitComponent.prototype.widgetType;
+        /** @type {?} */
+        CardPortraitComponent.prototype.widgetSubType;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardPortraitComponent.prototype.snackBar;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardPortraitComponent.prototype.translate;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardPortraitComponent.prototype.langtranslations;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardPortraitComponent.prototype.configSvc;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardPortraitComponent.prototype.contSvc;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PipePublicURL = /** @class */ (function () {
+        function PipePublicURL(environment) {
+            this.environment = environment;
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        PipePublicURL.prototype.transform = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            /** @type {?} */
+            var mainUrl = value && value.split('/content').pop() || '';
+            /** @type {?} */
+            var finalURL = this.environment.contentHost + "/" + this.environment.contentBucket + "/content" + mainUrl;
+            return value ? finalURL : '';
+        };
+        PipePublicURL.decorators = [
+            { type: core.Pipe, args: [{
+                        name: 'pipePublicURL',
+                    },] }
+        ];
+        /** @nocollapse */
+        PipePublicURL.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: ['environment',] }] }
+        ]; };
+        return PipePublicURL;
+    }());
+    if (false) {
+        /** @type {?} */
+        PipePublicURL.prototype.environment;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PipePublicURLModule = /** @class */ (function () {
+        function PipePublicURLModule() {
+        }
+        PipePublicURLModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [PipePublicURL],
+                        imports: [
+                            common.CommonModule,
+                        ],
+                        exports: [PipePublicURL],
+                    },] }
         ];
         return PipePublicURLModule;
     }());
@@ -9671,18 +10648,18 @@
                      * to Print HH:mm:ss
                      * @type {?}
                      */
-                    var duration2 = moment$1.duration(data, 'seconds');
+                    var duration2 = moment$2.duration(data, 'seconds');
                     /** @type {?} */
-                    var resultstring = moment$1.utc(duration2.asMilliseconds()).format('HH:mm:ss');
+                    var resultstring = moment$2.utc(duration2.asMilliseconds()).format('HH:mm:ss');
                     return resultstring;
                 case 'hms2M': /**to Print mm:ss */
                     /**
                      * to Print mm:ss
                      * @type {?}
                      */
-                    var duration2H = moment$1.duration(data, 'seconds');
+                    var duration2H = moment$2.duration(data, 'seconds');
                     /** @type {?} */
-                    var resultstring2H = moment$1.utc(duration2H.asMilliseconds()).format('mm:ss');
+                    var resultstring2H = moment$2.utc(duration2H.asMilliseconds()).format('mm:ss');
                     return resultstring2H;
                 case 'hour':
                     if (h === 0) {
@@ -9698,7 +10675,7 @@
                 case 'day':
                     if (h > 24) {
                         /** @type {?} */
-                        var duration3 = moment$1.duration(data, 'seconds');
+                        var duration3 = moment$2.duration(data, 'seconds');
                         return duration3.days() + " day(s)";
                     }
                     return this.hmsCalculation(h, m, s, duration$1, type);
@@ -10229,7 +11206,7 @@
             { type: core.Component, args: [{
                         selector: 'sb-uic-card-wide',
                         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&nbsp; {{ (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",
-                        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}}"]
+                        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}}"]
                     }] }
         ];
         /** @nocollapse */
@@ -15714,671 +16691,1035 @@
          * @param {?} avg
          * @return {?}
          */
-        RatingService.prototype.getRatingIcon = /**
+        RatingService.prototype.getRatingIcon = /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        function (ratingIndex, avg) {
+            if (avg) {
+                /** @type {?} */
+                var avgRating = avg;
+                /** @type {?} */
+                var ratingFloor = Math.floor(avgRating)
+                // const difference =  avgRating - ratingIndex
+                ;
+                // const difference =  avgRating - ratingIndex
+                if (ratingIndex <= ratingFloor) {
+                    return 'star';
+                }
+                if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
+                    return 'star_half';
+                }
+            }
+            return 'star';
+        };
+        /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        RatingService.prototype.getRatingIconClass = /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        function (ratingIndex, avg) {
+            if (avg) {
+                /** @type {?} */
+                var avgRating = avg;
+                /** @type {?} */
+                var ratingFloor = Math.floor(avgRating);
+                if (ratingIndex <= ratingFloor) {
+                    return true;
+                }
+                if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
+                    return true;
+                }
+                if (ratingFloor === ratingIndex - 1 && avgRating % 1 > 0.71) {
+                    return true;
+                }
+                if (ratingFloor === ratingIndex - 1 && avgRating % 1 < 0.29) {
+                    return false;
+                }
+            }
+            return false;
+        };
+        /**
+         * @param {?} contentId
+         * @param {?} userID
+         * @return {?}
+         */
+        RatingService.prototype.getAuthorReply = /**
+         * @param {?} contentId
+         * @param {?} userID
+         * @return {?}
+         */
+        function (contentId, userID) {
+            return this.http.get(API_END_POINTS$3.GET_AUTHOR_REPLY(contentId, userID));
+        };
+        RatingService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root',
+                    },] }
+        ];
+        /** @nocollapse */
+        RatingService.ctorParameters = function () { return [
+            { type: http.HttpClient }
+        ]; };
+        /** @nocollapse */ RatingService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function RatingService_Factory() { return new RatingService(core.ɵɵinject(http.HttpClient)); }, token: RatingService, providedIn: "root" });
+        return RatingService;
+    }());
+    if (false) {
+        /** @type {?} */
+        RatingService.prototype.http;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @type {?} */
+    var API_END_POINTS$4 = {
+        TOP_REVIEWS: "/apis/proxies/v8/ratings/v1/topReviews"
+    };
+    var UserContentRatingLibService = /** @class */ (function () {
+        function UserContentRatingLibService(http) {
+            this.http = http;
+        }
+        /**
+         * @param {?} doId
+         * @return {?}
+         */
+        UserContentRatingLibService.prototype.fetchTopReviews = /**
+         * @param {?} doId
+         * @return {?}
+         */
+        function (doId) {
+            return this.http.get(API_END_POINTS$4.TOP_REVIEWS + "/" + doId);
+        };
+        UserContentRatingLibService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        UserContentRatingLibService.ctorParameters = function () { return [
+            { type: http.HttpClient }
+        ]; };
+        /** @nocollapse */ UserContentRatingLibService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(core.ɵɵinject(http.HttpClient)); }, token: UserContentRatingLibService, providedIn: "root" });
+        return UserContentRatingLibService;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        UserContentRatingLibService.prototype.http;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var UserContentRatingLibComponent = /** @class */ (function () {
+        function UserContentRatingLibComponent(ratingService, userRatingSvc) {
+            this.ratingService = ratingService;
+            this.userRatingSvc = userRatingSvc;
+            this.currentIndex = 0;
+            this.providerId = '';
+            this.formData = '';
+            this.emptyResponse = new core.EventEmitter();
+            this.styleData = {};
+            this.contentdata = [];
+        }
+        /**
+         * @return {?}
+         */
+        UserContentRatingLibComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
+            this.getTopReviews();
+        };
+        /**
+         * @return {?}
+         */
+        UserContentRatingLibComponent.prototype.getTopReviews = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.contentdata = [];
+            this.userRatingSvc.fetchTopReviews(this.providerId).subscribe((/**
+             * @param {?} response
+             * @return {?}
+             */
+            function (response) {
+                if (response && response.result && response.result.content.length) {
+                    response.result.content.forEach((/**
+                     * @param {?} contentEle
+                     * @return {?}
+                     */
+                    function (contentEle) {
+                        /** @type {?} */
+                        var localData = {};
+                        localData['content'] = contentEle.contentInfo;
+                        localData['rating'] = contentEle.rating;
+                        localData['review'] = contentEle.review;
+                        localData['userDetails'] = contentEle.userDetails;
+                        localData['cardSubType'] = "card-wide-lib";
+                        localData['cardCustomeClass'] = "";
+                        _this.contentdata.push(localData);
+                    }));
+                }
+                else {
+                    _this.emptyResponse.emit(true);
+                }
+            }), (/**
+             * @param {?} _error
+             * @return {?}
+             */
+            function (_error) {
+                _this.emptyResponse.emit(true);
+            }));
+        };
+        /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        UserContentRatingLibComponent.prototype.getRatingIcon = /**
          * @param {?} ratingIndex
          * @param {?} avg
          * @return {?}
          */
         function (ratingIndex, avg) {
-            if (avg) {
-                /** @type {?} */
-                var avgRating = avg;
-                /** @type {?} */
-                var ratingFloor = Math.floor(avgRating)
-                // const difference =  avgRating - ratingIndex
-                ;
-                // const difference =  avgRating - ratingIndex
-                if (ratingIndex <= ratingFloor) {
-                    return 'star';
-                }
-                if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
-                    return 'star_half';
-                }
-            }
-            return 'star';
+            return this.ratingService.getRatingIcon(ratingIndex, avg);
         };
         /**
          * @param {?} ratingIndex
          * @param {?} avg
          * @return {?}
          */
-        RatingService.prototype.getRatingIconClass = /**
+        UserContentRatingLibComponent.prototype.getRatingIconClass = /**
          * @param {?} ratingIndex
          * @param {?} avg
          * @return {?}
          */
         function (ratingIndex, avg) {
-            if (avg) {
-                /** @type {?} */
-                var avgRating = avg;
-                /** @type {?} */
-                var ratingFloor = Math.floor(avgRating);
-                if (ratingIndex <= ratingFloor) {
-                    return true;
-                }
-                if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
-                    return true;
-                }
-                if (ratingFloor === ratingIndex - 1 && avgRating % 1 > 0.71) {
-                    return true;
-                }
-                if (ratingFloor === ratingIndex - 1 && avgRating % 1 < 0.29) {
-                    return false;
-                }
-            }
-            return false;
+            return this.ratingService.getRatingIconClass(ratingIndex, avg);
         };
         /**
-         * @param {?} contentId
-         * @param {?} userID
+         * @param {?} indexValue
          * @return {?}
          */
-        RatingService.prototype.getAuthorReply = /**
-         * @param {?} contentId
-         * @param {?} userID
+        UserContentRatingLibComponent.prototype.getCurrentIndex = /**
+         * @param {?} indexValue
          * @return {?}
          */
-        function (contentId, userID) {
-            return this.http.get(API_END_POINTS$3.GET_AUTHOR_REPLY(contentId, userID));
+        function (indexValue) {
+            this.currentIndex = indexValue;
+            this.handleScrollClick(indexValue);
         };
-        RatingService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root',
-                    },] }
+        /**
+         * @param {?} dataValue
+         * @return {?}
+         */
+        UserContentRatingLibComponent.prototype.handleScrollClick = /**
+         * @param {?} dataValue
+         * @return {?}
+         */
+        function (dataValue) {
+            /** @type {?} */
+            var item = this.scrollableItems.find((/**
+             * @param {?} x
+             * @return {?}
+             */
+            function (x) { return x.key === dataValue; }));
+            item.scrollIntoView("nearest");
+        };
+        UserContentRatingLibComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-user-content-rating',
+                        template: "<ng-container *ngIf=\"contentdata.length\">\n    <div class=\"user-rating-section\">\n        <sb-uic-sliders-ng-content [title]=\"'providerName'\"  [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n            <div sliderbody>\n                <div class=\"flex justify-start md:justify-center users-block\">\n                    <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n                        <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n                        [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n                            <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                            </sb-uic-avatar-photo>\n                        </div>\n                    </ng-container>\n                </div>\n                <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                    <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                        <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8 pb-5\">\n                            <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n                        </div>\n                        <div class=\"title-border-v2\"></div>\n                        <p class=\"userName w-full mb-4 pt-6\">{{ratingData?.userDetails?.firstName}}</p>\n                        <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                            <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                                [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n                                *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                                {{ getRatingIcon(rating, ratingData?.rating) }}\n                            </mat-icon>\n                        </div>\n                        <p class=\"content-feedback w-full mb-4 px-4 md:px-8\">{{ratingData?.review}}</p>\n                    </div>\n                </div>\n            </div>\n        </sb-uic-sliders-ng-content>\n    </div>\n</ng-container>\n\n",
+                        styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:10px!important;width:100%}.title-border-v2{margin:10px;width:300px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.user-ratting-wrapper{border:2px solid #f3962f;border-radius:15px;padding:30px 0;background:linear-gradient(111.16deg,rgba(243,150,47,.24) 9.09%,rgba(255,255,255,0) 74.81%)}.user-rating-section ::ng-deep.prev{margin-left:-50px;top:59%}.user-rating-section ::ng-deep.next{margin-right:-50px;top:59%}.user-rating-section ::ng-deep.dots-container{display:none!important}@media screen and (max-width:768px){.user-rating-section ::ng-deep.next{margin-right:-16px;top:59%}.user-rating-section .users-block{width:90%}.user-rating-section ::ng-deep.widget-card-content-new{margin:0 15px}.user-rating-section .user-ratting-wrapper{padding:15px 0}.user-rating-section ::ng-deep.dots-container{display:block!important}.user-rating-section ::ng-deep.banner-meta{bottom:-12px}}"]
+                    }] }
         ];
         /** @nocollapse */
-        RatingService.ctorParameters = function () { return [
-            { type: http.HttpClient }
+        UserContentRatingLibComponent.ctorParameters = function () { return [
+            { type: RatingService },
+            { type: UserContentRatingLibService }
         ]; };
-        /** @nocollapse */ RatingService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function RatingService_Factory() { return new RatingService(core.ɵɵinject(http.HttpClient)); }, token: RatingService, providedIn: "root" });
-        return RatingService;
+        UserContentRatingLibComponent.propDecorators = {
+            providerId: [{ type: core.Input }],
+            formData: [{ type: core.Input }],
+            emptyResponse: [{ type: core.Output }],
+            scrollableItems: [{ type: core.ViewChildren, args: [ScrollableItemDirective,] }]
+        };
+        return UserContentRatingLibComponent;
     }());
     if (false) {
         /** @type {?} */
-        RatingService.prototype.http;
+        UserContentRatingLibComponent.prototype.currentIndex;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.providerId;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.formData;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.emptyResponse;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.styleData;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.contentdata;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.scrollableItems;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.ratingService;
+        /** @type {?} */
+        UserContentRatingLibComponent.prototype.userRatingSvc;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var ScrollableItemDirective = /** @class */ (function () {
-        function ScrollableItemDirective(el) {
-            this.el = el;
+    var UserContentRatingLibModule = /** @class */ (function () {
+        function UserContentRatingLibModule() {
         }
-        /**
-         * @param {?} blockValue
-         * @return {?}
-         */
-        ScrollableItemDirective.prototype.scrollIntoView = /**
-         * @param {?} blockValue
-         * @return {?}
-         */
-        function (blockValue) {
-            this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
-        };
-        ScrollableItemDirective.decorators = [
-            { type: core.Directive, args: [{
-                        selector: '[sbUicScrollableItem]'
+        UserContentRatingLibModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [UserContentRatingLibComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            material.MatChipsModule,
+                            SkeletonLoaderLibModule,
+                            SlidersLibModule,
+                            CardsModule,
+                            AvatarPhotoLibModule,
+                            SlidersNgContentLibModule,
+                            ScrollableItemModule
+                        ],
+                        exports: [UserContentRatingLibComponent],
+                        providers: [RatingService, UserContentRatingLibService],
+                        schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
                     },] }
         ];
-        /** @nocollapse */
-        ScrollableItemDirective.ctorParameters = function () { return [
-            { type: core.ElementRef }
-        ]; };
-        ScrollableItemDirective.propDecorators = {
-            key: [{ type: core.Input, args: ['sbUicScrollableItem',] }]
-        };
-        return ScrollableItemDirective;
+        return UserContentRatingLibModule;
     }());
-    if (false) {
-        /** @type {?} */
-        ScrollableItemDirective.prototype.key;
-        /**
-         * @type {?}
-         * @private
-         */
-        ScrollableItemDirective.prototype.el;
-    }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /** @type {?} */
-    var API_END_POINTS$4 = {
-        TOP_REVIEWS: "/apis/proxies/v8/ratings/v1/topReviews"
-    };
-    var UserContentRatingLibService = /** @class */ (function () {
-        function UserContentRatingLibService(http) {
-            this.http = http;
+    var MdoChannelV1Component = /** @class */ (function () {
+        function MdoChannelV1Component() {
         }
         /**
-         * @param {?} doId
          * @return {?}
          */
-        UserContentRatingLibService.prototype.fetchTopReviews = /**
-         * @param {?} doId
+        MdoChannelV1Component.prototype.ngOnInit = /**
          * @return {?}
          */
-        function (doId) {
-            return this.http.get(API_END_POINTS$4.TOP_REVIEWS + "/" + doId);
+        function () {
         };
-        UserContentRatingLibService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
+        MdoChannelV1Component.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-mdo-channel-v1',
+                        template: "<p>mdo-channel-v1 works!</p>\n",
+                        styles: [""]
+                    }] }
         ];
         /** @nocollapse */
-        UserContentRatingLibService.ctorParameters = function () { return [
-            { type: http.HttpClient }
-        ]; };
-        /** @nocollapse */ UserContentRatingLibService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(core.ɵɵinject(http.HttpClient)); }, token: UserContentRatingLibService, providedIn: "root" });
-        return UserContentRatingLibService;
+        MdoChannelV1Component.ctorParameters = function () { return []; };
+        return MdoChannelV1Component;
     }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        UserContentRatingLibService.prototype.http;
-    }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var UserContentRatingLibComponent = /** @class */ (function () {
-        function UserContentRatingLibComponent(ratingService, userRatingSvc) {
-            this.ratingService = ratingService;
-            this.userRatingSvc = userRatingSvc;
-            this.currentIndex = 0;
-            this.providerId = '';
-            this.formData = '';
-            this.emptyResponse = new core.EventEmitter();
-            this.styleData = {};
-            this.contentdata = [];
+    var MdoChannelV2Component = /** @class */ (function () {
+        function MdoChannelV2Component(route, router, eventSvc, translate, langtranslations) {
+            var _this = this;
+            this.route = route;
+            this.router = router;
+            this.eventSvc = eventSvc;
+            this.translate = translate;
+            this.langtranslations = langtranslations;
+            this.sectionList = [];
+            this.channnelName = '';
+            this.orgId = '';
+            this.selectedIndex = 0;
+            this.hideCompetencyBlock = false;
+            this.contentTabEmptyResponseCount = 0;
+            this.titles = [
+                { title: 'Learn', url: '/page/learn', icon: 'school', disableTranslate: false },
+                {
+                    title: "MDO Channel",
+                    url: "/app/learn/mdo-channels/all-channels",
+                    icon: '', disableTranslate: true,
+                },
+            ];
+            this.showModal = false;
+            this.descriptionMaxLength = 500;
+            this.isTelemetryRaised = false;
+            if (this.route.snapshot.data && this.route.snapshot.data.formData
+                && this.route.snapshot.data.formData.data
+                && this.route.snapshot.data.formData.data.result
+                && this.route.snapshot.data.formData.data.result.form
+                && this.route.snapshot.data.formData.data.result.form.data
+                && this.route.snapshot.data.formData.data.result.form.data.sectionList) {
+                this.sectionList = this.route.snapshot.data.formData.data.result.form.data.sectionList;
+            }
+            this.langtranslations.languageSelectedObservable.subscribe((/**
+             * @return {?}
+             */
+            function () {
+                if (localStorage.getItem('websiteLanguage')) {
+                    _this.translate.setDefaultLang('en');
+                    /** @type {?} */
+                    var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                    _this.translate.use(lang);
+                }
+            }));
         }
         /**
          * @return {?}
          */
-        UserContentRatingLibComponent.prototype.ngOnInit = /**
+        MdoChannelV2Component.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.route.params.subscribe((/**
+             * @param {?} params
+             * @return {?}
+             */
+            function (params) {
+                _this.channnelName = params['channel'];
+                _this.orgId = params['orgId'];
+                _this.titles.push({
+                    title: _this.channnelName, icon: '', url: 'none', disableTranslate: true,
+                });
+            }));
+        };
+        /**
+         * @param {?} tabEvent
+         * @return {?}
+         */
+        MdoChannelV2Component.prototype.tabClicked = /**
+         * @param {?} tabEvent
+         * @return {?}
+         */
+        function (tabEvent) {
+            this.raiseTelemetry(tabEvent.tab.textLabel + " tab");
+        };
+        /**
+         * @param {?} event
+         * @param {?} contentStripData
+         * @return {?}
+         */
+        MdoChannelV2Component.prototype.hideContentStrip = /**
+         * @param {?} event
+         * @param {?} contentStripData
+         * @return {?}
+         */
+        function (event, contentStripData) {
+            if (event) {
+                contentStripData['hideSection'] = true;
+                this.contentTabEmptyResponseCount = this.contentTabEmptyResponseCount + 1;
+                // if(this.contentTabEmptyResponseCount === 4 ) {
+                //   this.selectedIndex = 1
+                // }
+            }
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        MdoChannelV2Component.prototype.triggerOpenDialog = /**
+         * @param {?} event
          * @return {?}
          */
-        function () {
-            this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
-            this.getTopReviews();
+        function (event) {
+            if (event) {
+                this.showModal = true;
+                document.body.style.overflow = 'hidden';
+            }
+            this.raiseTelemetry('btn open key annoucements');
         };
         /**
          * @return {?}
          */
-        UserContentRatingLibComponent.prototype.getTopReviews = /**
+        MdoChannelV2Component.prototype.onClose = /**
          * @return {?}
          */
         function () {
-            var _this = this;
-            this.contentdata = [];
-            this.userRatingSvc.fetchTopReviews(this.providerId).subscribe((/**
-             * @param {?} response
-             * @return {?}
-             */
-            function (response) {
-                if (response && response.result && response.result.content.length) {
-                    response.result.content.forEach((/**
-                     * @param {?} contentEle
-                     * @return {?}
-                     */
-                    function (contentEle) {
-                        /** @type {?} */
-                        var localData = {};
-                        localData['content'] = contentEle.contentInfo;
-                        localData['rating'] = contentEle.rating;
-                        localData['review'] = contentEle.review;
-                        localData['userDetails'] = contentEle.userDetails;
-                        localData['cardSubType'] = "card-wide-lib";
-                        localData['cardCustomeClass'] = "";
-                        _this.contentdata.push(localData);
-                    }));
-                }
-                else {
-                    _this.emptyResponse.emit(true);
-                }
-            }), (/**
-             * @param {?} _error
-             * @return {?}
-             */
-            function (_error) {
-                _this.emptyResponse.emit(true);
-            }));
+            this.showModal = false;
+            document.body.style.overflow = 'auto';
+            this.raiseTelemetry('btn close key annoucements');
         };
         /**
-         * @param {?} ratingIndex
-         * @param {?} avg
+         * @param {?} event
          * @return {?}
          */
-        UserContentRatingLibComponent.prototype.getRatingIcon = /**
-         * @param {?} ratingIndex
-         * @param {?} avg
+        MdoChannelV2Component.prototype.raiseTelemetryInteratEvent = /**
+         * @param {?} event
          * @return {?}
          */
-        function (ratingIndex, avg) {
-            return this.ratingService.getRatingIcon(ratingIndex, avg);
+        function (event) {
+            if (event && event.viewMoreUrl) {
+                this.raiseTelemetry(event.stripTitle + " " + event.viewMoreUrl.viewMoreText);
+            }
+            if (!this.isTelemetryRaised && event && !event.viewMoreUrl) {
+                this.eventSvc.raiseInteractTelemetry({
+                    type: 'click',
+                    subType: 'mdo-channel',
+                    id: lodash.kebabCase(event.typeOfTelemetry.toLocaleLowerCase()) + "-card",
+                }, {
+                    id: event.identifier,
+                    type: event.primaryCategory,
+                }, {
+                    pageIdExt: lodash.kebabCase(event.primaryCategory.toLocaleLowerCase()) + "-card",
+                    module: utilsV2.WsEvents.EnumTelemetrymodules.LEARN,
+                });
+                this.isTelemetryRaised = true;
+            }
         };
         /**
-         * @param {?} ratingIndex
-         * @param {?} avg
+         * @param {?} name
          * @return {?}
          */
-        UserContentRatingLibComponent.prototype.getRatingIconClass = /**
-         * @param {?} ratingIndex
-         * @param {?} avg
+        MdoChannelV2Component.prototype.raiseCompetencyTelemetry = /**
+         * @param {?} name
          * @return {?}
          */
-        function (ratingIndex, avg) {
-            return this.ratingService.getRatingIconClass(ratingIndex, avg);
+        function (name) {
+            this.raiseTelemetry(name + " core expertise");
         };
         /**
-         * @param {?} indexValue
+         * @param {?} name
          * @return {?}
          */
-        UserContentRatingLibComponent.prototype.getCurrentIndex = /**
-         * @param {?} indexValue
+        MdoChannelV2Component.prototype.raiseTelemetry = /**
+         * @param {?} name
          * @return {?}
          */
-        function (indexValue) {
-            this.currentIndex = indexValue;
-            this.handleScrollClick(indexValue);
+        function (name) {
+            this.eventSvc.raiseInteractTelemetry({
+                type: 'click',
+                subType: 'mdo-channel',
+                id: "" + lodash.kebabCase(name).toLocaleLowerCase(),
+            }, {}, {
+                module: utilsV2.WsEvents.EnumTelemetrymodules.LEARN,
+            });
         };
         /**
-         * @param {?} dataValue
+         * @param {?} event
          * @return {?}
          */
-        UserContentRatingLibComponent.prototype.handleScrollClick = /**
-         * @param {?} dataValue
+        MdoChannelV2Component.prototype.hideCompetency = /**
+         * @param {?} event
          * @return {?}
          */
-        function (dataValue) {
-            /** @type {?} */
-            var item = this.scrollableItems.find((/**
-             * @param {?} x
-             * @return {?}
-             */
-            function (x) { return x.key === dataValue; }));
-            item.scrollIntoView("nearest");
+        function (event) {
+            if (event) {
+                this.hideCompetencyBlock = true;
+            }
         };
-        UserContentRatingLibComponent.decorators = [
+        /**
+         * @param {?} _stripData
+         * @param {?} contentStrip
+         * @return {?}
+         */
+        MdoChannelV2Component.prototype.showAllContent = /**
+         * @param {?} _stripData
+         * @param {?} contentStrip
+         * @return {?}
+         */
+        function (_stripData, contentStrip) {
+            if (contentStrip && contentStrip.strips && contentStrip.strips.length) {
+                /** @type {?} */
+                var stripData = contentStrip.strips[0];
+                if (stripData && stripData.request) {
+                    delete (stripData['loaderWidgets']);
+                    this.router.navigate(["/app/learn/mdo-channels/" + this.channnelName + "/" + this.orgId + "/all-content"], { queryParams: { stripData: JSON.stringify(stripData) } });
+                }
+            }
+            else {
+                this.router.navigate(["/app/learn/browse-by/provider/" + this.channnelName + "/" + this.orgId + "/all-CBP"]);
+            }
+        };
+        MdoChannelV2Component.decorators = [
             { type: core.Component, args: [{
-                        selector: 'sb-uic-user-content-rating',
-                        template: "<ng-container *ngIf=\"contentdata.length\">\n    <sb-uic-sliders-ng-content [title]=\"'providerName'\"  [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n        <div sliderbody>\n            <div class=\"flex justify-start md:justify-center users-block mb-4 \">\n                <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n                    <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n                    [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n                        <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                        </sb-uic-avatar-photo>\n                    </div>\n                </ng-container>\n            </div>\n            <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                    <p class=\"userName w-full mb-4\">{{ratingData?.userDetails?.firstName}}</p>\n        \n                    <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                        <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                            [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n                            *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                            {{ getRatingIcon(rating, ratingData?.rating) }}\n                        </mat-icon>\n                    </div>\n                    <p class=\"content-feedback w-full mb-4 pl-0 pr-0 md:pl-12 md:pr-12 \">{{ratingData?.review}}</p>\n    \n                    <hr class=\"divider mb-4\">\n                    <p class=\"content-info w-full mb-4\">For The Content</p>\n                    <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8\">\n                        <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </sb-uic-sliders-ng-content>\n</ng-container>\n\n",
-                        styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:24px!important;width:100%}hr.divider{border:1px solid #f3972e;width:185px}"]
+                        selector: 'sb-uic-mdo-channel-v2',
+                        template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n    <div class=\"flex flex-col flex-1\">\n        <ng-container *ngIf=\"sectionList?.length\">\n            <ng-container *ngFor=\"let section of sectionList\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n                        <ng-container *ngFor=\"let column of section.column\">\n                            <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                                <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                    <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </section>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"hidden md:block\">\n        <div class=\"web-banner-background\">\n            <div class=\"flex sticky-logo-square\">\n            </div>\n            <div class=\"flex  items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n                                <div class=\"\">\n                                    <div class=\"flex items-center logo-square \">\n                                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                                    </div>\n                                    <h1  class=\" txt-ellipsis-2 break-words pt-10\"\n                                        [style.color]=\"data.titleColor\">{{data.title || channnelName}}</h1>\n                                    <p class=\"mat-body-1\" [style.color]=\"data.descriptionColor\">\n                                        {{data?.description | slice:0:descriptionMaxLength}}\n                                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                    </p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n                                <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        \n    </div>\n    <!-- top section m-site layout -->\n    <div class=\"block md:hidden\">\n        <div class=\"col-span-12\">\n            <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n                <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n            </div>\n        </div>\n        <div class=\"container px-4 flex flex-col mob-container\">\n            <div class=\"mr-4 logo-box-container\">\n                <div class=\"flex logo-box-square top mr-4\">\n                    <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                </div>\n            </div>\n            <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n                <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || channnelName}}</h1>\n                <p class=\"mat-body-2\">\n                    {{data?.description | slice:0:descriptionMaxLength}}\n                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                </p>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container metrics-section\" >\n            <div class=\"hidden md:block\">\n                <div class=\"metrics\"\n                    [ngStyle]=\"{'background': data?.metrics?.background}\">\n                    <sb-uic-data-points\n                        [providerId]=\"orgId\"\n                        [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\"\n                        [layoutType]=\"'singleFlexeRow'\"\n                        [pageLayout]=\"'mdo'\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n            <div class=\"block md:hidden  pt-14 px-4\">\n                <div class=\"mob-metrics mob-metrics-sec\">\n                    <sb-uic-data-points\n                        [providerId]=\"orgId\"\n                        [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\"\n                        [layoutType]=\"'singleRow'\"\n                        [pageLayout]=\"'mdo'\">\n                    </sb-uic-data-points>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #mainContent let-data=\"data\">\n    <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"container\">\n            <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n                <sb-uic-cbp-plan\n                    [layoutType]=\"'web'\"\n                    [mobileHeight]=\"false\"\n                    [fetchDataFromApi]=\"true\"\n                    [channelId]=\"orgId\"\n                    [objectData]=\"data?.cbpPlanSection?.data\">\n                </sb-uic-cbp-plan>\n            </div>\n            <div class=\"block md:hidden col-span-12 mt-6\">\n                <sb-uic-announcements\n                    [layoutType]=\"'mobile'\"\n                    (openDialog)=\"triggerOpenDialog($event)\"\n                    [objectData]=\"data?.announcementSection?.data\"\n                    [fetchDataFromApi]=\"false\"\n                    [channelId]=\"orgId\">\n                </sb-uic-announcements>\n                <div class=\"announcements-container\" *ngIf=\"showModal\">\n                    <div class=\"cursor-pointer close-share-dialog\">\n                        <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n                    </div>\n                    <div class=\"share-modal px-3 pt-8\">\n                        <sb-uic-announcements\n                            [layoutType]=\"'web'\"\n                            (openDialog)=\"triggerOpenDialog($event)\"\n                            [objectData]=\"data?.announcementSection?.data\"\n                            [mobileHeight]=\"true\"\n                            [fetchDataFromApi]=\"true\"\n                            [channelId]=\"orgId\">\n                        </sb-uic-announcements>\n                    </div>\n                </div>\n            </div>\n            <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n                    <!-- Tabs Section -->\n                    <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n                        [selectedIndex]=\"selectedIndex\" (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n                        <mat-tab label=\"Content\" >\n                            <ng-template mat-tab-label i18n>\n                                Learn\n                            </ng-template>\n                            <ng-container *ngIf=\"data.tabSection.contentTab.length === contentTabEmptyResponseCount\">\n                                <div class=\"flex justify-center w-full\">\n                                    <div class=\"margin-xl text-center\" >\n                                        <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                                            class=\"margin-top-l margin-bottom-s\">\n                                        <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <div class=\"padding-top-l \">\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                        <mat-tab label=\"Core Areas\">\n                            <ng-template mat-tab-label i18n>\n                                Competency\n                            </ng-template>\n                            <div>\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                    </mat-tab-group>\n                </div>\n                <div class=\"col-span-12 md:col-span-4\">\n                    <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n                        *ngIf=\"data?.cbpPlanSection?.data\">\n                        <div class=\"pt-4\">\n                            <sb-uic-cbp-plan\n                                [layoutType]=\"'web'\"\n                                [mobileHeight]=\"false\"\n                                [fetchDataFromApi]=\"true\"\n                                [channelId]=\"orgId\"\n                                [objectData]=\"data?.cbpPlanSection?.data\">\n                            </sb-uic-cbp-plan>\n                        </div>                    \n                    </div>\n                    <div class=\"hidden md:block\" \n                    *ngIf=\"data?.announcementSection?.data\">\n                    <div class=\"pt-4\">\n                        <sb-uic-announcements\n                            [layoutType]=\"'web'\"\n                            [mobileHeight]=\"false\"\n                            [fetchDataFromApi]=\"true\"\n                            [channelId]=\"orgId\"\n                            [objectData]=\"data?.announcementSection?.data\">\n                        </sb-uic-announcements>\n                    </div>                    \n                </div>\n                </div>               \n            </div>\n        </div>\n    </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n    <div class=\"flex  items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"w-full\">\n            Announcement Section -->\n            <!-- <h1>Announcement</h1>\n        </div>\n    </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay  let-data=\"data\">\n    <ng-container *ngIf=\"data?.length\">\n        <ng-container *ngFor=\"let section of data\">\n            <ng-container *ngIf=\"section?.enabled\">\n                <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n                    <ng-container *ngFor=\"let column of section.column\">\n                        <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                            <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n                                [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </section>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n    <div class=\"padding-top-l padding-bottom-l relative\"  [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock;else noData\">\n        <div class=\"w-full container-balanced\">\n            <p class=\"mat-body-1\">This section shows the list of top competencies users in this MDO are learning, based on the courses they've completed and enrolled in.</p>\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook-mdo\n                    [dynamicColor]=\"'#999999'\"\n                    [dynamicAlignPills]=\"'start'\"\n                    [cardDisplayCount]=\"2\"\n                    (emptyResponse)=\"hideCompetency($event)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n                    [objectData]=\"competency\"\n                    [providerId]=\"orgId\"\n                    >\n                </sb-uic-competency-passbook-mdo>\n            </div>\n        </div>\n        <!-- <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\"> -->\n    </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n    <ng-container *ngIf=\"!contentStrip?.hideSection\">\n        <div class=\"flex mb-8\">\n            <div class=\"w-full\">\n                <sb-uic-content-strip-with-tabs\n                    [emitViewAll]=\"true\"\n                    (viewAllResponse)=\"showAllContent($event, contentStrip)\"\n                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                    (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n                    [providerId]=\"orgId\"\n                    [widgetData]=\"contentStrip\"\n                    [channnelName]=\"channnelName\"\n                    >\n                </sb-uic-content-strip-with-tabs>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noData>\n        <div class=\"flex justify-center w-full\">\n            <div class=\"margin-xl text-center\" >\n                <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                    class=\"margin-top-l margin-bottom-s\">\n                <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n            </div>\n        </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container top-learners margin-bottom-l margin-top-l\">\n            <sb-uic-top-learners\n                [objectData]=\"data\"\n                [channnelName]=\"channnelName\"\n                [channelId]=\"orgId\">\n            </sb-uic-top-learners>\n        </div>\n    </div>\n</ng-template>",
+                        styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720698778795_MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:right;background-repeat:no-repeat}.sticky-logo-square{position:absolute;top:215px;justify-content:end;width:20.5%;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px}.logo-square{width:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:rgba(19,19,19,.6392156863);width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width:768px){.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]
                     }] }
         ];
         /** @nocollapse */
-        UserContentRatingLibComponent.ctorParameters = function () { return [
-            { type: RatingService },
-            { type: UserContentRatingLibService }
+        MdoChannelV2Component.ctorParameters = function () { return [
+            { type: router.ActivatedRoute },
+            { type: router.Router },
+            { type: utilsV2.EventService },
+            { type: core$1.TranslateService },
+            { type: utilsV2.MultilingualTranslationsService }
         ]; };
-        UserContentRatingLibComponent.propDecorators = {
-            providerId: [{ type: core.Input }],
-            formData: [{ type: core.Input }],
-            emptyResponse: [{ type: core.Output }],
-            scrollableItems: [{ type: core.ViewChildren, args: [ScrollableItemDirective,] }]
+        MdoChannelV2Component.propDecorators = {
+            sectionList: [{ type: core.Input }]
         };
-        return UserContentRatingLibComponent;
+        return MdoChannelV2Component;
     }());
     if (false) {
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.currentIndex;
+        MdoChannelV2Component.prototype.sectionList;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.providerId;
+        MdoChannelV2Component.prototype.channnelName;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.formData;
+        MdoChannelV2Component.prototype.orgId;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.emptyResponse;
+        MdoChannelV2Component.prototype.selectedIndex;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.styleData;
+        MdoChannelV2Component.prototype.hideCompetencyBlock;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.contentdata;
+        MdoChannelV2Component.prototype.contentTabEmptyResponseCount;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.scrollableItems;
+        MdoChannelV2Component.prototype.titles;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.ratingService;
+        MdoChannelV2Component.prototype.showModal;
         /** @type {?} */
-        UserContentRatingLibComponent.prototype.userRatingSvc;
+        MdoChannelV2Component.prototype.descriptionMaxLength;
+        /** @type {?} */
+        MdoChannelV2Component.prototype.isTelemetryRaised;
+        /**
+         * @type {?}
+         * @private
+         */
+        MdoChannelV2Component.prototype.route;
+        /**
+         * @type {?}
+         * @private
+         */
+        MdoChannelV2Component.prototype.router;
+        /**
+         * @type {?}
+         * @private
+         */
+        MdoChannelV2Component.prototype.eventSvc;
+        /**
+         * @type {?}
+         * @private
+         */
+        MdoChannelV2Component.prototype.translate;
+        /**
+         * @type {?}
+         * @private
+         */
+        MdoChannelV2Component.prototype.langtranslations;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var SlidersNgContentLibComponent = /** @class */ (function (_super) {
-        __extends(SlidersNgContentLibComponent, _super);
-        function SlidersNgContentLibComponent(events, valueSvc) {
-            var _this = _super.call(this) || this;
-            _this.events = events;
-            _this.valueSvc = valueSvc;
-            _this.title = '';
-            _this.loadNgContentData = false;
-            _this.autoScroll = false;
-            _this.currentIndexValue = new core.EventEmitter();
-            _this.id = "banner_" + Math.random();
-            _this.defaultMenuSubscribe = null;
-            _this.isLtMedium$ = _this.valueSvc.isLtMedium$;
-            _this.currentIndex = 0;
-            _this.slideInterval = null;
-            _this.isMobile = false;
-            return _this;
+    var ɵ0$7 = HttpLoaderFactory;
+    var MDOChannelModule = /** @class */ (function () {
+        function MDOChannelModule() {
+        }
+        MDOChannelModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [MdoChannelV1Component, MdoChannelV2Component],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            material.MatChipsModule,
+                            SkeletonLoaderLibModule,
+                            AnnouncementsModule,
+                            TopLearnersModule,
+                            CbpPlanModule,
+                            CardsModule,
+                            CommonStripModule,
+                            CompetencyPassbookModule,
+                            CompetencyPassbookMdoModule,
+                            ContentStripWithTabsLibModule,
+                            DataPointsModule,
+                            SlidersLibModule,
+                            material.MatTabsModule,
+                            core$1.TranslateModule.forRoot({
+                                loader: {
+                                    provide: core$1.TranslateLoader,
+                                    useFactory: ɵ0$7,
+                                    deps: [http.HttpClient],
+                                },
+                            }),
+                        ],
+                        exports: [MdoChannelV1Component, MdoChannelV2Component],
+                        providers: [
+                            CommonMethodsService
+                        ],
+                        schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
+                    },] }
+        ];
+        return MDOChannelModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ProvidersV2Component = /** @class */ (function () {
+        function ProvidersV2Component(route, router, datePipe, events) {
+            this.route = route;
+            this.router = router;
+            this.datePipe = datePipe;
+            this.events = events;
+            this.sectionList = [];
+            this.providerName = '';
+            this.providerId = '';
+            this.hideCompetencyBlock = false;
+            this.titles = [
+                { title: 'Learn', url: '/page/learn', icon: 'school', disableTranslate: false },
+                { title: "All Providers",
+                    url: "/app/learn/browse-by/provider/all-providers",
+                    icon: '', disableTranslate: true,
+                },
+            ];
+            this.descriptionMaxLength = 500;
+            this.isTelemetryRaised = false;
         }
         /**
          * @return {?}
          */
-        SlidersNgContentLibComponent.prototype.ngOnInit = /**
+        ProvidersV2Component.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            if (this.route.snapshot.data && this.route.snapshot.data.formData
+                && this.route.snapshot.data.formData.data
+                && this.route.snapshot.data.formData.data.result
+                && this.route.snapshot.data.formData.data.result.form
+                && this.route.snapshot.data.formData.data.result.form.data
+                && this.route.snapshot.data.formData.data.result.form.data.sectionList) {
+                this.sectionList = this.route.snapshot.data.formData.data.result.form.data.sectionList;
+            }
+            this.route.params.subscribe((/**
+             * @param {?} params
+             * @return {?}
+             */
+            function (params) {
+                _this.providerName = params['provider'];
+                _this.providerId = params['orgId'];
+                _this.titles.push({
+                    title: _this.providerName, icon: '', url: 'none', disableTranslate: true,
+                });
+            }));
+            this.getNavitems();
+            this.currentMonthAndYear = this.datePipe.transform(new Date(), 'MMMM y');
+        };
+        /**
+         * @return {?}
+         */
+        ProvidersV2Component.prototype.getNavitems = /**
+         * @return {?}
+         */
+        function () {
+            this.navList = this.sectionList.filter((/**
+             * @param {?} obj
+             * @return {?}
+             */
+            function (obj) { return obj.enabled && obj.navigation && obj.navOrder; })).sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) { return a.navOrder - b.navOrder; }));
+        };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        ProvidersV2Component.prototype.scrollToSection = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
+            /** @type {?} */
+            var section;
+            section = document.getElementById(name);
+            if (section) {
+                // section.scrollIntoView({ behavior: 'smooth', block: 'start',inline: 'nearest', offsetTop: yOffset  })
+                window.scrollTo({
+                    top: section.offsetTop - 121,
+                    behavior: 'smooth',
+                });
+            }
+        };
+        /**
+         * @param {?} event
+         * @param {?} columnData
+         * @return {?}
+         */
+        ProvidersV2Component.prototype.hideCompetency = /**
+         * @param {?} event
+         * @param {?} columnData
+         * @return {?}
+         */
+        function (event, columnData) {
+            if (event) {
+                this.hideCompetencyBlock = true;
+                columnData['navigation'] = false;
+                columnData['enabled'] = false;
+                this.navList.forEach((/**
+                 * @param {?} navItem
+                 * @return {?}
+                 */
+                function (navItem) {
+                    navItem.column.forEach((/**
+                     * @param {?} colEle
+                     * @return {?}
+                     */
+                    function (colEle) {
+                        if (colEle.key === columnData.key) {
+                            navItem['navigation'] = false;
+                        }
+                    }));
+                }));
+            }
+        };
+        /**
+         * @param {?} event
+         * @param {?} contentStripData
+         * @return {?}
+         */
+        ProvidersV2Component.prototype.hideContentStrip = /**
+         * @param {?} event
+         * @param {?} contentStripData
          * @return {?}
          */
-        function () {
-            var _this = this;
-            if (this.autoScroll) {
-                this.reInitiateSlideInterval();
+        function (event, contentStripData) {
+            if (event) {
+                contentStripData['hideSection'] = true;
             }
-            this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
-             * @param {?} isLtMedium
-             * @return {?}
-             */
-            function (isLtMedium) {
-                _this.isMobile = isLtMedium;
-            }));
         };
         /**
+         * @param {?} event
+         * @param {?} learnerReview
          * @return {?}
          */
-        SlidersNgContentLibComponent.prototype.reInitiateSlideInterval = /**
+        ProvidersV2Component.prototype.hideLearnerReview = /**
+         * @param {?} event
+         * @param {?} learnerReview
          * @return {?}
          */
-        function () {
-            var _this = this;
-            if (this.widgetData && this.widgetData.length > 1) {
-                try {
-                    if (this.slideInterval) {
-                        this.slideInterval.unsubscribe();
-                    }
-                }
-                catch (e) {
-                }
-                finally {
-                    this.slideInterval = rxjs.interval(8000).subscribe((/**
-                     * @return {?}
-                     */
-                    function () {
-                        if (_this.currentIndex === _this.widgetData.length - 1) {
-                            _this.currentIndex = 0;
-                            _this.currentIndexValue.emit(_this.currentIndex);
-                        }
-                        else {
-                            _this.currentIndex += 1;
-                            _this.currentIndexValue.emit(_this.currentIndex);
-                        }
-                    }));
-                }
+        function (event, learnerReview) {
+            if (event) {
+                learnerReview['hideSection'] = true;
             }
         };
         /**
-         * @param {?} index
+         * @param {?} _stripData
+         * @param {?} contentStrip
          * @return {?}
          */
-        SlidersNgContentLibComponent.prototype.slideTo = /**
-         * @param {?} index
+        ProvidersV2Component.prototype.showAllContent = /**
+         * @param {?} _stripData
+         * @param {?} contentStrip
          * @return {?}
          */
-        function (index) {
-            if (index >= 0 && index < this.widgetData.length) {
-                this.currentIndex = index;
-                this.currentIndexValue.emit(this.currentIndex);
-            }
-            else if (index === this.widgetData.length) {
-                this.currentIndex = 0;
-                this.currentIndexValue.emit(this.currentIndex);
+        function (_stripData, contentStrip) {
+            if (contentStrip && contentStrip.strips && contentStrip.strips.length) {
+                /** @type {?} */
+                var stripData = contentStrip.strips[0];
+                if (stripData && stripData.request) {
+                    delete (stripData['loaderWidgets']);
+                    this.router.navigate(["/app/learn/browse-by/provider/" + this.providerName + "/" + this.providerId + "/all-content"], { queryParams: { stripData: JSON.stringify(stripData), pageDetails: true } });
+                }
             }
             else {
-                this.currentIndex = this.widgetData.length + index;
-                this.currentIndexValue.emit(this.currentIndex);
-            }
-            if (this.autoScroll) {
-                this.reInitiateSlideInterval();
+                this.router.navigate(["/app/learn/browse-by/provider/" + this.providerName + "/" + this.providerId + "/all-CBP"], { queryParams: { pageDetails: true } });
             }
         };
-        Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                /** @type {?} */
-                var currentData = this.widgetData[this.currentIndex];
-                if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
-                    return true;
-                }
-                return false;
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
+         * @param {?} event
          * @return {?}
          */
-        SlidersNgContentLibComponent.prototype.openInNewTab = /**
+        ProvidersV2Component.prototype.raiseTelemetryInteratEvent = /**
+         * @param {?} event
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var currentData = this.widgetData[this.currentIndex];
-            if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
-                window.open(currentData.redirectUrl);
+        function (event) {
+            if (event && event.viewMoreUrl) {
+                this.raiseTelemetry(event.stripTitle + " " + event.viewMoreUrl.viewMoreText);
+            }
+            if (!this.isTelemetryRaised && event && !event.viewMoreUrl) {
+                this.events.raiseInteractTelemetry({
+                    type: 'click',
+                    subType: 'ATI/CTI',
+                    id: lodash.kebabCase(event.typeOfTelemetry.toLocaleLowerCase()) + "-card",
+                }, {
+                    id: event.identifier,
+                    type: event.primaryCategory,
+                }, {
+                    pageIdExt: lodash.kebabCase(event.primaryCategory.toLocaleLowerCase()) + "-card",
+                    module: utilsV2.WsEvents.EnumTelemetrymodules.LEARN,
+                });
+                this.isTelemetryRaised = true;
             }
         };
         /**
-         * @param {?} bannerUrl
+         * @param {?} name
          * @return {?}
          */
-        SlidersNgContentLibComponent.prototype.raiseTelemetry = /**
-         * @param {?} bannerUrl
+        ProvidersV2Component.prototype.raiseCompetencyTelemetry = /**
+         * @param {?} name
          * @return {?}
          */
-        function (bannerUrl) {
-            this.openInNewTab();
-            /** @type {?} */
-            var path = window.location.pathname.replace('/', '');
-            /** @type {?} */
-            var url = path + window.location.search;
+        function (name) {
+            this.raiseTelemetry(name + " core expertise");
+        };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        ProvidersV2Component.prototype.raiseTelemetry = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
             this.events.raiseInteractTelemetry({
                 type: 'click',
-                subType: 'banner',
-            }, {
-                pageUrl: url,
-                bannerRedirectUrl: bannerUrl,
-            }, {
-                pageIdExt: 'banner',
-                module: utilsV2.WsEvents.EnumTelemetrymodules.CONTENT,
+                subType: 'ATI/CTI',
+                id: "" + lodash.kebabCase(name).toLocaleLowerCase(),
+            }, {}, {
+                module: utilsV2.WsEvents.EnumTelemetrymodules.LEARN,
             });
         };
         /**
+         * @param {?} name
          * @return {?}
          */
-        SlidersNgContentLibComponent.prototype.ngOnDestroy = /**
+        ProvidersV2Component.prototype.raiseNavTelemetry = /**
+         * @param {?} name
          * @return {?}
          */
-        function () {
-            if (this.defaultMenuSubscribe) {
-                this.defaultMenuSubscribe.unsubscribe();
-            }
+        function (name) {
+            this.events.raiseInteractTelemetry({
+                type: 'click',
+                subType: 'ATI/CTI',
+                id: lodash.kebabCase(name).toLocaleLowerCase() + "-navigation",
+            }, {}, {
+                module: utilsV2.WsEvents.EnumTelemetrymodules.LEARN,
+            });
         };
-        SlidersNgContentLibComponent.decorators = [
+        ProvidersV2Component.decorators = [
             { type: core.Component, args: [{
-                        selector: 'sb-uic-sliders-ng-content',
-                        template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\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    </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\" 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    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\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\" 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            <ng-content select=\"[sliderMeta]\"></ng-content>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *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\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",
-                        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}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
+                        selector: 'sb-uic-providers-v2',
+                        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\n</div>\n\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=\"col-span-12 md:col-span-8\">\n                    <div class=\"slider h-full\" *ngIf=\"data?.sliderData?.sliders\">\n                        <sb-uic-sliders [title]=\"providerName\" [widgetData]=\"data?.sliderData?.sliders\" [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n                    </div>\n                </div>\n                <div class=\"hidden md:block col-span-4 p-5\" style=\"background: #0754AC;\" >\n                    <sb-uic-data-points  [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'multipleRows-V2'\"></sb-uic-data-points>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-span-12 title-section px-5 md:py-5 mob-container\">\n            <div class=\"container flex flex-col md:flex-row\">\n                <div class=\"mr-4 logo-box-container\">\n                    <div class=\"flex logo-box-rounded top mr-4\">\n                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                    </div>\n                </div>\n                <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n                    <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || providerName}}</h1>\n                    <p>{{data?.description | slice:0:descriptionMaxLength}}\n                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                    </p>\n                    <div class=\"block md:hidden overflow-y-auto mb-3\">\n                        <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\"  [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow-v2'\"></sb-uic-data-points>\n                    </div>\n                    <button\n                        (click)=\"raiseTelemetry(data?.contentButton?.title)\"\n                        [routerLink]=\"[data?.contentButton?.redirectUrl, providerName, providerId, 'all-CBP']\"\n                        [queryParams]=\"{pageDetails: true}\" mat-button type=\"button\"\n                        class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n                        <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n                            {{data?.contentButton?.title}}\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    <!-- </div> -->\n</ng-template>\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n    <ng-container *ngIf=\"!contentStrip?.hideSection\">\n        <div class=\"flex justify-center relative mt-8 mb-8\">\n            <img class=\"absolute {{contentStrip?.sectionImagePosition}}\" src=\"{{contentStrip?.sectionImage}}\" alt=\"\">\n            <div class=\"container \">\n                <div class=\"w-full\">\n                    <sb-uic-content-strip-with-tabs\n                        [emitViewAll]=\"true\"\n                        (viewAllResponse)=\"showAllContent($event,contentStrip)\"\n                        (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                        [providerId]=\"providerId\"\n                        [widgetData]=\"contentStrip\">\n                    </sb-uic-content-strip-with-tabs>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #contributors  let-data=\"data\">\n    <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n                <div class=\"col-span-12 md:col-span-3 contributor-desc\">\n                    <div class=\"infra-box flex flex-col\">\n                        <div class=\"infra-title-v2 hidden md:block\">\n                            {{data.detaulTitle}}<span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n                        </div>\n                        <div class=\"infra-title-v2 hidden md:block\">\n                            {{data.myTitle}}<span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n                        </div>\n                        <div class=\"block md:hidden\">\n                            <span class=\"infra-title-v2\">{{data.detaulTitle}}</span>\n                            <span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n                            <span class=\"infra-title-v2\"> {{data.myTitle}}</span>\n                            <span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n                        </div>\n                        <div class=\"infra-description padding-top-s\">\n                            {{data.description}}\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-9\">\n                    <sb-uic-common-strip [widgetData]=\"data\"></sb-uic-common-strip>\n                </div>\n            </div>\n            <div class=\"w-full section-divider pt-6\">\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #infra let-infra=\"infra\">\n    <div class=\"infra-background px-5\" [style.background]=\"infra?.background\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 infra-sec padding-top-l\">\n                <div class=\"col-span-12 md:col-span-4 infra-sec-desc\">\n                    <div class=\"infra-box flex flex-col\">\n                        <div class=\"infra-title2 hidden md:block\">\n                            {{infra?.detaulTitle}}\n                        </div>\n                        <div class=\"block md:hidden\">\n                            <span class=\"infra-title2\">{{infra?.detaulTitle}}</span>\n                        </div>\n                        <div class=\"infra-description padding-top-s\">\n                            {{infra?.description}}\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-8\">\n                    <sb-uic-data-points [objectData]=\"infra\" [layoutType]=\"'gridLayout'\"></sb-uic-data-points>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"infra-background slider-background\" [style.background]=\"infra?.background\">\n    </div>\n    <div class=\"slider-background1 mb-8\">\n        <div class=\"container-balanced w-full slider-background-2\">\n            <div class=\"info-slider\">\n                <sb-uic-sliders [widgetData]=\"infra?.sliderData?.sliders\" [styleData]=\"infra?.sliderData?.styleData\"></sb-uic-sliders>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n    <div class=\"padding-top-l padding-bottom-l relative\"  [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock\">\n        <div class=\"w-full container-balanced\">\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook\n                    (emptyResponse)=\"hideCompetency($event, competency)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n                    [objectData]=\"competency\"\n                    [providerId]=\"providerId\">\n                </sb-uic-competency-passbook>\n            </div>\n        </div>\n        <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\">\n    </div>\n</ng-template>\n<!-- End Competencies -->\n\n\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",
+                        styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.logo-box-rounded.top{position:absolute;top:-110px}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec{padding:25px 0}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-180px;padding:25px}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:768px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}"]
                     }] }
         ];
         /** @nocollapse */
-        SlidersNgContentLibComponent.ctorParameters = function () { return [
-            { type: utilsV2.EventService },
-            { type: utilsV2.ValueService }
+        ProvidersV2Component.ctorParameters = function () { return [
+            { type: router.ActivatedRoute },
+            { type: router.Router },
+            { type: common.DatePipe },
+            { type: utilsV2.EventService }
         ]; };
-        SlidersNgContentLibComponent.propDecorators = {
-            widgetData: [{ type: core.Input }],
-            styleData: [{ type: core.Input }],
-            title: [{ type: core.Input }],
-            loadNgContentData: [{ type: core.Input }],
-            autoScroll: [{ type: core.Input }],
-            currentIndexValue: [{ type: core.Output }],
-            id: [{ type: core.HostBinding, args: ['id',] }],
-            currentIndex: [{ type: core.Input }]
+        ProvidersV2Component.propDecorators = {
+            sectionList: [{ type: core.Input }]
         };
-        return SlidersNgContentLibComponent;
-    }(resolverV2.WidgetBaseComponent));
+        return ProvidersV2Component;
+    }());
     if (false) {
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.widgetData;
+        ProvidersV2Component.prototype.sectionList;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.styleData;
+        ProvidersV2Component.prototype.providerName;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.title;
+        ProvidersV2Component.prototype.providerId;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.loadNgContentData;
+        ProvidersV2Component.prototype.navList;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.autoScroll;
+        ProvidersV2Component.prototype.hideCompetencyBlock;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.currentIndexValue;
+        ProvidersV2Component.prototype.currentMonthAndYear;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.id;
+        ProvidersV2Component.prototype.titles;
+        /** @type {?} */
+        ProvidersV2Component.prototype.descriptionMaxLength;
+        /** @type {?} */
+        ProvidersV2Component.prototype.isTelemetryRaised;
         /**
          * @type {?}
          * @private
          */
-        SlidersNgContentLibComponent.prototype.defaultMenuSubscribe;
-        /** @type {?} */
-        SlidersNgContentLibComponent.prototype.isLtMedium$;
-        /** @type {?} */
-        SlidersNgContentLibComponent.prototype.currentIndex;
+        ProvidersV2Component.prototype.route;
         /** @type {?} */
-        SlidersNgContentLibComponent.prototype.slideInterval;
-        /** @type {?} */
-        SlidersNgContentLibComponent.prototype.isMobile;
+        ProvidersV2Component.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        SlidersNgContentLibComponent.prototype.events;
+        ProvidersV2Component.prototype.datePipe;
         /**
          * @type {?}
          * @private
          */
-        SlidersNgContentLibComponent.prototype.valueSvc;
+        ProvidersV2Component.prototype.events;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /* tslint:enable */
-    var   /* tslint:enable */
-    MyHammerConfig$1 = /** @class */ (function (_super) {
-        __extends(MyHammerConfig, _super);
-        function MyHammerConfig() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * @param {?} element
-         * @return {?}
-         */
-        MyHammerConfig.prototype.buildHammer = /**
-         * @param {?} element
-         * @return {?}
-         */
-        function (element) {
-            /** @type {?} */
-            var mc = new Hammer(element, {
-                touchAction: 'pan-y',
-            });
-            return mc;
-        };
-        return MyHammerConfig;
-    }(platformBrowser.HammerGestureConfig));
-    // tslint:disable-next-line: max-classes-per-file
-    var SlidersNgContentLibModule = /** @class */ (function () {
-        function SlidersNgContentLibModule() {
-        }
-        SlidersNgContentLibModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [SlidersNgContentLibComponent],
-                        imports: [
-                            common.CommonModule,
-                            router.RouterModule,
-                            NavigationModule,
-                            ImageResponsiveModule,
-                        ],
-                        exports: [SlidersNgContentLibComponent],
-                        entryComponents: [SlidersNgContentLibComponent],
-                        providers: [
-                            {
-                                provide: platformBrowser.HAMMER_GESTURE_CONFIG,
-                                useClass: MyHammerConfig$1,
-                            },
-                        ],
-                    },] }
-        ];
-        return SlidersNgContentLibModule;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var ScrollableItemModule = /** @class */ (function () {
-        function ScrollableItemModule() {
-        }
-        ScrollableItemModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [ScrollableItemDirective],
-                        imports: [
-                            common.CommonModule,
-                        ],
-                        exports: [ScrollableItemDirective],
-                    },] }
-        ];
-        return ScrollableItemModule;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var UserContentRatingLibModule = /** @class */ (function () {
-        function UserContentRatingLibModule() {
+    var ɵ0$8 = HttpLoaderFactory;
+    var ProvidersModule = /** @class */ (function () {
+        function ProvidersModule() {
         }
-        UserContentRatingLibModule.decorators = [
+        ProvidersModule.decorators = [
             { type: core.NgModule, args: [{
-                        declarations: [UserContentRatingLibComponent],
+                        declarations: [ProvidersV2Component],
                         imports: [
                             common.CommonModule,
                             material.MatIconModule,
+                            router.RouterModule,
                             material.MatChipsModule,
                             SkeletonLoaderLibModule,
-                            SlidersLibModule,
+                            CalenderModule,
                             CardsModule,
-                            AvatarPhotoLibModule,
-                            SlidersNgContentLibModule,
-                            ScrollableItemModule
+                            CommonStripModule,
+                            CompetencyPassbookModule,
+                            UserContentRatingLibModule,
+                            ContentStripWithTabsLibModule,
+                            DataPointsModule,
+                            SlidersLibModule,
+                            material.MatTabsModule,
+                            core$1.TranslateModule.forRoot({
+                                loader: {
+                                    provide: core$1.TranslateLoader,
+                                    useFactory: ɵ0$8,
+                                    deps: [http.HttpClient],
+                                },
+                            }),
+                        ],
+                        exports: [ProvidersV2Component],
+                        providers: [
+                            CommonMethodsService
                         ],
-                        exports: [UserContentRatingLibComponent],
-                        providers: [RatingService, UserContentRatingLibService],
                         schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
                     },] }
         ];
-        return UserContentRatingLibModule;
+        return ProvidersModule;
     }());
 
     exports.AnnouncementsModule = AnnouncementsModule;
     exports.CalenderModule = CalenderModule;
     exports.CardsModule = CardsModule;
+    exports.CbpPlanModule = CbpPlanModule;
     exports.CommonMethodsService = CommonMethodsService;
     exports.CommonStripModule = CommonStripModule;
     exports.CompetencyPassbookMdoModule = CompetencyPassbookMdoModule;
@@ -16392,55 +17733,63 @@
     exports.DataPointsModule = DataPointsModule;
     exports.HttpLoaderFactory = HttpLoaderFactory;
     exports.HttpLoaderFactory1 = HttpLoaderFactory1;
+    exports.MDOChannelModule = MDOChannelModule;
     exports.MyHammerConfig = MyHammerConfig;
+    exports.ProvidersModule = ProvidersModule;
     exports.ROOT_WIDGET_CONFIG = ROOT_WIDGET_CONFIG;
     exports.SlidersLibModule = SlidersLibModule;
+    exports.TopLearnersModule = TopLearnersModule;
     exports.UserContentRatingLibModule = UserContentRatingLibModule;
     exports.WIDGET_REGISTERED_LIB_MODULES = WIDGET_REGISTERED_LIB_MODULES;
     exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
     exports.WidgetContentService = WidgetContentService;
     exports.ɵa = ContentStripWithTabsLibComponent;
     exports.ɵb = WidgetUserService;
-    exports.ɵba = CardWideV2Component;
-    exports.ɵbb = CardKarmaProgramsComponent;
-    exports.ɵbc = CardKarmaProgramsV2Component;
-    exports.ɵbd = ProviderCardComponent;
-    exports.ɵbe = CardPortraitExtComponent;
-    exports.ɵbf = CardAssessmentComponent;
-    exports.ɵbg = CardProgressPortraitLibComponent;
-    exports.ɵbh = CertificateService;
-    exports.ɵbi = CardMdoChannelV1Component;
-    exports.ɵbj = PipePublicURLModule;
-    exports.ɵbk = PipePublicURL;
-    exports.ɵbl = ObjectToArrayPipeModule;
-    exports.ɵbm = ObjectToArrayPipe;
-    exports.ɵbn = DisplayContentTypeLibModule;
-    exports.ɵbo = DisplayContentTypeLibComponent;
-    exports.ɵbp = DefaultThumbnailModule;
-    exports.ɵbq = DefaultThumbnailDirective;
-    exports.ɵbr = PipeDurationTransformModule;
-    exports.ɵbs = PipeDurationTransformPipe;
-    exports.ɵbt = ContentProgressComponent;
-    exports.ɵbu = DialogComponentsModule;
-    exports.ɵbv = CertificateDialogComponent;
-    exports.ɵbw = AvatarPhotoLibModule;
-    exports.ɵbx = AvatarPhotoLibComponent;
-    exports.ɵby = ContentStripWithTabsPillsComponent;
-    exports.ɵbz = CompetencyPassbookComponent;
+    exports.ɵba = CardResourceComponent;
+    exports.ɵbb = CardsComponent;
+    exports.ɵbc = CardPortraitComponent;
+    exports.ɵbd = CardUserComponent;
+    exports.ɵbe = CardLandscapeComponent;
+    exports.ɵbf = CardWideComponent;
+    exports.ɵbg = CardMDOChannelComponent;
+    exports.ɵbh = CardWideV2Component;
+    exports.ɵbi = CardKarmaProgramsComponent;
+    exports.ɵbj = CardKarmaProgramsV2Component;
+    exports.ɵbk = ProviderCardComponent;
+    exports.ɵbl = CardPortraitExtComponent;
+    exports.ɵbm = CardAssessmentComponent;
+    exports.ɵbn = CardProgressPortraitLibComponent;
+    exports.ɵbo = CertificateService;
+    exports.ɵbp = CardMdoChannelV1Component;
+    exports.ɵbq = PipePublicURLModule;
+    exports.ɵbr = PipePublicURL;
+    exports.ɵbs = ObjectToArrayPipeModule;
+    exports.ɵbt = ObjectToArrayPipe;
+    exports.ɵbu = DisplayContentTypeLibModule;
+    exports.ɵbv = DisplayContentTypeLibComponent;
+    exports.ɵbw = DefaultThumbnailModule;
+    exports.ɵbx = DefaultThumbnailDirective;
+    exports.ɵby = PipeDurationTransformModule;
+    exports.ɵbz = PipeDurationTransformPipe;
     exports.ɵc = MultilingualTranslationsService;
-    exports.ɵca = CompetencyPassbookService;
-    exports.ɵcb = PillsModule;
-    exports.ɵcc = PillsComponent;
-    exports.ɵcd = CompetencyPassbookMdoComponent;
-    exports.ɵce = CompetencyPassbookMdoService;
-    exports.ɵcf = UserContentRatingLibComponent;
-    exports.ɵcg = ScrollableItemDirective;
-    exports.ɵch = RatingService;
-    exports.ɵci = UserContentRatingLibService;
-    exports.ɵcj = MyHammerConfig$1;
-    exports.ɵck = SlidersNgContentLibModule;
-    exports.ɵcl = SlidersNgContentLibComponent;
-    exports.ɵcm = ScrollableItemModule;
+    exports.ɵca = ContentProgressComponent;
+    exports.ɵcb = DialogComponentsModule;
+    exports.ɵcc = CertificateDialogComponent;
+    exports.ɵcd = AvatarPhotoLibModule;
+    exports.ɵce = AvatarPhotoLibComponent;
+    exports.ɵcf = ContentStripWithTabsPillsComponent;
+    exports.ɵcg = CompetencyPassbookComponent;
+    exports.ɵch = CompetencyPassbookService;
+    exports.ɵci = PillsModule;
+    exports.ɵcj = PillsComponent;
+    exports.ɵck = CompetencyPassbookMdoComponent;
+    exports.ɵcl = CompetencyPassbookMdoService;
+    exports.ɵcm = UserContentRatingLibComponent;
+    exports.ɵcn = RatingService;
+    exports.ɵco = UserContentRatingLibService;
+    exports.ɵcp = MdoChannelV1Component;
+    exports.ɵcq = MdoChannelV2Component;
+    exports.ɵcr = ProvidersV2Component;
     exports.ɵd = ConfigurationsService;
     exports.ɵe = HorizontalScrollerV2Module;
     exports.ɵf = HorizontalScrollerV2Component;
@@ -16457,13 +17806,13 @@
     exports.ɵq = CalenderDayComponent;
     exports.ɵr = CommonStripComponent;
     exports.ɵs = AnnouncementsComponent;
-    exports.ɵt = CardResourceComponent;
-    exports.ɵu = CardsComponent;
-    exports.ɵv = CardPortraitComponent;
-    exports.ɵw = CardUserComponent;
-    exports.ɵx = CardLandscapeComponent;
-    exports.ɵy = CardWideComponent;
-    exports.ɵz = CardMDOChannelComponent;
+    exports.ɵt = TopLearnersComponent;
+    exports.ɵu = CbpPlanComponent;
+    exports.ɵv = ScrollableItemDirective;
+    exports.ɵw = ScrollableItemModule;
+    exports.ɵx = MyHammerConfig$1;
+    exports.ɵy = SlidersNgContentLibModule;
+    exports.ɵz = SlidersNgContentLibComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });