@sunbird-cb/consumption 0.0.53 → 0.0.55

package/fesm2015/sunbird-cb-consumption.js

@@ -1,6 +1,6 @@
-import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, Pipe, ElementRef, ViewChildren } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChildren, Pipe } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
-import { Router, RouterModule } from '@angular/router';
+import { Router, RouterModule, ActivatedRoute } from '@angular/router';
 import { fromEvent, timer, BehaviorSubject, Subject, of, EMPTY, ReplaySubject, throwError, interval } from 'rxjs';
 import { debounceTime, throttleTime, shareReplay, retry, map, catchError, filter, distinctUntilChanged } from 'rxjs/operators';
 import { ValueService, ConfigurationsService as ConfigurationsService$1, WsEvents, LoggerService, EventService, UtilityService, MultilingualTranslationsService as MultilingualTranslationsService$1, PipeSafeSanitizerModule } from '@sunbird-cb/utils-v2';
@@ -8,8 +8,8 @@ import { MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatToolbarMod
 import { __awaiter } from 'tslib';
 import { WidgetBaseComponent, SbUiResolverModule } from '@sunbird-cb/resolver-v2';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { get, uniqBy, orderBy, camelCase } from 'lodash';
-import * as moment$1 from 'moment';
+import { get, uniqBy, orderBy, camelCase, kebabCase } from 'lodash';
+import * as moment$2 from 'moment';
 import { duration, utc } from 'moment';
 import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as dayjs_ from 'dayjs';
@@ -1443,7 +1443,7 @@ function viewerRouteGenerator(id, mimeType, collectionId, collectionType, forPre
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-const moment = moment$1;
+const moment = moment$2;
 // tslint:enable
 // TODO: move this in some common place
 /** @type {?} */
@@ -3271,6 +3271,8 @@ if (false) {
     /** @type {?} */
     IStripUnitContentData.prototype.stripConfig;
     /** @type {?|undefined} */
+    IStripUnitContentData.prototype.tabsType;
+    /** @type {?|undefined} */
     IStripUnitContentData.prototype.tabs;
     /** @type {?|undefined} */
     IStripUnitContentData.prototype.stripName;
@@ -4383,6 +4385,7 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                 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,
@@ -4527,6 +4530,12 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                 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;
                 }
@@ -4900,29 +4909,45 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                     originalFilters = strip.request.topContent.request.filters;
                     strip.request.topContent.request.filters = this.postMethodFilters(strip.request.topContent.request.filters);
                 }
-                try {
+                if (strip.tabs && strip.tabs.length) {
+                    // TODO: Have to extract requestRequired to outer level of tabs config
                     /** @type {?} */
-                    const response = yield this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus);
-                    // console.log('calling  after - response, ', response)
-                    if (response && response.results) {
-                        // console.log('calling  after-- ')
-                        if (response.results.result.content && response.results.result.content.length) {
-                            this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
+                    const firstTab = strip.tabs[0];
+                    if (firstTab.requestRequired) {
+                        if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                            /** @type {?} */
+                            const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                            /** @type {?} */
+                            const currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
+                            this.getTabDataByNewReqTopContent(strip, 0, currentTabFromMap, calculateParentStatus);
+                        }
+                    }
+                }
+                else {
+                    try {
+                        /** @type {?} */
+                        const response = yield this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus);
+                        // console.log('calling  after - response, ', response)
+                        if (response && response.results) {
+                            // console.log('calling  after-- ')
+                            if (response.results.result.content && response.results.result.content.length) {
+                                this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                this.emptyResponse.emit(true);
+                            }
                         }
                         else {
                             this.processStrip(strip, [], 'error', calculateParentStatus, null);
                             this.emptyResponse.emit(true);
                         }
                     }
-                    else {
-                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
-                        this.emptyResponse.emit(true);
+                    catch (error) {
+                        // Handle errors
+                        // console.error('Error:', error);
                     }
                 }
-                catch (error) {
-                    // Handle errors
-                    // console.error('Error:', error);
-                }
             }
         });
     }
@@ -4970,6 +4995,51 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             }
         });
     }
+    /**
+     * @param {?} strip
+     * @param {?} tabIndex
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    getTabDataByNewReqTopContent(strip, tabIndex, currentTab, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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);
+            }
+            try {
+                // const response = await this.searchV6Request(strip, currentTab.request, calculateParentStatus);
+                /** @type {?} */
+                const response = yield this.postRequestMethod(strip, currentTab.request.topContent, currentTab.request.apiUrl, calculateParentStatus);
+                if (response.results && response.results.result) {
+                    /** @type {?} */
+                    const widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                    /** @type {?} */
+                    let tabResults = [];
+                    if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                        /** @type {?} */
+                        const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                        if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                            allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { widgets, fetchTabStatus: 'done' });
+                            tabResults = allTabs;
+                        }
+                    }
+                    this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
+                    );
+                }
+                else {
+                    this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                }
+            }
+            catch (error) {
+                // Handle errors
+                // console.error('Error:', error);
+            }
+        });
+    }
     /**
      * @param {?} stripData
      * @return {?}
@@ -5115,7 +5185,7 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
     postMethodFilters(filters) {
         if (filters.organisation &&
             filters.organisation.indexOf('<orgID>') >= 0) {
-            filters.organisation = this.providerId;
+            filters.organisation = filters.organisation.replace('<orgID>', this.providerId);
         }
         return filters;
     }
@@ -5126,7 +5196,7 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
      */
     getFullUrl(apiUrl, id) {
         /** @type {?} */
-        let formedUrl = '';
+        let formedUrl = apiUrl;
         if (apiUrl.indexOf('<bookmarkId>') >= 0) {
             formedUrl = apiUrl.replace('<bookmarkId>', this.environment.mdoChannelsBookmarkId);
         }
@@ -5290,30 +5360,136 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                     strip.request.playlistRead.type) {
                     strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.playlistRead.type);
                 }
-                try {
+                if (strip.tabs && strip.tabs.length) {
+                    // TODO: Have to extract requestRequired to outer level of tabs config
                     /** @type {?} */
-                    const response = yield this.getRequestMethod(strip, strip.request.playlistRead, strip.request.apiUrl, calculateParentStatus);
-                    if (response && response.results.result.content) {
+                    const firstTab = strip.tabs[0];
+                    if (firstTab.requestRequired) {
+                        if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                            /** @type {?} */
+                            const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                            /** @type {?} */
+                            const currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
+                            this.getTabDataByNewReqPlaylistReadContent(strip, 0, currentTabFromMap, calculateParentStatus);
+                        }
+                    }
+                }
+                else {
+                    try {
                         /** @type {?} */
-                        let content = response.results.result.content;
-                        if (strip.key === 'providers') {
+                        const response = yield this.getRequestMethod(strip, strip.request.playlistRead, strip.request.apiUrl, calculateParentStatus);
+                        if (response && response.results.result.content) {
                             /** @type {?} */
-                            let featuredProviders = JSON.parse(content.featuredProviders || '[]');
-                            this.processStrip(strip, this.transformAllContentsToWidgets(featuredProviders, strip), 'done', calculateParentStatus, response);
+                            let content = response.results.result.content;
+                            if (strip.key === 'providers') {
+                                /** @type {?} */
+                                let featuredProviders = 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, this.transformAllContentsToWidgets(content, strip), 'done', calculateParentStatus, response);
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            this.emptyResponse.emit(true);
                         }
                     }
-                    else {
-                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                    catch (error) {
                         this.emptyResponse.emit(true);
+                        // Handle errors
+                        // console.error('Error:', error);
                     }
                 }
-                catch (error) {
-                    this.emptyResponse.emit(true);
-                    // Handle errors
-                    // console.error('Error:', error);
+            }
+        });
+    }
+    /**
+     * @param {?} strip
+     * @param {?} tabIndex
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    getTabDataByNewReqPlaylistReadContent(strip, tabIndex, currentTab, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (currentTab.request &&
+                strip.request.playlistRead &&
+                strip.request.playlistRead.type) {
+                currentTab.request.apiUrl = this.getFullUrl(currentTab.request.apiUrl, currentTab.request.playlistRead.type);
+            }
+            try {
+                /** @type {?} */
+                const response = yield this.getRequestMethod(strip, currentTab.request.playlistRead, currentTab.request.apiUrl, calculateParentStatus);
+                // 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) {
+                    /** @type {?} */
+                    const widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                    /** @type {?} */
+                    let tabResults = [];
+                    if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                        /** @type {?} */
+                        const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                        if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                            allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { widgets, fetchTabStatus: 'done' });
+                            tabResults = allTabs;
+                        }
+                    }
+                    this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
+                    );
+                }
+                else {
+                    /** @type {?} */
+                    let tabResults = [];
+                    if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                        /** @type {?} */
+                        const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                        if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                            allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
+                            tabResults = allTabs;
+                        }
+                    }
+                    this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
+                }
+            }
+            catch (error) {
+                console.error('Error:', error);
+                /** @type {?} */
+                let tabResults = [];
+                if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs && this.stripsResultDataMap[strip.key].tabs.length) {
+                    /** @type {?} */
+                    const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                    if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                        allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
+                        tabResults = allTabs;
+                    }
+                    this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
+                }
+                else {
+                    this.processStrip(strip, [], 'error', calculateParentStatus, null);
                 }
             }
         });
@@ -5372,8 +5548,8 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
 ContentStripWithTabsLibComponent.decorators = [
     { type: 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 */
@@ -5990,7 +6166,8 @@ SlidersLibModule.decorators = [
 const 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`
 };
 class InsiteDataService {
     /**
@@ -6020,6 +6197,12 @@ class InsiteDataService {
     fetchTrainingDetails(request) {
         return this.http.post(API_END_POINTS$2.TRAINING_DETAILS, request);
     }
+    /**
+     * @return {?}
+     */
+    fetchLearner() {
+        return this.http.get(API_END_POINTS$2.LEARNERS);
+    }
 }
 InsiteDataService.decorators = [
     { type: Injectable, args: [{
@@ -6126,12 +6309,33 @@ class DataPointsComponent {
             this.isDataLoading = false;
         }));
     }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    converToIndianSystem(value) {
+        /** @type {?} */
+        let numStr = value.toString();
+        let [integerPart, decimalPart] = numStr.split('.');
+        /** @type {?} */
+        let lastThree = integerPart.slice(-3);
+        /** @type {?} */
+        let otherNumbers = integerPart.slice(0, -3);
+        if (otherNumbers !== '') {
+            lastThree = ',' + lastThree;
+        }
+        /** @type {?} */
+        let formattedIntegerPart = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + lastThree;
+        /** @type {?} */
+        const result = decimalPart ? `${formattedIntegerPart}.${decimalPart.substr(0, 2)}` : formattedIntegerPart;
+        return result;
+    }
 }
 DataPointsComponent.decorators = [
     { type: 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 */
@@ -7431,6 +7635,8 @@ class AnnouncementsComponent {
         this.openDialog = new EventEmitter();
         this.isLoading = false;
         this.announcements = [];
+        this.expand = false;
+        this.expanded = false;
     }
     /**
      * @return {?}
@@ -7481,6 +7687,9 @@ class AnnouncementsComponent {
                     });
                 }));
             }
+            if (this.announcements.length > 3) {
+                this.expand = true;
+            }
             this.objectData.list = this.announcements;
             this.isLoading = false;
         }), (/**
@@ -7508,12 +7717,18 @@ class AnnouncementsComponent {
     openAnnouncements() {
         this.openDialog.emit(true);
     }
+    /**
+     * @return {?}
+     */
+    showMoreOrLess() {
+        this.expanded = !this.expanded;
+    }
 }
 AnnouncementsComponent.decorators = [
     { type: 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 */
@@ -7546,6 +7761,10 @@ if (false) {
     /** @type {?} */
     AnnouncementsComponent.prototype.announcements;
     /** @type {?} */
+    AnnouncementsComponent.prototype.expand;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.expanded;
+    /** @type {?} */
     AnnouncementsComponent.prototype.insightSvc;
 }
 
@@ -7567,75 +7786,728 @@ AnnouncementsModule.decorators = [
             },] }
 ];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ConsumptionModule {
-}
-ConsumptionModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ConsumptionComponent],
-                imports: [
-                    ContentStripWithTabsLibModule,
-                    SlidersLibModule
-                ],
-                exports: [ConsumptionComponent,
-                    ContentStripWithTabsLibModule,
-                    SlidersLibModule,
-                    DataPointsModule,
-                    CalenderModule,
-                    CommonStripModule,
-                    AnnouncementsModule
-                ],
-            },] }
-];
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-const 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) {
+const moment$1 = moment$2;
+class TopLearnersComponent {
     /**
-     * @record
+     * @param {?} insightSvc
      */
-    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;
+    constructor(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 {?}
+     */
+    ngOnInit() {
+        this.getData();
+        this.month = new Date().toLocaleString('default', { month: 'long' });
+    }
+    /**
+     * @return {?}
+     */
+    getData() {
+        this.loading = true;
+        this.insightSvc.fetchLearner().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (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;
+        }), (/**
+         * @param {?} _error
+         * @return {?}
+         */
+        (_error) => {
+            // tslint:disable-next-line: align
+            this.loading = false;
+        }));
+    }
+    /**
+     * @param {?} rank
+     * @return {?}
+     */
+    getRank(rank) {
+        if (rank === 1) {
+            return "1st";
+        }
+        if (rank === 2) {
+            return "2nd";
+        }
+        if (rank === 3) {
+            return "3rd";
+        }
+        else {
+            return `${rank}th`;
+        }
+    }
+    /**
+     * @return {?}
+     */
+    getColor() {
+        /** @type {?} */
+        let circleColor = '';
+        /** @type {?} */
+        const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+        circleColor = this.colors[randomIndex];
+        return circleColor;
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    createInititals(name) {
+        /** @type {?} */
+        let initials = '';
+        /** @type {?} */
+        const array = name.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (let 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();
+    }
+}
+TopLearnersComponent.decorators = [
+    { type: Component, args: [{
+                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 */
+TopLearnersComponent.ctorParameters = () => [
+    { type: InsiteDataService }
+];
+TopLearnersComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    channelId: [{ type: Input }],
+    channnelName: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    TopLearnersComponent.prototype.objectData;
+    /** @type {?} */
+    TopLearnersComponent.prototype.channelId;
+    /** @type {?} */
+    TopLearnersComponent.prototype.channnelName;
+    /** @type {?} */
+    TopLearnersComponent.prototype.loading;
+    /** @type {?} */
+    TopLearnersComponent.prototype.month;
+    /** @type {?} */
+    TopLearnersComponent.prototype.results;
+    /** @type {?} */
+    TopLearnersComponent.prototype.colors;
+    /** @type {?} */
+    TopLearnersComponent.prototype.insightSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class TopLearnersModule {
+}
+TopLearnersModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [TopLearnersComponent],
+                imports: [
+                    CommonModule,
+                    SkeletonLoaderLibModule
+                ],
+                exports: [TopLearnersComponent],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ScrollableItemDirective {
+    /**
+     * @param {?} el
+     */
+    constructor(el) {
+        this.el = el;
+    }
+    /**
+     * @param {?} blockValue
+     * @return {?}
+     */
+    scrollIntoView(blockValue) {
+        this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
+    }
+}
+ScrollableItemDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sbUicScrollableItem]'
+            },] }
+];
+/** @nocollapse */
+ScrollableItemDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+ScrollableItemDirective.propDecorators = {
+    key: [{ type: Input, args: ['sbUicScrollableItem',] }]
+};
+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
+ */
+class CbpPlanComponent {
+    /**
+     * @param {?} translate
+     * @param {?} langtranslations
+     */
+    constructor(translate, langtranslations) {
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.mobileHeight = false;
+        this.fetchDataFromApi = false;
+        this.openDialog = new EventEmitter();
+        this.isLoading = false;
+        this.currentIndex = 0;
+        this.styleData = {};
+        this.contentdata = [];
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+        if (this.objectData && this.objectData.list) {
+            this.objectData.list.forEach((/**
+             * @param {?} contentEle
+             * @return {?}
+             */
+            (contentEle) => {
+                /** @type {?} */
+                let localData = {};
+                localData['title'] = contentEle.title;
+                localData['downloaUrl'] = contentEle.downloaUrl;
+                localData['cardSubType'] = "card-wide-lib";
+                localData['cardCustomeClass'] = "";
+                this.contentdata.push(localData);
+            }));
+        }
+    }
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    getCurrentIndex(indexValue) {
+        this.currentIndex = indexValue;
+    }
+    /**
+     * @param {?} item
+     * @return {?}
+     */
+    getFileName(item) {
+        console.log(item.downloadUrl);
+        return item.downloadUrl.split("/").at(-1);
+    }
+    /**
+     * @param {?} label
+     * @param {?} type
+     * @return {?}
+     */
+    translateLabels(label, type) {
+        return this.langtranslations.translateActualLabel(label, type, '');
+    }
+    /**
+     * @param {?} item
+     * @return {?}
+     */
+    downloadCBPPlan(item) {
+        /** @type {?} */
+        const downloadUrl = item.downloaUrl;
+        /** @type {?} */
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', downloadUrl, true);
+        xhr.responseType = 'blob';
+        xhr.onload = (/**
+         * @return {?}
+         */
+        function () {
+            if (xhr.status === 200) {
+                /** @type {?} */
+                const blob = new Blob([xhr.response], { type: 'application/pdf' });
+                /** @type {?} */
+                const url = window.URL.createObjectURL(blob);
+                /** @type {?} */
+                const 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: Component, args: [{
+                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 */
+CbpPlanComponent.ctorParameters = () => [
+    { type: TranslateService },
+    { type: MultilingualTranslationsService }
+];
+CbpPlanComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    layoutType: [{ type: Input }],
+    mobileHeight: [{ type: Input }],
+    fetchDataFromApi: [{ type: Input }],
+    channelId: [{ type: Input }],
+    openDialog: [{ type: Output }],
+    scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+};
+if (false) {
+    /** @type {?} */
+    CbpPlanComponent.prototype.objectData;
+    /** @type {?} */
+    CbpPlanComponent.prototype.layoutType;
+    /** @type {?} */
+    CbpPlanComponent.prototype.mobileHeight;
+    /** @type {?} */
+    CbpPlanComponent.prototype.fetchDataFromApi;
+    /** @type {?} */
+    CbpPlanComponent.prototype.channelId;
+    /** @type {?} */
+    CbpPlanComponent.prototype.openDialog;
+    /** @type {?} */
+    CbpPlanComponent.prototype.isLoading;
+    /** @type {?} */
+    CbpPlanComponent.prototype.currentIndex;
+    /** @type {?} */
+    CbpPlanComponent.prototype.styleData;
+    /** @type {?} */
+    CbpPlanComponent.prototype.contentdata;
+    /** @type {?} */
+    CbpPlanComponent.prototype.scrollableItems;
+    /**
+     * @type {?}
+     * @private
+     */
+    CbpPlanComponent.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CbpPlanComponent.prototype.langtranslations;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class SlidersNgContentLibComponent extends WidgetBaseComponent {
+    /**
+     * @param {?} events
+     * @param {?} valueSvc
+     */
+    constructor(events, valueSvc) {
+        super();
+        this.events = events;
+        this.valueSvc = valueSvc;
+        this.title = '';
+        this.loadNgContentData = false;
+        this.autoScroll = false;
+        this.currentIndexValue = new EventEmitter();
+        this.id = `banner_${Math.random()}`;
+        this.defaultMenuSubscribe = null;
+        this.isLtMedium$ = this.valueSvc.isLtMedium$;
+        this.currentIndex = 0;
+        this.slideInterval = null;
+        this.isMobile = false;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
+        this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
+         * @param {?} isLtMedium
+         * @return {?}
+         */
+        (isLtMedium) => {
+            this.isMobile = isLtMedium;
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    reInitiateSlideInterval() {
+        if (this.widgetData && this.widgetData.length > 1) {
+            try {
+                if (this.slideInterval) {
+                    this.slideInterval.unsubscribe();
+                }
+            }
+            catch (e) {
+            }
+            finally {
+                this.slideInterval = interval(8000).subscribe((/**
+                 * @return {?}
+                 */
+                () => {
+                    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 {?}
+     */
+    slideTo(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();
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get isOpenInNewTab() {
+        /** @type {?} */
+        const currentData = this.widgetData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * @return {?}
+     */
+    openInNewTab() {
+        /** @type {?} */
+        const currentData = this.widgetData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+            window.open(currentData.redirectUrl);
+        }
+    }
+    /**
+     * @param {?} bannerUrl
+     * @return {?}
+     */
+    raiseTelemetry(bannerUrl) {
+        this.openInNewTab();
+        /** @type {?} */
+        const path = window.location.pathname.replace('/', '');
+        /** @type {?} */
+        const url = path + window.location.search;
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'banner',
+        }, {
+            pageUrl: url,
+            bannerRedirectUrl: bannerUrl,
+        }, {
+            pageIdExt: 'banner',
+            module: WsEvents.EnumTelemetrymodules.CONTENT,
+        });
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        if (this.defaultMenuSubscribe) {
+            this.defaultMenuSubscribe.unsubscribe();
+        }
+    }
+}
+SlidersNgContentLibComponent.decorators = [
+    { type: 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 = () => [
+    { type: EventService },
+    { type: ValueService }
+];
+SlidersNgContentLibComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    styleData: [{ type: Input }],
+    title: [{ type: Input }],
+    loadNgContentData: [{ type: Input }],
+    autoScroll: [{ type: Input }],
+    currentIndexValue: [{ type: Output }],
+    id: [{ type: HostBinding, args: ['id',] }],
+    currentIndex: [{ type: Input }]
+};
+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 */
+class MyHammerConfig$1 extends HammerGestureConfig {
+    /**
+     * @param {?} element
+     * @return {?}
+     */
+    buildHammer(element) {
+        /** @type {?} */
+        const mc = new Hammer(element, {
+            touchAction: 'pan-y',
+        });
+        return mc;
+    }
+}
+// tslint:disable-next-line: max-classes-per-file
+class SlidersNgContentLibModule {
+}
+SlidersNgContentLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SlidersNgContentLibComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    NavigationModule,
+                    ImageResponsiveModule,
+                ],
+                exports: [SlidersNgContentLibComponent],
+                entryComponents: [SlidersNgContentLibComponent],
+                providers: [
+                    {
+                        provide: HAMMER_GESTURE_CONFIG,
+                        useClass: MyHammerConfig$1,
+                    },
+                ],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ScrollableItemModule {
+}
+ScrollableItemModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ScrollableItemDirective],
+                imports: [
+                    CommonModule,
+                ],
+                exports: [ScrollableItemDirective],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CbpPlanModule {
+}
+CbpPlanModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [CbpPlanComponent],
+                imports: [
+                    CommonModule,
+                    SkeletonLoaderLibModule,
+                    MatIconModule,
+                    ScrollableItemModule,
+                    SlidersNgContentLibModule,
+                ],
+                exports: [CbpPlanComponent]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ConsumptionModule {
+}
+ConsumptionModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ConsumptionComponent,],
+                imports: [
+                    ContentStripWithTabsLibModule,
+                    SlidersLibModule
+                ],
+                exports: [ConsumptionComponent,
+                    ContentStripWithTabsLibModule,
+                    SlidersLibModule,
+                    DataPointsModule,
+                    CalenderModule,
+                    CommonStripModule,
+                    AnnouncementsModule,
+                    TopLearnersModule,
+                    CbpPlanModule,
+                ],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const 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;
@@ -8808,7 +9680,7 @@ CardWideComponent.decorators = [
     { type: 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 */
@@ -13756,47 +14628,6 @@ if (false) {
     RatingService.prototype.http;
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ScrollableItemDirective {
-    /**
-     * @param {?} el
-     */
-    constructor(el) {
-        this.el = el;
-    }
-    /**
-     * @param {?} blockValue
-     * @return {?}
-     */
-    scrollIntoView(blockValue) {
-        this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
-    }
-}
-ScrollableItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sbUicScrollableItem]'
-            },] }
-];
-/** @nocollapse */
-ScrollableItemDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-ScrollableItemDirective.propDecorators = {
-    key: [{ type: Input, args: ['sbUicScrollableItem',] }]
-};
-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
@@ -13943,8 +14774,8 @@ class UserContentRatingLibComponent {
 UserContentRatingLibComponent.decorators = [
     { type: 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}"]
+                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 */
@@ -13983,283 +14814,641 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class SlidersNgContentLibComponent extends WidgetBaseComponent {
+class UserContentRatingLibModule {
+}
+UserContentRatingLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [UserContentRatingLibComponent],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatChipsModule,
+                    SkeletonLoaderLibModule,
+                    SlidersLibModule,
+                    CardsModule,
+                    AvatarPhotoLibModule,
+                    SlidersNgContentLibModule,
+                    ScrollableItemModule
+                ],
+                exports: [UserContentRatingLibComponent],
+                providers: [RatingService, UserContentRatingLibService],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class MdoChannelV1Component {
+    constructor() { }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+MdoChannelV1Component.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-mdo-channel-v1',
+                template: "<p>mdo-channel-v1 works!</p>\n",
+                styles: [""]
+            }] }
+];
+/** @nocollapse */
+MdoChannelV1Component.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class MdoChannelV2Component {
+    /**
+     * @param {?} route
+     * @param {?} router
+     * @param {?} eventSvc
+     * @param {?} translate
+     * @param {?} langtranslations
+     */
+    constructor(route, router, eventSvc, translate, langtranslations) {
+        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 {?}
+         */
+        () => {
+            if (localStorage.getItem('websiteLanguage')) {
+                this.translate.setDefaultLang('en');
+                /** @type {?} */
+                const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                this.translate.use(lang);
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.route.params.subscribe((/**
+         * @param {?} params
+         * @return {?}
+         */
+        params => {
+            this.channnelName = params['channel'];
+            this.orgId = params['orgId'];
+            this.titles.push({
+                title: this.channnelName, icon: '', url: 'none', disableTranslate: true,
+            });
+        }));
+    }
+    /**
+     * @param {?} tabEvent
+     * @return {?}
+     */
+    tabClicked(tabEvent) {
+        this.raiseTelemetry(`${tabEvent.tab.textLabel} tab`);
+    }
+    /**
+     * @param {?} event
+     * @param {?} contentStripData
+     * @return {?}
+     */
+    hideContentStrip(event, contentStripData) {
+        if (event) {
+            contentStripData['hideSection'] = true;
+            this.contentTabEmptyResponseCount = this.contentTabEmptyResponseCount + 1;
+            // if(this.contentTabEmptyResponseCount === 4 ) {
+            //   this.selectedIndex = 1
+            // }
+        }
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    triggerOpenDialog(event) {
+        if (event) {
+            this.showModal = true;
+            document.body.style.overflow = 'hidden';
+        }
+        this.raiseTelemetry('btn open key annoucements');
+    }
+    /**
+     * @return {?}
+     */
+    onClose() {
+        this.showModal = false;
+        document.body.style.overflow = 'auto';
+        this.raiseTelemetry('btn close key annoucements');
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    raiseTelemetryInteratEvent(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: `${kebabCase(event.typeOfTelemetry.toLocaleLowerCase())}-card`,
+            }, {
+                id: event.identifier,
+                type: event.primaryCategory,
+            }, {
+                pageIdExt: `${kebabCase(event.primaryCategory.toLocaleLowerCase())}-card`,
+                module: WsEvents.EnumTelemetrymodules.LEARN,
+            });
+            this.isTelemetryRaised = true;
+        }
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    raiseCompetencyTelemetry(name) {
+        this.raiseTelemetry(`${name} core expertise`);
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    raiseTelemetry(name) {
+        this.eventSvc.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'mdo-channel',
+            id: `${kebabCase(name).toLocaleLowerCase()}`,
+        }, {}, {
+            module: WsEvents.EnumTelemetrymodules.LEARN,
+        });
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    hideCompetency(event) {
+        if (event) {
+            this.hideCompetencyBlock = true;
+        }
+    }
+    /**
+     * @param {?} _stripData
+     * @param {?} contentStrip
+     * @return {?}
+     */
+    showAllContent(_stripData, contentStrip) {
+        if (contentStrip && contentStrip.strips && contentStrip.strips.length) {
+            /** @type {?} */
+            const 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: Component, args: [{
+                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 */
+MdoChannelV2Component.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: Router },
+    { type: EventService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService$1 }
+];
+MdoChannelV2Component.propDecorators = {
+    sectionList: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    MdoChannelV2Component.prototype.sectionList;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.channnelName;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.orgId;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.selectedIndex;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.hideCompetencyBlock;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.contentTabEmptyResponseCount;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.titles;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.showModal;
+    /** @type {?} */
+    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
+ */
+const ɵ0$7 = HttpLoaderFactory;
+class MDOChannelModule {
+}
+MDOChannelModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MdoChannelV1Component, MdoChannelV2Component],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatChipsModule,
+                    SkeletonLoaderLibModule,
+                    AnnouncementsModule,
+                    TopLearnersModule,
+                    CbpPlanModule,
+                    CardsModule,
+                    CommonStripModule,
+                    CompetencyPassbookModule,
+                    CompetencyPassbookMdoModule,
+                    ContentStripWithTabsLibModule,
+                    DataPointsModule,
+                    SlidersLibModule,
+                    MatTabsModule,
+                    TranslateModule.forRoot({
+                        loader: {
+                            provide: TranslateLoader,
+                            useFactory: ɵ0$7,
+                            deps: [HttpClient],
+                        },
+                    }),
+                ],
+                exports: [MdoChannelV1Component, MdoChannelV2Component],
+                providers: [
+                    CommonMethodsService
+                ],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ProvidersV2Component {
     /**
+     * @param {?} route
+     * @param {?} router
+     * @param {?} datePipe
      * @param {?} events
-     * @param {?} valueSvc
      */
-    constructor(events, valueSvc) {
-        super();
+    constructor(route, router, datePipe, events) {
+        this.route = route;
+        this.router = router;
+        this.datePipe = datePipe;
         this.events = events;
-        this.valueSvc = valueSvc;
-        this.title = '';
-        this.loadNgContentData = false;
-        this.autoScroll = false;
-        this.currentIndexValue = new EventEmitter();
-        this.id = `banner_${Math.random()}`;
-        this.defaultMenuSubscribe = null;
-        this.isLtMedium$ = this.valueSvc.isLtMedium$;
-        this.currentIndex = 0;
-        this.slideInterval = null;
-        this.isMobile = false;
+        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 {?}
      */
     ngOnInit() {
-        if (this.autoScroll) {
-            this.reInitiateSlideInterval();
-        }
-        this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
-         * @param {?} isLtMedium
+        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 {?}
          */
-        (isLtMedium) => {
-            this.isMobile = isLtMedium;
+        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 {?}
      */
-    reInitiateSlideInterval() {
-        if (this.widgetData && this.widgetData.length > 1) {
-            try {
-                if (this.slideInterval) {
-                    this.slideInterval.unsubscribe();
-                }
-            }
-            catch (e) {
-            }
-            finally {
-                this.slideInterval = interval(8000).subscribe((/**
+    getNavitems() {
+        this.navList = this.sectionList.filter((/**
+         * @param {?} obj
+         * @return {?}
+         */
+        (obj) => obj.enabled && obj.navigation && obj.navOrder)).sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (a, b) => a.navOrder - b.navOrder));
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    scrollToSection(name) {
+        /** @type {?} */
+        let 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 {?}
+     */
+    hideCompetency(event, columnData) {
+        if (event) {
+            this.hideCompetencyBlock = true;
+            columnData['navigation'] = false;
+            columnData['enabled'] = false;
+            this.navList.forEach((/**
+             * @param {?} navItem
+             * @return {?}
+             */
+            (navItem) => {
+                navItem.column.forEach((/**
+                 * @param {?} colEle
                  * @return {?}
                  */
-                () => {
-                    if (this.currentIndex === this.widgetData.length - 1) {
-                        this.currentIndex = 0;
-                        this.currentIndexValue.emit(this.currentIndex);
-                    }
-                    else {
-                        this.currentIndex += 1;
-                        this.currentIndexValue.emit(this.currentIndex);
+                (colEle) => {
+                    if (colEle.key === columnData.key) {
+                        navItem['navigation'] = false;
                     }
                 }));
-            }
+            }));
         }
     }
     /**
-     * @param {?} index
+     * @param {?} event
+     * @param {?} contentStripData
      * @return {?}
      */
-    slideTo(index) {
-        if (index >= 0 && index < this.widgetData.length) {
-            this.currentIndex = index;
-            this.currentIndexValue.emit(this.currentIndex);
+    hideContentStrip(event, contentStripData) {
+        if (event) {
+            contentStripData['hideSection'] = true;
         }
-        else if (index === this.widgetData.length) {
-            this.currentIndex = 0;
-            this.currentIndexValue.emit(this.currentIndex);
+    }
+    /**
+     * @param {?} event
+     * @param {?} learnerReview
+     * @return {?}
+     */
+    hideLearnerReview(event, learnerReview) {
+        if (event) {
+            learnerReview['hideSection'] = true;
         }
-        else {
-            this.currentIndex = this.widgetData.length + index;
-            this.currentIndexValue.emit(this.currentIndex);
+    }
+    /**
+     * @param {?} _stripData
+     * @param {?} contentStrip
+     * @return {?}
+     */
+    showAllContent(_stripData, contentStrip) {
+        if (contentStrip && contentStrip.strips && contentStrip.strips.length) {
+            /** @type {?} */
+            const 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 } });
+            }
         }
-        if (this.autoScroll) {
-            this.reInitiateSlideInterval();
+        else {
+            this.router.navigate([`/app/learn/browse-by/provider/${this.providerName}/${this.providerId}/all-CBP`], { queryParams: { pageDetails: true } });
         }
     }
     /**
+     * @param {?} event
      * @return {?}
      */
-    get isOpenInNewTab() {
-        /** @type {?} */
-        const currentData = this.widgetData[this.currentIndex];
-        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
-            return true;
+    raiseTelemetryInteratEvent(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: `${kebabCase(event.typeOfTelemetry.toLocaleLowerCase())}-card`,
+            }, {
+                id: event.identifier,
+                type: event.primaryCategory,
+            }, {
+                pageIdExt: `${kebabCase(event.primaryCategory.toLocaleLowerCase())}-card`,
+                module: WsEvents.EnumTelemetrymodules.LEARN,
+            });
+            this.isTelemetryRaised = true;
         }
-        return false;
     }
     /**
+     * @param {?} name
      * @return {?}
      */
-    openInNewTab() {
-        /** @type {?} */
-        const currentData = this.widgetData[this.currentIndex];
-        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
-            window.open(currentData.redirectUrl);
-        }
+    raiseCompetencyTelemetry(name) {
+        this.raiseTelemetry(`${name} core expertise`);
     }
     /**
-     * @param {?} bannerUrl
+     * @param {?} name
      * @return {?}
      */
-    raiseTelemetry(bannerUrl) {
-        this.openInNewTab();
-        /** @type {?} */
-        const path = window.location.pathname.replace('/', '');
-        /** @type {?} */
-        const url = path + window.location.search;
+    raiseTelemetry(name) {
         this.events.raiseInteractTelemetry({
             type: 'click',
-            subType: 'banner',
-        }, {
-            pageUrl: url,
-            bannerRedirectUrl: bannerUrl,
-        }, {
-            pageIdExt: 'banner',
-            module: WsEvents.EnumTelemetrymodules.CONTENT,
+            subType: 'ATI/CTI',
+            id: `${kebabCase(name).toLocaleLowerCase()}`,
+        }, {}, {
+            module: WsEvents.EnumTelemetrymodules.LEARN,
         });
     }
     /**
+     * @param {?} name
      * @return {?}
      */
-    ngOnDestroy() {
-        if (this.defaultMenuSubscribe) {
-            this.defaultMenuSubscribe.unsubscribe();
-        }
+    raiseNavTelemetry(name) {
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'ATI/CTI',
+            id: `${kebabCase(name).toLocaleLowerCase()}-navigation`,
+        }, {}, {
+            module: WsEvents.EnumTelemetrymodules.LEARN,
+        });
     }
 }
-SlidersNgContentLibComponent.decorators = [
+ProvidersV2Component.decorators = [
     { type: 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 = () => [
-    { type: EventService },
-    { type: ValueService }
+ProvidersV2Component.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: Router },
+    { type: DatePipe },
+    { type: EventService }
 ];
-SlidersNgContentLibComponent.propDecorators = {
-    widgetData: [{ type: Input }],
-    styleData: [{ type: Input }],
-    title: [{ type: Input }],
-    loadNgContentData: [{ type: Input }],
-    autoScroll: [{ type: Input }],
-    currentIndexValue: [{ type: Output }],
-    id: [{ type: HostBinding, args: ['id',] }],
-    currentIndex: [{ type: Input }]
+ProvidersV2Component.propDecorators = {
+    sectionList: [{ type: Input }]
 };
 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$;
+    ProvidersV2Component.prototype.route;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.currentIndex;
-    /** @type {?} */
-    SlidersNgContentLibComponent.prototype.slideInterval;
-    /** @type {?} */
-    SlidersNgContentLibComponent.prototype.isMobile;
+    ProvidersV2Component.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    SlidersNgContentLibComponent.prototype.events;
+    ProvidersV2Component.prototype.datePipe;
     /**
      * @type {?}
      * @private
      */
-    SlidersNgContentLibComponent.prototype.valueSvc;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/* tslint:enable */
-class MyHammerConfig$1 extends HammerGestureConfig {
-    /**
-     * @param {?} element
-     * @return {?}
-     */
-    buildHammer(element) {
-        /** @type {?} */
-        const mc = new Hammer(element, {
-            touchAction: 'pan-y',
-        });
-        return mc;
-    }
-}
-// tslint:disable-next-line: max-classes-per-file
-class SlidersNgContentLibModule {
-}
-SlidersNgContentLibModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SlidersNgContentLibComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule,
-                    NavigationModule,
-                    ImageResponsiveModule,
-                ],
-                exports: [SlidersNgContentLibComponent],
-                entryComponents: [SlidersNgContentLibComponent],
-                providers: [
-                    {
-                        provide: HAMMER_GESTURE_CONFIG,
-                        useClass: MyHammerConfig$1,
-                    },
-                ],
-            },] }
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ScrollableItemModule {
+    ProvidersV2Component.prototype.events;
 }
-ScrollableItemModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ScrollableItemDirective],
-                imports: [
-                    CommonModule,
-                ],
-                exports: [ScrollableItemDirective],
-            },] }
-];
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class UserContentRatingLibModule {
+const ɵ0$8 = HttpLoaderFactory;
+class ProvidersModule {
 }
-UserContentRatingLibModule.decorators = [
+ProvidersModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [UserContentRatingLibComponent],
+                declarations: [ProvidersV2Component],
                 imports: [
                     CommonModule,
                     MatIconModule,
+                    RouterModule,
                     MatChipsModule,
                     SkeletonLoaderLibModule,
-                    SlidersLibModule,
+                    CalenderModule,
                     CardsModule,
-                    AvatarPhotoLibModule,
-                    SlidersNgContentLibModule,
-                    ScrollableItemModule
+                    CommonStripModule,
+                    CompetencyPassbookModule,
+                    UserContentRatingLibModule,
+                    ContentStripWithTabsLibModule,
+                    DataPointsModule,
+                    SlidersLibModule,
+                    MatTabsModule,
+                    TranslateModule.forRoot({
+                        loader: {
+                            provide: TranslateLoader,
+                            useFactory: ɵ0$8,
+                            deps: [HttpClient],
+                        },
+                    }),
+                ],
+                exports: [ProvidersV2Component],
+                providers: [
+                    CommonMethodsService
                 ],
-                exports: [UserContentRatingLibComponent],
-                providers: [RatingService, UserContentRatingLibService],
                 schemas: [CUSTOM_ELEMENTS_SCHEMA]
             },] }
 ];
@@ -14274,5 +15463,5 @@ UserContentRatingLibModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentProgressModule, ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule, DataPointsModule, HttpLoaderFactory, HttpLoaderFactory1, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, CardKarmaProgramsComponent as ɵbb, CardKarmaProgramsV2Component as ɵbc, ProviderCardComponent as ɵbd, CardPortraitExtComponent as ɵbe, CardAssessmentComponent as ɵbf, CardProgressPortraitLibComponent as ɵbg, CertificateService as ɵbh, CardMdoChannelV1Component as ɵbi, PipePublicURLModule as ɵbj, PipePublicURL as ɵbk, ObjectToArrayPipeModule as ɵbl, ObjectToArrayPipe as ɵbm, DisplayContentTypeLibModule as ɵbn, DisplayContentTypeLibComponent as ɵbo, DefaultThumbnailModule as ɵbp, DefaultThumbnailDirective as ɵbq, PipeDurationTransformModule as ɵbr, PipeDurationTransformPipe as ɵbs, ContentProgressComponent as ɵbt, DialogComponentsModule as ɵbu, CertificateDialogComponent as ɵbv, AvatarPhotoLibModule as ɵbw, AvatarPhotoLibComponent as ɵbx, ContentStripWithTabsPillsComponent as ɵby, CompetencyPassbookComponent as ɵbz, MultilingualTranslationsService as ɵc, CompetencyPassbookService as ɵca, PillsModule as ɵcb, PillsComponent as ɵcc, CompetencyPassbookMdoComponent as ɵcd, CompetencyPassbookMdoService as ɵce, UserContentRatingLibComponent as ɵcf, ScrollableItemDirective as ɵcg, RatingService as ɵch, UserContentRatingLibService as ɵci, MyHammerConfig$1 as ɵcj, SlidersNgContentLibModule as ɵck, SlidersNgContentLibComponent as ɵcl, ScrollableItemModule as ɵcm, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
+export { AnnouncementsModule, CalenderModule, CardsModule, CbpPlanModule, CommonMethodsService, CommonStripModule, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentProgressModule, ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule, DataPointsModule, HttpLoaderFactory, HttpLoaderFactory1, MDOChannelModule, MyHammerConfig, ProvidersModule, ROOT_WIDGET_CONFIG, SlidersLibModule, TopLearnersModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardResourceComponent as ɵba, CardsComponent as ɵbb, CardPortraitComponent as ɵbc, CardUserComponent as ɵbd, CardLandscapeComponent as ɵbe, CardWideComponent as ɵbf, CardMDOChannelComponent as ɵbg, CardWideV2Component as ɵbh, CardKarmaProgramsComponent as ɵbi, CardKarmaProgramsV2Component as ɵbj, ProviderCardComponent as ɵbk, CardPortraitExtComponent as ɵbl, CardAssessmentComponent as ɵbm, CardProgressPortraitLibComponent as ɵbn, CertificateService as ɵbo, CardMdoChannelV1Component as ɵbp, PipePublicURLModule as ɵbq, PipePublicURL as ɵbr, ObjectToArrayPipeModule as ɵbs, ObjectToArrayPipe as ɵbt, DisplayContentTypeLibModule as ɵbu, DisplayContentTypeLibComponent as ɵbv, DefaultThumbnailModule as ɵbw, DefaultThumbnailDirective as ɵbx, PipeDurationTransformModule as ɵby, PipeDurationTransformPipe as ɵbz, MultilingualTranslationsService as ɵc, ContentProgressComponent as ɵca, DialogComponentsModule as ɵcb, CertificateDialogComponent as ɵcc, AvatarPhotoLibModule as ɵcd, AvatarPhotoLibComponent as ɵce, ContentStripWithTabsPillsComponent as ɵcf, CompetencyPassbookComponent as ɵcg, CompetencyPassbookService as ɵch, PillsModule as ɵci, PillsComponent as ɵcj, CompetencyPassbookMdoComponent as ɵck, CompetencyPassbookMdoService as ɵcl, UserContentRatingLibComponent as ɵcm, RatingService as ɵcn, UserContentRatingLibService as ɵco, MdoChannelV1Component as ɵcp, MdoChannelV2Component as ɵcq, ProvidersV2Component as ɵcr, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, TopLearnersComponent as ɵt, CbpPlanComponent as ɵu, ScrollableItemDirective as ɵv, ScrollableItemModule as ɵw, MyHammerConfig$1 as ɵx, SlidersNgContentLibModule as ɵy, SlidersNgContentLibComponent as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map