@sunbird-cb/consumption 0.0.53 → 0.0.55

package/fesm5/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 { __assign, __awaiter, __generator, __extends, __values, __spread, __read } 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';
@@ -1478,7 +1478,7 @@ function viewerRouteGenerator(id, mimeType, collectionId, collectionType, forPre
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-var moment = moment$1;
+var moment = moment$2;
 // tslint:enable
 // TODO: move this in some common place
 /** @type {?} */
@@ -3663,6 +3663,8 @@ if (false) {
     /** @type {?} */
     IStripUnitContentData.prototype.stripConfig;
     /** @type {?|undefined} */
+    IStripUnitContentData.prototype.tabsType;
+    /** @type {?|undefined} */
     IStripUnitContentData.prototype.tabs;
     /** @type {?|undefined} */
     IStripUnitContentData.prototype.stripName;
@@ -4960,6 +4962,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                     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,
@@ -5117,6 +5120,12 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                 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;
                 }
@@ -5562,7 +5571,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (strip, calculateParentStatus) {
         if (calculateParentStatus === void 0) { calculateParentStatus = true; }
         return __awaiter(this, void 0, void 0, function () {
-            var originalFilters, response, error_5;
+            var originalFilters, firstTab, allTabs, currentTabFromMap, response, error_5;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -5575,7 +5584,17 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                             originalFilters = strip.request.topContent.request.filters;
                             strip.request.topContent.request.filters = this.postMethodFilters(strip.request.topContent.request.filters);
                         }
-                        _a.label = 1;
+                        if (!(strip.tabs && strip.tabs.length)) return [3 /*break*/, 1];
+                        // TODO: Have to extract requestRequired to outer level of tabs config
+                        firstTab = strip.tabs[0];
+                        if (firstTab.requestRequired) {
+                            if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
+                                this.getTabDataByNewReqTopContent(strip, 0, currentTabFromMap, calculateParentStatus);
+                            }
+                        }
+                        return [3 /*break*/, 4];
                     case 1:
                         _a.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus)];
@@ -5662,6 +5681,64 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * @param {?} strip
+     * @param {?} tabIndex
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    ContentStripWithTabsLibComponent.prototype.getTabDataByNewReqTopContent = /**
+     * @param {?} strip
+     * @param {?} tabIndex
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    function (strip, tabIndex, currentTab, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, widgets, tabResults, allTabs, error_7;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (currentTab.request &&
+                            currentTab.request.topContent &&
+                            currentTab.request.topContent.request &&
+                            currentTab.request.topContent.request.filters) {
+                            currentTab.request.topContent.request.filters = this.postMethodFilters(currentTab.request.topContent.request.filters);
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        // const response = await this.searchV6Request(strip, currentTab.request, calculateParentStatus);
+                        return [4 /*yield*/, this.postRequestMethod(strip, currentTab.request.topContent, currentTab.request.apiUrl, calculateParentStatus)];
+                    case 2:
+                        response = _a.sent();
+                        if (response.results && response.results.result) {
+                            widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                            tabResults = [];
+                            if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                    allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { widgets: widgets, fetchTabStatus: 'done' });
+                                    tabResults = allTabs;
+                                }
+                            }
+                            this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
+                            );
+                        }
+                        else {
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_7 = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     /**
      * @param {?} stripData
      * @return {?}
@@ -5835,7 +5912,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (filters) {
         if (filters.organisation &&
             filters.organisation.indexOf('<orgID>') >= 0) {
-            filters.organisation = this.providerId;
+            filters.organisation = filters.organisation.replace('<orgID>', this.providerId);
         }
         return filters;
     };
@@ -5851,7 +5928,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
      */
     function (apiUrl, id) {
         /** @type {?} */
-        var formedUrl = '';
+        var formedUrl = apiUrl;
         if (apiUrl.indexOf('<bookmarkId>') >= 0) {
             formedUrl = apiUrl.replace('<bookmarkId>', this.environment.mdoChannelsBookmarkId);
         }
@@ -5897,7 +5974,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (strip, calculateParentStatus) {
         if (calculateParentStatus === void 0) { calculateParentStatus = true; }
         return __awaiter(this, void 0, void 0, function () {
-            var originalFilters, response, content, error_7;
+            var originalFilters, response, content, error_8;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -5924,7 +6001,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_7 = _a.sent();
+                        error_8 = _a.sent();
                         this.emptyResponse.emit(true);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
@@ -5975,7 +6052,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (strip, calculateParentStatus) {
         if (calculateParentStatus === void 0) { calculateParentStatus = true; }
         return __awaiter(this, void 0, void 0, function () {
-            var originalFilters, response, finalPlaylistData_1, programData, error_8;
+            var originalFilters, response, finalPlaylistData_1, programData, error_9;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -6027,7 +6104,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_8 = _a.sent();
+                        error_9 = _a.sent();
                         this.emptyResponse.emit(true);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
@@ -6048,7 +6125,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (strip, calculateParentStatus) {
         if (calculateParentStatus === void 0) { calculateParentStatus = true; }
         return __awaiter(this, void 0, void 0, function () {
-            var originalFilters, response, content, featuredProviders, error_9;
+            var originalFilters, firstTab, allTabs, currentTabFromMap, response, content, featuredProviders, error_10;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -6059,7 +6136,17 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                             strip.request.playlistRead.type) {
                             strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.playlistRead.type);
                         }
-                        _a.label = 1;
+                        if (!(strip.tabs && strip.tabs.length)) return [3 /*break*/, 1];
+                        // TODO: Have to extract requestRequired to outer level of tabs config
+                        firstTab = strip.tabs[0];
+                        if (firstTab.requestRequired) {
+                            if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
+                                this.getTabDataByNewReqPlaylistReadContent(strip, 0, currentTabFromMap, calculateParentStatus);
+                            }
+                        }
+                        return [3 /*break*/, 4];
                     case 1:
                         _a.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, this.getRequestMethod(strip, strip.request.playlistRead, strip.request.apiUrl, calculateParentStatus)];
@@ -6081,7 +6168,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_9 = _a.sent();
+                        error_10 = _a.sent();
                         this.emptyResponse.emit(true);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
@@ -6089,6 +6176,107 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * @param {?} strip
+     * @param {?} tabIndex
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    ContentStripWithTabsLibComponent.prototype.getTabDataByNewReqPlaylistReadContent = /**
+     * @param {?} strip
+     * @param {?} tabIndex
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    function (strip, tabIndex, currentTab, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, widgets, tabResults, allTabs, tabResults, allTabs, error_11, tabResults, allTabs;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (currentTab.request &&
+                            strip.request.playlistRead &&
+                            strip.request.playlistRead.type) {
+                            currentTab.request.apiUrl = this.getFullUrl(currentTab.request.apiUrl, currentTab.request.playlistRead.type);
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.getRequestMethod(strip, currentTab.request.playlistRead, currentTab.request.apiUrl, calculateParentStatus)];
+                    case 2:
+                        response = _a.sent();
+                        // if (response && response.results.result.content) {  
+                        //   let content  = response.results.result.content
+                        //   if(strip.key === 'providers'){
+                        //     let featuredProviders : any = JSON.parse(content.featuredProviders|| '[]')
+                        //     this.processStrip(
+                        //       strip,
+                        //       this.transformAllContentsToWidgets(featuredProviders, strip),
+                        //       'done',
+                        //       calculateParentStatus,
+                        //       response,
+                        //     );
+                        //   } else {
+                        //     this.processStrip(
+                        //       strip,
+                        //       this.transformAllContentsToWidgets(content, strip),
+                        //       'done',
+                        //       calculateParentStatus,
+                        //       response,
+                        //     );
+                        //   }
+                        // } else {
+                        //   this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        //   this.emptyResponse.emit(true)
+                        // }
+                        if (response.results && response.results.result) {
+                            widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                            tabResults = [];
+                            if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                    allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { widgets: widgets, fetchTabStatus: 'done' });
+                                    tabResults = allTabs;
+                                }
+                            }
+                            this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
+                            );
+                        }
+                        else {
+                            tabResults = [];
+                            if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                                allTabs = this.stripsResultDataMap[strip.key].tabs;
+                                if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                    allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
+                                    tabResults = allTabs;
+                                }
+                            }
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_11 = _a.sent();
+                        console.error('Error:', error_11);
+                        tabResults = [];
+                        if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs && this.stripsResultDataMap[strip.key].tabs.length) {
+                            allTabs = this.stripsResultDataMap[strip.key].tabs;
+                            if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                                allTabs[tabIndex] = __assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
+                                tabResults = allTabs;
+                            }
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
+                        }
+                        else {
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        }
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     /**
      * @param {?} strip
      * @param {?=} calculateParentStatus
@@ -6102,7 +6290,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (strip, calculateParentStatus) {
         if (calculateParentStatus === void 0) { calculateParentStatus = true; }
         return __awaiter(this, void 0, void 0, function () {
-            var originalFilters, response, extContentData, error_10;
+            var originalFilters, response, extContentData, error_12;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -6143,7 +6331,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_10 = _a.sent();
+                        error_12 = _a.sent();
                         this.emptyResponse.emit(true);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
@@ -6154,8 +6342,8 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     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 */
@@ -6838,7 +7026,8 @@ var SlidersLibModule = /** @class */ (function () {
 var API_END_POINTS$2 = {
     PROVIDER_INSIGHTS: "/apis/proxies/v8/microsite/read/insights",
     TRAINING_DETAILS: "apis/proxies/v8/sunbirdigot/search",
-    ANNOUNCEMENTS_DETAILS: "apis/proxies/v8/announcements/v1/search"
+    ANNOUNCEMENTS_DETAILS: "apis/proxies/v8/announcements/v1/search",
+    LEARNERS: "apis/proxies/v8/halloffame/top/learners"
 };
 var InsiteDataService = /** @class */ (function () {
     function InsiteDataService(http) {
@@ -6877,6 +7066,15 @@ var InsiteDataService = /** @class */ (function () {
     function (request) {
         return this.http.post(API_END_POINTS$2.TRAINING_DETAILS, request);
     };
+    /**
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchLearner = /**
+     * @return {?}
+     */
+    function () {
+        return this.http.get(API_END_POINTS$2.LEARNERS);
+    };
     InsiteDataService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -6992,11 +7190,36 @@ var DataPointsComponent = /** @class */ (function () {
             _this.isDataLoading = false;
         }));
     };
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    DataPointsComponent.prototype.converToIndianSystem = /**
+     * @param {?} value
+     * @return {?}
+     */
+    function (value) {
+        /** @type {?} */
+        var numStr = value.toString();
+        var _a = __read(numStr.split('.'), 2), integerPart = _a[0], decimalPart = _a[1];
+        /** @type {?} */
+        var lastThree = integerPart.slice(-3);
+        /** @type {?} */
+        var otherNumbers = integerPart.slice(0, -3);
+        if (otherNumbers !== '') {
+            lastThree = ',' + lastThree;
+        }
+        /** @type {?} */
+        var formattedIntegerPart = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + lastThree;
+        /** @type {?} */
+        var result = decimalPart ? formattedIntegerPart + "." + decimalPart.substr(0, 2) : formattedIntegerPart;
+        return result;
+    };
     DataPointsComponent.decorators = [
         { type: 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 */
@@ -8484,6 +8707,8 @@ var AnnouncementsComponent = /** @class */ (function () {
         this.openDialog = new EventEmitter();
         this.isLoading = false;
         this.announcements = [];
+        this.expand = false;
+        this.expanded = false;
     }
     /**
      * @return {?}
@@ -8541,6 +8766,9 @@ var AnnouncementsComponent = /** @class */ (function () {
                     });
                 }));
             }
+            if (_this.announcements.length > 3) {
+                _this.expand = true;
+            }
             _this.objectData.list = _this.announcements;
             _this.isLoading = false;
         }), (/**
@@ -8575,11 +8803,20 @@ var AnnouncementsComponent = /** @class */ (function () {
     function () {
         this.openDialog.emit(true);
     };
+    /**
+     * @return {?}
+     */
+    AnnouncementsComponent.prototype.showMoreOrLess = /**
+     * @return {?}
+     */
+    function () {
+        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 */
@@ -8614,6 +8851,10 @@ if (false) {
     /** @type {?} */
     AnnouncementsComponent.prototype.announcements;
     /** @type {?} */
+    AnnouncementsComponent.prototype.expand;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.expanded;
+    /** @type {?} */
     AnnouncementsComponent.prototype.insightSvc;
 }
 
@@ -8638,560 +8879,1296 @@ var AnnouncementsModule = /** @class */ (function () {
     return AnnouncementsModule;
 }());
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var ConsumptionModule = /** @class */ (function () {
-    function ConsumptionModule() {
-    }
-    ConsumptionModule.decorators = [
-        { type: NgModule, args: [{
-                    declarations: [ConsumptionComponent],
-                    imports: [
-                        ContentStripWithTabsLibModule,
-                        SlidersLibModule
-                    ],
-                    exports: [ConsumptionComponent,
-                        ContentStripWithTabsLibModule,
-                        SlidersLibModule,
-                        DataPointsModule,
-                        CalenderModule,
-                        CommonStripModule,
-                        AnnouncementsModule
-                    ],
-                },] }
-    ];
-    return ConsumptionModule;
-}());
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-var ROOT_WIDGET_CONFIG = {
-    card: {
-        _type: 'cardLib',
-        cardResource: 'cardContentLib'
-    },
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var NsCardContent$1;
-(function (NsCardContent) {
-    /**
-     * @record
-     */
-    function ICard() { }
-    NsCardContent.ICard = ICard;
-    if (false) {
-        /** @type {?} */
-        ICard.prototype.content;
-        /** @type {?} */
-        ICard.prototype.cardSubType;
-        /** @type {?} */
-        ICard.prototype.context;
-        /** @type {?|undefined} */
-        ICard.prototype.intranetMode;
-        /** @type {?|undefined} */
-        ICard.prototype.deletedMode;
-        /** @type {?|undefined} */
-        ICard.prototype.likes;
-        /** @type {?|undefined} */
-        ICard.prototype.contentTags;
-        /** @type {?} */
-        ICard.prototype.stateData;
-        /** @type {?|undefined} */
-        ICard.prototype.cardCustomeClass;
+var moment$1 = moment$2;
+var TopLearnersComponent = /** @class */ (function () {
+    function TopLearnersComponent(insightSvc) {
+        this.insightSvc = insightSvc;
+        this.loading = false;
+        this.month = '';
+        this.results = [];
+        this.colors = [
+            '#EB7181',
+            '#306933',
+            '#000000',
+            '#3670B2',
+            '#4E9E87',
+            '#7E4C8D',
+            '#EB7181',
+            '#306933',
+            '#000000',
+            '#3670B2',
+        ];
     }
     /**
-     * @record
+     * @return {?}
      */
-    function IContentTags() { }
-    NsCardContent.IContentTags = IContentTags;
-    if (false) {
-        /** @type {?|undefined} */
-        IContentTags.prototype.daysSpan;
-        /** @type {?|undefined} */
-        IContentTags.prototype.excludeContentType;
-        /** @type {?|undefined} */
-        IContentTags.prototype.excludeMimeType;
-        /** @type {?} */
-        IContentTags.prototype.tag;
-        /** @type {?|undefined} */
-        IContentTags.prototype.criteriaField;
-    }
-    var EContentStatus;
-    (function (EContentStatus) {
-        EContentStatus["LIVE"] = "Live";
-        EContentStatus["EXPIRED"] = "Expired";
-        EContentStatus["DELETED"] = "Deleted";
-        EContentStatus["MARK_FOR_DELETION"] = "MarkedForDeletion";
-    })(EContentStatus = NsCardContent.EContentStatus || (NsCardContent.EContentStatus = {}));
-    var ACBPConst;
-    (function (ACBPConst) {
-        ACBPConst["UPCOMING"] = "upcoming";
-        ACBPConst["ALL"] = "All";
-        ACBPConst["OVERDUE"] = "overdue";
-        ACBPConst["SUCCESS"] = "success";
-    })(ACBPConst = NsCardContent.ACBPConst || (NsCardContent.ACBPConst = {}));
-    var IGOTConst;
-    (function (IGOTConst) {
-        IGOTConst["COMPETENCIES"] = "competencies_v5";
-        IGOTConst["RETIRED"] = "Retired";
-    })(IGOTConst = NsCardContent.IGOTConst || (NsCardContent.IGOTConst = {}));
-})(NsCardContent$1 || (NsCardContent$1 = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var CardsComponent = /** @class */ (function (_super) {
-    __extends(CardsComponent, _super);
-    function CardsComponent(utilitySvc, contSvc, router) {
-        var _this = _super.call(this) || this;
-        _this.utilitySvc = utilitySvc;
-        _this.contSvc = contSvc;
-        _this.router = router;
-        _this.triggerTelemetry = new EventEmitter();
-        _this.isIntranetAllowedSettings = false;
-        return _this;
-    }
+    TopLearnersComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.getData();
+        this.month = new Date().toLocaleString('default', { month: 'long' });
+    };
     /**
      * @return {?}
      */
-    CardsComponent.prototype.ngOnInit = /**
+    TopLearnersComponent.prototype.getData = /**
      * @return {?}
      */
     function () {
         var _this = this;
-        this.cbPlanInterval = setInterval((/**
-         * @return {?}
-         */
-        function () {
-            _this.getCbPlanData();
-        }), 1000);
-        this.enrollInterval = setInterval((/**
-         * @return {?}
-         */
-        function () {
-            _this.getEnrollmentData();
-            // tslint:disable-next-line
-        }), 1000);
-    };
-    Object.defineProperty(CardsComponent.prototype, "isLiveOrMarkForDeletion", {
-        get: /**
+        this.loading = true;
+        this.insightSvc.fetchLearner().subscribe((/**
+         * @param {?} res
          * @return {?}
          */
-        function () {
-            if (!this.widgetData.content.status ||
-                this.widgetData.content.status === 'Live' ||
-                this.widgetData.content.status === 'MarkedForDeletion') {
-                return true;
+        function (res) {
+            if (res && res.result && res.result.result) {
+                _this.results = res.result.result;
+                _this.month = moment$1().month(Number(res.result.result[0].month) - 1).format('MMMM');
             }
-            return false;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(CardsComponent.prototype, "showIntranetContent", {
-        get: /**
+            _this.loading = false;
+        }), (/**
+         * @param {?} _error
          * @return {?}
          */
-        function () {
-            if (this.widgetData.content.isInIntranet && this.utilitySvc.isMobile) {
-                return !this.isIntranetAllowedSettings;
-            }
-            return false;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @param {?} content
-     * @return {?}
-     */
-    CardsComponent.prototype.getRedirectUrlData = /**
-     * @param {?} content
-     * @return {?}
-     */
-    function (content) {
-        return __awaiter(this, void 0, void 0, function () {
-            var urlData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!content.externalId) return [3 /*break*/, 1];
-                        this.router.navigate(["app/toc/ext/" + content.contentId]);
-                        return [3 /*break*/, 3];
-                    case 1: return [4 /*yield*/, this.contSvc.getResourseLink(content)];
-                    case 2:
-                        urlData = _a.sent();
-                        this.router.navigate([urlData.url], {
-                            queryParams: urlData.queryParams
-                        });
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        });
+        function (_error) {
+            // tslint:disable-next-line: align
+            _this.loading = false;
+        }));
     };
     /**
+     * @param {?} rank
      * @return {?}
      */
-    CardsComponent.prototype.getCbPlanData = /**
+    TopLearnersComponent.prototype.getRank = /**
+     * @param {?} rank
      * @return {?}
      */
-    function () {
-        /** @type {?} */
-        var cbpList = {};
-        if (localStorage.getItem('cbpData')) {
-            /** @type {?} */
-            var cbpListArr = JSON.parse(localStorage.getItem('cbpData') || '');
-            if (cbpListArr && cbpListArr.length) {
-                cbpListArr.forEach((/**
-                 * @param {?} data
-                 * @return {?}
-                 */
-                function (data) {
-                    cbpList[data.identifier] = data;
-                }));
-            }
-            this.cbPlanMapData = cbpList;
-            // this.karmaPointLoading = false
-            clearInterval(this.cbPlanInterval);
+    function (rank) {
+        if (rank === 1) {
+            return "1st";
+        }
+        if (rank === 2) {
+            return "2nd";
+        }
+        if (rank === 3) {
+            return "3rd";
+        }
+        else {
+            return rank + "th";
         }
     };
     /**
      * @return {?}
      */
-    CardsComponent.prototype.getEnrollmentData = /**
+    TopLearnersComponent.prototype.getColor = /**
      * @return {?}
      */
     function () {
-        if (localStorage.getItem('enrollmentMapData')) {
-            this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
-            clearInterval(this.enrollInterval);
-        }
+        /** @type {?} */
+        var circleColor = '';
+        /** @type {?} */
+        var randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+        circleColor = this.colors[randomIndex];
+        return circleColor;
     };
     /**
-     * @param {?} data
+     * @param {?} name
      * @return {?}
      */
-    CardsComponent.prototype.raiseCardClick = /**
-     * @param {?} data
+    TopLearnersComponent.prototype.createInititals = /**
+     * @param {?} name
      * @return {?}
      */
-    function (data) {
-        this.triggerTelemetry.emit(data);
+    function (name) {
+        /** @type {?} */
+        var initials = '';
+        /** @type {?} */
+        var array = name.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (var i = 0; i < name.length; i += 1) {
+                if (name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (name.charAt(i) === name.charAt(i)) {
+                    initials += name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        return initials.toUpperCase();
     };
-    CardsComponent.decorators = [
+    TopLearnersComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'sb-uic-cards',
-                    template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" \n  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" [enrollmentMapData]=\"enrollmentMapData\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n<ng-template #cardProvider>\n  <sb-uic-provider-card  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n  <sb-uic-provider-card  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n",
-                    styles: [""]
+                    selector: 'sb-uic-top-learners',
+                    template: "<div class=\"flex flex-center\">\n    <div>\n        <div class=\"title-border\"></div>\n        <div class=\"title\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n        <div class=\"title-border\"></div>\n    </div>    \n</div>\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length\">\n    <div class=\"w-full margin-bottom-l margin-top-l\">\n        <div class=\"flex gap-3\">\n            <div *ngFor=\"let obj of results; let i=index\" class=\"flex-container\">\n                <div class=\"flex-item user-box\">\n                    <div class=\"flex gap-3 img-name-sec\">\n                        <div class=\"flex gap-3\">\n                            <div class=\"profile-pic\" *ngIf=\"obj?.profile_image\">\n                                <img [src]=\"obj?.profile_image\" class=\"user-image\"/>\n                            </div>\n                            <div class=\"initial\" *ngIf=\"!obj?.profile_image\"\n                                [style.backgroundColor]=\"colors[i]\">\n                                {{createInititals(obj?.fullname)}}\n                            </div>\n                            <div class=\"flex flex-col gap-1\">\n                                <div class=\"name-sec\">{{obj?.fullname}}</div>\n                                <div class=\"designation-sec\">{{obj?.designation}}</div>\n                                <div class=\"designation-sec\">{{channnelName}}</div>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-3\">                                                       \n                            <div class=\"rank-sec\">{{getRank(+obj?.rank)}}</div>\n                        </div>                        \n                    </div>\n                    <div class=\"flex gap-2 kp-section\">\n                        <div class=\"kp-icon\"><img [src]=\"objectData?.kpIcon\" class=\"kp-image\"/></div>\n                        <div class=\"points\">{{obj?.total_points || 0}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length === 0\">\n    <div class=\"margin-top-l noData\">\n        No data\n    </div>\n</div>\n\n<ng-container>\n    <div class=\"top-learners-container\" *ngIf=\"loading\">\n        <div class=\"w-full margin-bottom-l margin-top-l\">\n            <div class=\"flex gap-3\">\n                <div *ngFor=\"let obj of [1,2,3]\" class=\"flex-container\">\n                    <div class=\"flex-item user-box\">\n                        <div class=\"flex gap-3 img-name-sec\">\n                            <div class=\"flex gap-3\">\n                                <div class=\"profile-pic\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex flex-col gap-1\">\n                                    <div class=\"name-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-3\">                                                       \n                                <div class=\"rank-sec\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>                        \n                        </div>\n                        <div class=\"flex gap-2 kp-section\">\n                            <div class=\"kp-icon\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>   \n                            </div>\n                            <div class=\"points\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>",
+                    styles: [".title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:15px}.title-border{margin:10px;width:240px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.noData{border:1px solid #1b4ca1;padding:15px;display:flex;justify-content:center;border-radius:12px}.top-learners-container{overflow:auto}::-webkit-scrollbar{height:10px!important}::-webkit-scrollbar-track{background:#eff3f9!important}.user-box{width:360px;height:134px;border-radius:8px;background-color:#fff;padding:16px;position:relative}.flex-container{display:flex}.flex-item{flex:0 0 auto;white-space:nowrap}.img-name-sec{justify-content:space-between}.initial{width:44px;height:44px;border-radius:50%;align-items:center;display:flex;justify-content:center;font-weight:700;color:#fff}.user-image{width:44px;height:44px;border-radius:50%}.name-sec{font-family:Lato;font-size:16px;font-weight:700;line-height:19.2px;text-align:left;width:200px!important;overflow:hidden;text-overflow:ellipsis}.designation-sec{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6;width:200px!important;overflow:hidden;text-overflow:ellipsis}.rank-sec{font-family:Montserrat;font-size:36px;font-weight:700;line-height:43.88px;text-align:left;color:#ef951e}.kp-section{justify-content:flex-end;position:absolute;right:18px;bottom:16px;align-items:center}.kp-image{width:32px;height:32px;padding-top:3px}.points{font-family:Lato;font-size:24px;font-weight:700;line-height:28.8px;text-align:left;color:#1b4ca1;padding-bottom:3px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(204,204,204,.8);border-radius:10px}@media screen and (max-width:768px){.user-box{width:343px}}"]
                 }] }
     ];
     /** @nocollapse */
-    CardsComponent.ctorParameters = function () { return [
-        { type: UtilityService },
-        { type: WidgetContentService },
-        { type: Router }
+    TopLearnersComponent.ctorParameters = function () { return [
+        { type: InsiteDataService }
     ]; };
-    CardsComponent.propDecorators = {
-        widgetData: [{ type: Input }],
-        triggerTelemetry: [{ type: Output }]
+    TopLearnersComponent.propDecorators = {
+        objectData: [{ type: Input }],
+        channelId: [{ type: Input }],
+        channnelName: [{ type: Input }]
     };
-    return CardsComponent;
-}(WidgetBaseComponent));
+    return TopLearnersComponent;
+}());
 if (false) {
     /** @type {?} */
-    CardsComponent.prototype.widgetData;
+    TopLearnersComponent.prototype.objectData;
     /** @type {?} */
-    CardsComponent.prototype.triggerTelemetry;
+    TopLearnersComponent.prototype.channelId;
     /** @type {?} */
-    CardsComponent.prototype.isIntranetAllowedSettings;
+    TopLearnersComponent.prototype.channnelName;
     /** @type {?} */
-    CardsComponent.prototype.cbPlanMapData;
+    TopLearnersComponent.prototype.loading;
     /** @type {?} */
-    CardsComponent.prototype.cbPlanInterval;
+    TopLearnersComponent.prototype.month;
     /** @type {?} */
-    CardsComponent.prototype.enrollInterval;
+    TopLearnersComponent.prototype.results;
     /** @type {?} */
-    CardsComponent.prototype.enrollmentMapData;
-    /**
-     * @type {?}
-     * @private
-     */
-    CardsComponent.prototype.utilitySvc;
-    /**
-     * @type {?}
-     * @private
-     */
-    CardsComponent.prototype.contSvc;
+    TopLearnersComponent.prototype.colors;
     /** @type {?} */
-    CardsComponent.prototype.router;
+    TopLearnersComponent.prototype.insightSvc;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var CardResourceComponent = /** @class */ (function (_super) {
-    __extends(CardResourceComponent, _super);
-    function CardResourceComponent() {
-        return _super.call(this) || this;
+var TopLearnersModule = /** @class */ (function () {
+    function TopLearnersModule() {
+    }
+    TopLearnersModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [TopLearnersComponent],
+                    imports: [
+                        CommonModule,
+                        SkeletonLoaderLibModule
+                    ],
+                    exports: [TopLearnersComponent],
+                },] }
+    ];
+    return TopLearnersModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var ScrollableItemDirective = /** @class */ (function () {
+    function ScrollableItemDirective(el) {
+        this.el = el;
     }
     /**
+     * @param {?} blockValue
      * @return {?}
      */
-    CardResourceComponent.prototype.ngOnInit = /**
+    ScrollableItemDirective.prototype.scrollIntoView = /**
+     * @param {?} blockValue
      * @return {?}
      */
-    function () {
+    function (blockValue) {
+        this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
     };
-    CardResourceComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'ws-cb-widget-card-resource',
-                    template: " <!-- <mat-card class=\"card-resource-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n      greyOut:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n    <div class=\"display-contents\" [ngClass]=\"{\n        disableClick:\n          widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n            ? true\n            : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n      }\">\n      <ng-container *ngIf=\"widgetData.content\">\n        <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n            role=\"link\" i18n-aria-label>\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n          matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n          matTooltip=\"Available only in Company's network\"\n          *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n        <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n          (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n          <mat-icon>flip_to_back</mat-icon>\n        </button>\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container *ngIf=\"widgetData.content.posterImage\">\n              <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-container *ngIf=\"!widgetData.content.posterImage\">\n              <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData.content.name\" />\n              </ng-container>\n              <ng-template #defaultImg>\n                <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                [alt]=\"widgetData.content.name\" />\n              </ng-template>\n            </ng-container>\n            <div class=\"source-div\" style=\"display: none;\">\n              <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n              <div class=\"cbp-mark\">\n                <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n              <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                cbpData: cbPlanMapData[widgetData?.content?.identifier]\n              }}\"></ng-container>\n            </ng-container>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n              </span>\n            </div>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n              </span>\n            </div>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end course_v2\">\n                <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                <ws-widget-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                  ?'Module'\n                  :widgetData.content?.primaryCategory\">\n\n                </ws-widget-display-content-type>\n              </div>\n              <div class=\"flex ml-5 flex-end course_v2\">\n                <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                <ws-widget-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                  ?'Module'\n                  :widgetData.content?.primaryCategory\">\n\n                </ws-widget-display-content-type>\n              </div>\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n              class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              {{ widgetData.content.name }}\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n              class=\"mat-subheading-1 description-text font-medium ws-mat-text-block-fade-gradient\">\n              {{ widgetData.content.name }}\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n              <div class=\"course_logo_box\">\n                <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n              </div>\n              <span class=\"org-text\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n      <ng-container *ngIf=\"isCardFlipped\">\n        <div class=\"flex items-center\">\n          <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2>\n          <button mat-icon-button (click)=\"isCardFlipped = false\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <p class=\"text-justify mat-body-1\">\n          {{ widgetData.content.reason }}\n        </p>\n      </ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </mat-card> -->\n",
-                    styles: [".card-resource-container{position:relative;width:384px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:450px;margin:20px 8px}.card-resource-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-resource-container .description-text{margin:12px 0;font-weight:400}.card-resource-container .course_logo_box{width:24px;height:24px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1607843137);box-sizing:border-box}.card-resource-container .course_logo_box img{height:18px;width:18px;padding:2px;display:inline-block}.card-resource-container .course_logo_box p{display:inline-block;vertical-align:top}.card-resource-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-resource-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-resource-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-resource-container mat-card-content{background:#fff}.card-resource-container .card-img{max-height:240px;min-height:240px;width:100%;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px}.card-resource-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-resource-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-resource-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-resource-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-resource-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-resource-container .basic{margin:auto 0}.card-resource-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-resource-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}"]
-                }] }
+    ScrollableItemDirective.decorators = [
+        { type: Directive, args: [{
+                    selector: '[sbUicScrollableItem]'
+                },] }
     ];
     /** @nocollapse */
-    CardResourceComponent.ctorParameters = function () { return []; };
-    CardResourceComponent.propDecorators = {
-        widgetData: [{ type: Input }]
+    ScrollableItemDirective.ctorParameters = function () { return [
+        { type: ElementRef }
+    ]; };
+    ScrollableItemDirective.propDecorators = {
+        key: [{ type: Input, args: ['sbUicScrollableItem',] }]
     };
-    return CardResourceComponent;
-}(WidgetBaseComponent));
+    return ScrollableItemDirective;
+}());
 if (false) {
     /** @type {?} */
-    CardResourceComponent.prototype.widgetData;
+    ScrollableItemDirective.prototype.key;
+    /**
+     * @type {?}
+     * @private
+     */
+    ScrollableItemDirective.prototype.el;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var CardPortraitComponent = /** @class */ (function () {
-    function CardPortraitComponent(snackBar, translate, langtranslations, configSvc, contSvc) {
-        var _this = this;
-        this.snackBar = snackBar;
+var CbpPlanComponent = /** @class */ (function () {
+    function CbpPlanComponent(translate, langtranslations) {
         this.translate = translate;
         this.langtranslations = langtranslations;
-        this.configSvc = configSvc;
-        this.contSvc = contSvc;
-        this.isCardLoading = false;
-        this.contentData = new EventEmitter();
-        this.isCardFlipped = false;
-        this.acbpConstants = NsCardContent$1.ACBPConst;
-        this.showFlip = false;
-        this.widgetType = 'df';
-        this.widgetSubType = 'sdf';
-        this.langtranslations.languageSelectedObservable.subscribe((/**
-         * @return {?}
-         */
-        function () {
-            if (localStorage.getItem('websiteLanguage')) {
-                _this.translate.setDefaultLang('en');
-                /** @type {?} */
-                var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
-                _this.translate.use(lang);
-            }
-        }));
+        this.mobileHeight = false;
+        this.fetchDataFromApi = false;
+        this.openDialog = new EventEmitter();
+        this.isLoading = false;
+        this.currentIndex = 0;
+        this.styleData = {};
+        this.contentdata = [];
     }
     /**
      * @return {?}
      */
-    CardPortraitComponent.prototype.ngOnInit = /**
+    CbpPlanComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
-        /** @type {?} */
-        var instanceConfig = this.configSvc.instanceConfig;
-        if (instanceConfig) {
-            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
-            this.sourceLogos = instanceConfig.sources;
-            this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
-        }
-        else {
-            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
-            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        var _this = this;
+        this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+        if (this.objectData && this.objectData.list) {
+            this.objectData.list.forEach((/**
+             * @param {?} contentEle
+             * @return {?}
+             */
+            function (contentEle) {
+                /** @type {?} */
+                var localData = {};
+                localData['title'] = contentEle.title;
+                localData['downloaUrl'] = contentEle.downloaUrl;
+                localData['cardSubType'] = "card-wide-lib";
+                localData['cardCustomeClass'] = "";
+                _this.contentdata.push(localData);
+            }));
         }
     };
     /**
+     * @param {?} indexValue
      * @return {?}
      */
-    CardPortraitComponent.prototype.showSnackbar = /**
+    CbpPlanComponent.prototype.getCurrentIndex = /**
+     * @param {?} indexValue
      * @return {?}
      */
-    function () {
-        if (this.showIntranetContent) {
-            this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
-        }
-        else if (!this.isLiveOrMarkForDeletion) {
-            this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
-        }
+    function (indexValue) {
+        this.currentIndex = indexValue;
     };
     /**
-     * @param {?} contentData
+     * @param {?} item
      * @return {?}
      */
-    CardPortraitComponent.prototype.getRedirectUrlData = /**
-     * @param {?} contentData
+    CbpPlanComponent.prototype.getFileName = /**
+     * @param {?} item
      * @return {?}
      */
-    function (contentData) {
-        // for telemetry
-        if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
-            contentData['typeOfTelemetry'] = this.widgetData.context.pageSection;
-        }
-        this.contSvc.changeTelemetryData(contentData);
-        // for redirection
-        this.contentData.emit(contentData);
+    function (item) {
+        console.log(item.downloadUrl);
+        return item.downloadUrl.split("/").at(-1);
     };
-    CardPortraitComponent.decorators = [
+    /**
+     * @param {?} label
+     * @param {?} type
+     * @return {?}
+     */
+    CbpPlanComponent.prototype.translateLabels = /**
+     * @param {?} label
+     * @param {?} type
+     * @return {?}
+     */
+    function (label, type) {
+        return this.langtranslations.translateActualLabel(label, type, '');
+    };
+    /**
+     * @param {?} item
+     * @return {?}
+     */
+    CbpPlanComponent.prototype.downloadCBPPlan = /**
+     * @param {?} item
+     * @return {?}
+     */
+    function (item) {
+        /** @type {?} */
+        var downloadUrl = item.downloaUrl;
+        /** @type {?} */
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', downloadUrl, true);
+        xhr.responseType = 'blob';
+        xhr.onload = (/**
+         * @return {?}
+         */
+        function () {
+            if (xhr.status === 200) {
+                /** @type {?} */
+                var blob = new Blob([xhr.response], { type: 'application/pdf' });
+                /** @type {?} */
+                var url = window.URL.createObjectURL(blob);
+                /** @type {?} */
+                var a = document.createElement('a');
+                a.href = url;
+                a.download = downloadUrl.split("/").at(-1);
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            }
+            else {
+                console.error('Error downloading the PDF', xhr.statusText);
+            }
+        });
+        xhr.onerror = (/**
+         * @return {?}
+         */
+        function () {
+            console.error('Network error');
+        });
+        xhr.send();
+    };
+    CbpPlanComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'sb-uic-card-portrait',
-                    template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer  {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n          role=\"link\" i18n-aria-label>\n    <ng-container *ngIf=\"!isCardFlipped\">\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n        matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n        matTooltip=\"Available only in Company's network\"\n        *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n      <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n        (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n        <mat-icon>flip_to_back</mat-icon>\n      </button>\n      <mat-card-content class=\"min-top\">\n        <div style=\"position: relative; z-index: 1;\">\n          <ng-container *ngIf=\"widgetData.content.posterImage\">\n            <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n            class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n            [alt]=\"widgetData.content.name\" />\n          </ng-container>\n          <ng-container *ngIf=\"!widgetData.content.posterImage\">\n            <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n              <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-template #defaultImg>\n              <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-template>\n          </ng-container>\n          <div class=\"source-div\" style=\"display: none;\">\n            <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n          </div>\n          <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n            <div class=\"cbp-mark\">\n              <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n            </div>\n          </ng-container>\n          <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n            <div class=\"cbp-mark\">\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n            </div>\n          </ng-container> -->\n          <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]  &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n            <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n              cbpData: cbPlanMapData[widgetData?.content?.identifier]\n            }}\"></ng-container>\n          </ng-container>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n            </span>\n          </div>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n            </span>\n          </div>\n        </div>\n        <div class=\"padding-m\">\n          <div class=\"course_widget flex margin-remove\">\n            <div class=\"flex flex-end course_v2\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                ?'Module'\n                :widgetData.content?.primaryCategory\">\n\n              </sb-uic-display-content-type>\n            </div>\n          </div>\n          <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n            class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n            {{ widgetData.content.name }}\n          </div>\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n              <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-m\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n            </span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n            </span>\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n    </ng-container>\n    <ng-container *ngIf=\"isCardFlipped\">\n      <div class=\"flex items-center\">\n        <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n        <button mat-icon-button (click)=\"isCardFlipped = false\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <p class=\"text-justify mat-body-1\">\n        {{ widgetData.content.reason }}\n      </p>\n    </ng-container>\n      </a>\n    </ng-container>\n  </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n    <div class=\"display-contents\" >\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n            <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n              <div class=\"\">\n                <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n              <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n    </div>\n  </mat-card>\n</ng-container>\n\n<ng-template #cbpPlan  let-data=\"data\">\n  <div class=\"cbp-mark left-0 border-top-radius\">\n    <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n    <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n    <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n  </div>\n</ng-template>",
-                    styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
+                    selector: 'sb-uic-cbp-plan',
+                    template: "<div class=\"w-full\">\n    <div class=\"flex item-center cbp-logo\">\n        <div class=\"cbp-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    \n    <div class=\"cbp-list-container\" *ngIf=\"contentdata.length\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <ng-container *ngIf=\"contentdata.length; else msgTemp\">\n            <sb-uic-sliders-ng-content\n                [title]=\"'providerName'\"\n                [currentIndex]=\"currentIndex\"\n                (currentIndexValue)=\"getCurrentIndex($event)\"\n                [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n                [styleData]=\"styleData\">\n                <div sliderbody>\n                    <div *ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                        <div class=\"cbp-list-item\"\n                            [style.borderColor]=\"objectData?.listItem?.border\"\n                            [style.color]=\"objectData?.listItem?.border\"\n                            [style.backgroundColor]=\"objectData?.listItem?.background\">\n                            <div class=\"cbp-item-title\">{{item?.title}}</div>\n                            <div class=\"flex download-sec\">\n                                <div class=\"flex gap-3 cbp-download\" (click)=\"downloadCBPPlan(item)\">\n                                    <img [src]=\"objectData?.downloadIcon\">Download\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </sb-uic-sliders-ng-content>\n        </ng-container>\n        <ng-template #msgTemp>\n            <div class=\"padding-bottom-m\">\n                {{ translateLabels(objectData?.noData, 'home') }}\n            </div>\n        </ng-template>\n    </div>\n</div>",
+                    styles: [".cbp-logo{align-items:center;justify-content:center}.cbp-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px}.cbp-list-container{border:1px solid #ccc;padding:40px 25px 0;border-radius:12px;margin-top:-20px}.cbp-list-item{padding:16px;border:1px solid #ccc;border-radius:12px}.cbp-item-title{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;height:48px;padding-bottom:10px}.cbp-mob-icon{font-size:20px;width:20px;height:20px}.download-sec{align-items:center;justify-content:end}.cbp-download{display:flex;align-items:center;gap:4px;background:#fff;padding:6px 8px;border-radius:20px;cursor:pointer;font-family:Lato;font-size:12px;font-weight:700;line-height:20px;text-align:left}[hidden]{display:none!important}.cbp-list-container ::ng-deep.cbp-card{min-height:115px!important;padding-bottom:30px!important}.cbp-list-container ::ng-deep.banner-title{display:none}.cbp-list-container ::ng-deep.prev{font-size:10px;height:20px!important;width:20px!important;margin-left:-11px}.cbp-list-container ::ng-deep.next{font-size:10px;height:20px!important;width:20px!important;margin-right:-11px}"]
                 }] }
     ];
     /** @nocollapse */
-    CardPortraitComponent.ctorParameters = function () { return [
-        { type: MatSnackBar },
+    CbpPlanComponent.ctorParameters = function () { return [
         { type: TranslateService },
-        { type: MultilingualTranslationsService },
-        { type: ConfigurationsService$1 },
-        { type: WidgetContentService }
+        { type: MultilingualTranslationsService }
     ]; };
-    CardPortraitComponent.propDecorators = {
-        widgetData: [{ type: Input }],
-        isLiveOrMarkForDeletion: [{ type: Input }],
-        showIntranetContent: [{ type: Input }],
-        isIntranetAllowedSettings: [{ type: Input }],
-        isCardLoading: [{ type: Input }],
-        contentData: [{ type: Output }],
-        cbPlanMapData: [{ type: Input }]
+    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,] }]
     };
-    return CardPortraitComponent;
+    return CbpPlanComponent;
 }());
 if (false) {
     /** @type {?} */
-    CardPortraitComponent.prototype.widgetData;
-    /** @type {?} */
-    CardPortraitComponent.prototype.isLiveOrMarkForDeletion;
-    /** @type {?} */
-    CardPortraitComponent.prototype.showIntranetContent;
-    /** @type {?} */
-    CardPortraitComponent.prototype.isIntranetAllowedSettings;
-    /** @type {?} */
-    CardPortraitComponent.prototype.isCardLoading;
+    CbpPlanComponent.prototype.objectData;
     /** @type {?} */
-    CardPortraitComponent.prototype.contentData;
+    CbpPlanComponent.prototype.layoutType;
     /** @type {?} */
-    CardPortraitComponent.prototype.cbPlanMapData;
+    CbpPlanComponent.prototype.mobileHeight;
     /** @type {?} */
-    CardPortraitComponent.prototype.isCardFlipped;
+    CbpPlanComponent.prototype.fetchDataFromApi;
     /** @type {?} */
-    CardPortraitComponent.prototype.acbpConstants;
+    CbpPlanComponent.prototype.channelId;
     /** @type {?} */
-    CardPortraitComponent.prototype.defaultThumbnail;
+    CbpPlanComponent.prototype.openDialog;
     /** @type {?} */
-    CardPortraitComponent.prototype.sourceLogos;
+    CbpPlanComponent.prototype.isLoading;
     /** @type {?} */
-    CardPortraitComponent.prototype.defaultSLogo;
+    CbpPlanComponent.prototype.currentIndex;
     /** @type {?} */
-    CardPortraitComponent.prototype.showFlip;
+    CbpPlanComponent.prototype.styleData;
     /** @type {?} */
-    CardPortraitComponent.prototype.widgetType;
+    CbpPlanComponent.prototype.contentdata;
     /** @type {?} */
-    CardPortraitComponent.prototype.widgetSubType;
-    /**
-     * @type {?}
-     * @private
-     */
-    CardPortraitComponent.prototype.snackBar;
-    /**
-     * @type {?}
-     * @private
-     */
-    CardPortraitComponent.prototype.translate;
+    CbpPlanComponent.prototype.scrollableItems;
     /**
      * @type {?}
      * @private
      */
-    CardPortraitComponent.prototype.langtranslations;
-    /**
-     * @type {?}
-     * @private
-     */
-    CardPortraitComponent.prototype.configSvc;
+    CbpPlanComponent.prototype.translate;
     /**
      * @type {?}
      * @private
      */
-    CardPortraitComponent.prototype.contSvc;
+    CbpPlanComponent.prototype.langtranslations;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var PipePublicURL = /** @class */ (function () {
-    function PipePublicURL(environment) {
-        this.environment = environment;
+var SlidersNgContentLibComponent = /** @class */ (function (_super) {
+    __extends(SlidersNgContentLibComponent, _super);
+    function SlidersNgContentLibComponent(events, valueSvc) {
+        var _this = _super.call(this) || this;
+        _this.events = events;
+        _this.valueSvc = valueSvc;
+        _this.title = '';
+        _this.loadNgContentData = false;
+        _this.autoScroll = false;
+        _this.currentIndexValue = new EventEmitter();
+        _this.id = "banner_" + Math.random();
+        _this.defaultMenuSubscribe = null;
+        _this.isLtMedium$ = _this.valueSvc.isLtMedium$;
+        _this.currentIndex = 0;
+        _this.slideInterval = null;
+        _this.isMobile = false;
+        return _this;
     }
     /**
-     * @param {?} value
      * @return {?}
      */
-    PipePublicURL.prototype.transform = /**
-     * @param {?} value
+    SlidersNgContentLibComponent.prototype.ngOnInit = /**
      * @return {?}
      */
-    function (value) {
-        /** @type {?} */
-        var mainUrl = value && value.split('/content').pop() || '';
-        /** @type {?} */
-        var finalURL = this.environment.contentHost + "/" + this.environment.contentBucket + "/content" + mainUrl;
-        return value ? finalURL : '';
+    function () {
+        var _this = this;
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
+        this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
+         * @param {?} isLtMedium
+         * @return {?}
+         */
+        function (isLtMedium) {
+            _this.isMobile = isLtMedium;
+        }));
     };
-    PipePublicURL.decorators = [
-        { type: Pipe, args: [{
-                    name: 'pipePublicURL',
-                },] }
-    ];
-    /** @nocollapse */
-    PipePublicURL.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] }
-    ]; };
-    return PipePublicURL;
-}());
-if (false) {
-    /** @type {?} */
-    PipePublicURL.prototype.environment;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var PipePublicURLModule = /** @class */ (function () {
-    function PipePublicURLModule() {
-    }
-    PipePublicURLModule.decorators = [
-        { type: NgModule, args: [{
-                    declarations: [PipePublicURL],
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [PipePublicURL],
-                },] }
+    /**
+     * @return {?}
+     */
+    SlidersNgContentLibComponent.prototype.reInitiateSlideInterval = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        if (this.widgetData && this.widgetData.length > 1) {
+            try {
+                if (this.slideInterval) {
+                    this.slideInterval.unsubscribe();
+                }
+            }
+            catch (e) {
+            }
+            finally {
+                this.slideInterval = interval(8000).subscribe((/**
+                 * @return {?}
+                 */
+                function () {
+                    if (_this.currentIndex === _this.widgetData.length - 1) {
+                        _this.currentIndex = 0;
+                        _this.currentIndexValue.emit(_this.currentIndex);
+                    }
+                    else {
+                        _this.currentIndex += 1;
+                        _this.currentIndexValue.emit(_this.currentIndex);
+                    }
+                }));
+            }
+        }
+    };
+    /**
+     * @param {?} index
+     * @return {?}
+     */
+    SlidersNgContentLibComponent.prototype.slideTo = /**
+     * @param {?} index
+     * @return {?}
+     */
+    function (index) {
+        if (index >= 0 && index < this.widgetData.length) {
+            this.currentIndex = index;
+            this.currentIndexValue.emit(this.currentIndex);
+        }
+        else if (index === this.widgetData.length) {
+            this.currentIndex = 0;
+            this.currentIndexValue.emit(this.currentIndex);
+        }
+        else {
+            this.currentIndex = this.widgetData.length + index;
+            this.currentIndexValue.emit(this.currentIndex);
+        }
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
+    };
+    Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var currentData = this.widgetData[this.currentIndex];
+            if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+                return true;
+            }
+            return false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    SlidersNgContentLibComponent.prototype.openInNewTab = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var currentData = this.widgetData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+            window.open(currentData.redirectUrl);
+        }
+    };
+    /**
+     * @param {?} bannerUrl
+     * @return {?}
+     */
+    SlidersNgContentLibComponent.prototype.raiseTelemetry = /**
+     * @param {?} bannerUrl
+     * @return {?}
+     */
+    function (bannerUrl) {
+        this.openInNewTab();
+        /** @type {?} */
+        var path = window.location.pathname.replace('/', '');
+        /** @type {?} */
+        var url = path + window.location.search;
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'banner',
+        }, {
+            pageUrl: url,
+            bannerRedirectUrl: bannerUrl,
+        }, {
+            pageIdExt: 'banner',
+            module: WsEvents.EnumTelemetrymodules.CONTENT,
+        });
+    };
+    /**
+     * @return {?}
+     */
+    SlidersNgContentLibComponent.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        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 = function () { return [
+        { 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 }]
+    };
+    return SlidersNgContentLibComponent;
+}(WidgetBaseComponent));
+if (false) {
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.widgetData;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.styleData;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.title;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.loadNgContentData;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.autoScroll;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.currentIndexValue;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.id;
+    /**
+     * @type {?}
+     * @private
+     */
+    SlidersNgContentLibComponent.prototype.defaultMenuSubscribe;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.isLtMedium$;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.currentIndex;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.slideInterval;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.isMobile;
+    /**
+     * @type {?}
+     * @private
+     */
+    SlidersNgContentLibComponent.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    SlidersNgContentLibComponent.prototype.valueSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/* tslint:enable */
+var  /* tslint:enable */
+MyHammerConfig$1 = /** @class */ (function (_super) {
+    __extends(MyHammerConfig, _super);
+    function MyHammerConfig() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {?} element
+     * @return {?}
+     */
+    MyHammerConfig.prototype.buildHammer = /**
+     * @param {?} element
+     * @return {?}
+     */
+    function (element) {
+        /** @type {?} */
+        var mc = new Hammer(element, {
+            touchAction: 'pan-y',
+        });
+        return mc;
+    };
+    return MyHammerConfig;
+}(HammerGestureConfig));
+// tslint:disable-next-line: max-classes-per-file
+var SlidersNgContentLibModule = /** @class */ (function () {
+    function 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,
+                        },
+                    ],
+                },] }
+    ];
+    return SlidersNgContentLibModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var ScrollableItemModule = /** @class */ (function () {
+    function ScrollableItemModule() {
+    }
+    ScrollableItemModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [ScrollableItemDirective],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [ScrollableItemDirective],
+                },] }
+    ];
+    return ScrollableItemModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CbpPlanModule = /** @class */ (function () {
+    function CbpPlanModule() {
+    }
+    CbpPlanModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [CbpPlanComponent],
+                    imports: [
+                        CommonModule,
+                        SkeletonLoaderLibModule,
+                        MatIconModule,
+                        ScrollableItemModule,
+                        SlidersNgContentLibModule,
+                    ],
+                    exports: [CbpPlanComponent]
+                },] }
+    ];
+    return CbpPlanModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var ConsumptionModule = /** @class */ (function () {
+    function ConsumptionModule() {
+    }
+    ConsumptionModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [ConsumptionComponent,],
+                    imports: [
+                        ContentStripWithTabsLibModule,
+                        SlidersLibModule
+                    ],
+                    exports: [ConsumptionComponent,
+                        ContentStripWithTabsLibModule,
+                        SlidersLibModule,
+                        DataPointsModule,
+                        CalenderModule,
+                        CommonStripModule,
+                        AnnouncementsModule,
+                        TopLearnersModule,
+                        CbpPlanModule,
+                    ],
+                },] }
+    ];
+    return ConsumptionModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var ROOT_WIDGET_CONFIG = {
+    card: {
+        _type: 'cardLib',
+        cardResource: 'cardContentLib'
+    },
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NsCardContent$1;
+(function (NsCardContent) {
+    /**
+     * @record
+     */
+    function ICard() { }
+    NsCardContent.ICard = ICard;
+    if (false) {
+        /** @type {?} */
+        ICard.prototype.content;
+        /** @type {?} */
+        ICard.prototype.cardSubType;
+        /** @type {?} */
+        ICard.prototype.context;
+        /** @type {?|undefined} */
+        ICard.prototype.intranetMode;
+        /** @type {?|undefined} */
+        ICard.prototype.deletedMode;
+        /** @type {?|undefined} */
+        ICard.prototype.likes;
+        /** @type {?|undefined} */
+        ICard.prototype.contentTags;
+        /** @type {?} */
+        ICard.prototype.stateData;
+        /** @type {?|undefined} */
+        ICard.prototype.cardCustomeClass;
+    }
+    /**
+     * @record
+     */
+    function IContentTags() { }
+    NsCardContent.IContentTags = IContentTags;
+    if (false) {
+        /** @type {?|undefined} */
+        IContentTags.prototype.daysSpan;
+        /** @type {?|undefined} */
+        IContentTags.prototype.excludeContentType;
+        /** @type {?|undefined} */
+        IContentTags.prototype.excludeMimeType;
+        /** @type {?} */
+        IContentTags.prototype.tag;
+        /** @type {?|undefined} */
+        IContentTags.prototype.criteriaField;
+    }
+    var EContentStatus;
+    (function (EContentStatus) {
+        EContentStatus["LIVE"] = "Live";
+        EContentStatus["EXPIRED"] = "Expired";
+        EContentStatus["DELETED"] = "Deleted";
+        EContentStatus["MARK_FOR_DELETION"] = "MarkedForDeletion";
+    })(EContentStatus = NsCardContent.EContentStatus || (NsCardContent.EContentStatus = {}));
+    var ACBPConst;
+    (function (ACBPConst) {
+        ACBPConst["UPCOMING"] = "upcoming";
+        ACBPConst["ALL"] = "All";
+        ACBPConst["OVERDUE"] = "overdue";
+        ACBPConst["SUCCESS"] = "success";
+    })(ACBPConst = NsCardContent.ACBPConst || (NsCardContent.ACBPConst = {}));
+    var IGOTConst;
+    (function (IGOTConst) {
+        IGOTConst["COMPETENCIES"] = "competencies_v5";
+        IGOTConst["RETIRED"] = "Retired";
+    })(IGOTConst = NsCardContent.IGOTConst || (NsCardContent.IGOTConst = {}));
+})(NsCardContent$1 || (NsCardContent$1 = {}));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CardsComponent = /** @class */ (function (_super) {
+    __extends(CardsComponent, _super);
+    function CardsComponent(utilitySvc, contSvc, router) {
+        var _this = _super.call(this) || this;
+        _this.utilitySvc = utilitySvc;
+        _this.contSvc = contSvc;
+        _this.router = router;
+        _this.triggerTelemetry = new EventEmitter();
+        _this.isIntranetAllowedSettings = false;
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    CardsComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.cbPlanInterval = setInterval((/**
+         * @return {?}
+         */
+        function () {
+            _this.getCbPlanData();
+        }), 1000);
+        this.enrollInterval = setInterval((/**
+         * @return {?}
+         */
+        function () {
+            _this.getEnrollmentData();
+            // tslint:disable-next-line
+        }), 1000);
+    };
+    Object.defineProperty(CardsComponent.prototype, "isLiveOrMarkForDeletion", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            if (!this.widgetData.content.status ||
+                this.widgetData.content.status === 'Live' ||
+                this.widgetData.content.status === 'MarkedForDeletion') {
+                return true;
+            }
+            return false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CardsComponent.prototype, "showIntranetContent", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            if (this.widgetData.content.isInIntranet && this.utilitySvc.isMobile) {
+                return !this.isIntranetAllowedSettings;
+            }
+            return false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @param {?} content
+     * @return {?}
+     */
+    CardsComponent.prototype.getRedirectUrlData = /**
+     * @param {?} content
+     * @return {?}
+     */
+    function (content) {
+        return __awaiter(this, void 0, void 0, function () {
+            var urlData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!content.externalId) return [3 /*break*/, 1];
+                        this.router.navigate(["app/toc/ext/" + content.contentId]);
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, this.contSvc.getResourseLink(content)];
+                    case 2:
+                        urlData = _a.sent();
+                        this.router.navigate([urlData.url], {
+                            queryParams: urlData.queryParams
+                        });
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * @return {?}
+     */
+    CardsComponent.prototype.getCbPlanData = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var cbpList = {};
+        if (localStorage.getItem('cbpData')) {
+            /** @type {?} */
+            var cbpListArr = JSON.parse(localStorage.getItem('cbpData') || '');
+            if (cbpListArr && cbpListArr.length) {
+                cbpListArr.forEach((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                function (data) {
+                    cbpList[data.identifier] = data;
+                }));
+            }
+            this.cbPlanMapData = cbpList;
+            // this.karmaPointLoading = false
+            clearInterval(this.cbPlanInterval);
+        }
+    };
+    /**
+     * @return {?}
+     */
+    CardsComponent.prototype.getEnrollmentData = /**
+     * @return {?}
+     */
+    function () {
+        if (localStorage.getItem('enrollmentMapData')) {
+            this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
+            clearInterval(this.enrollInterval);
+        }
+    };
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    CardsComponent.prototype.raiseCardClick = /**
+     * @param {?} data
+     * @return {?}
+     */
+    function (data) {
+        this.triggerTelemetry.emit(data);
+    };
+    CardsComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'sb-uic-cards',
+                    template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" \n  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" [enrollmentMapData]=\"enrollmentMapData\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n<ng-template #cardProvider>\n  <sb-uic-provider-card  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n  <sb-uic-provider-card  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n",
+                    styles: [""]
+                }] }
+    ];
+    /** @nocollapse */
+    CardsComponent.ctorParameters = function () { return [
+        { type: UtilityService },
+        { type: WidgetContentService },
+        { type: Router }
+    ]; };
+    CardsComponent.propDecorators = {
+        widgetData: [{ type: Input }],
+        triggerTelemetry: [{ type: Output }]
+    };
+    return CardsComponent;
+}(WidgetBaseComponent));
+if (false) {
+    /** @type {?} */
+    CardsComponent.prototype.widgetData;
+    /** @type {?} */
+    CardsComponent.prototype.triggerTelemetry;
+    /** @type {?} */
+    CardsComponent.prototype.isIntranetAllowedSettings;
+    /** @type {?} */
+    CardsComponent.prototype.cbPlanMapData;
+    /** @type {?} */
+    CardsComponent.prototype.cbPlanInterval;
+    /** @type {?} */
+    CardsComponent.prototype.enrollInterval;
+    /** @type {?} */
+    CardsComponent.prototype.enrollmentMapData;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardsComponent.prototype.utilitySvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardsComponent.prototype.contSvc;
+    /** @type {?} */
+    CardsComponent.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CardResourceComponent = /** @class */ (function (_super) {
+    __extends(CardResourceComponent, _super);
+    function CardResourceComponent() {
+        return _super.call(this) || this;
+    }
+    /**
+     * @return {?}
+     */
+    CardResourceComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    CardResourceComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'ws-cb-widget-card-resource',
+                    template: " <!-- <mat-card class=\"card-resource-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n      greyOut:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n    <div class=\"display-contents\" [ngClass]=\"{\n        disableClick:\n          widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n            ? true\n            : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n      }\">\n      <ng-container *ngIf=\"widgetData.content\">\n        <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n            role=\"link\" i18n-aria-label>\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n          matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n          matTooltip=\"Available only in Company's network\"\n          *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n        <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n          (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n          <mat-icon>flip_to_back</mat-icon>\n        </button>\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container *ngIf=\"widgetData.content.posterImage\">\n              <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-container *ngIf=\"!widgetData.content.posterImage\">\n              <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData.content.name\" />\n              </ng-container>\n              <ng-template #defaultImg>\n                <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                [alt]=\"widgetData.content.name\" />\n              </ng-template>\n            </ng-container>\n            <div class=\"source-div\" style=\"display: none;\">\n              <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n              <div class=\"cbp-mark\">\n                <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n              <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                cbpData: cbPlanMapData[widgetData?.content?.identifier]\n              }}\"></ng-container>\n            </ng-container>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n              </span>\n            </div>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n              </span>\n            </div>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end course_v2\">\n                <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                <ws-widget-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                  ?'Module'\n                  :widgetData.content?.primaryCategory\">\n\n                </ws-widget-display-content-type>\n              </div>\n              <div class=\"flex ml-5 flex-end course_v2\">\n                <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                <ws-widget-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                  ?'Module'\n                  :widgetData.content?.primaryCategory\">\n\n                </ws-widget-display-content-type>\n              </div>\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n              class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              {{ widgetData.content.name }}\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n              class=\"mat-subheading-1 description-text font-medium ws-mat-text-block-fade-gradient\">\n              {{ widgetData.content.name }}\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n              <div class=\"course_logo_box\">\n                <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n              </div>\n              <span class=\"org-text\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n      <ng-container *ngIf=\"isCardFlipped\">\n        <div class=\"flex items-center\">\n          <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2>\n          <button mat-icon-button (click)=\"isCardFlipped = false\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <p class=\"text-justify mat-body-1\">\n          {{ widgetData.content.reason }}\n        </p>\n      </ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </mat-card> -->\n",
+                    styles: [".card-resource-container{position:relative;width:384px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:450px;margin:20px 8px}.card-resource-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-resource-container .description-text{margin:12px 0;font-weight:400}.card-resource-container .course_logo_box{width:24px;height:24px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1607843137);box-sizing:border-box}.card-resource-container .course_logo_box img{height:18px;width:18px;padding:2px;display:inline-block}.card-resource-container .course_logo_box p{display:inline-block;vertical-align:top}.card-resource-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-resource-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-resource-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-resource-container mat-card-content{background:#fff}.card-resource-container .card-img{max-height:240px;min-height:240px;width:100%;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px}.card-resource-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-resource-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-resource-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-resource-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-resource-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-resource-container .basic{margin:auto 0}.card-resource-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-resource-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}"]
+                }] }
+    ];
+    /** @nocollapse */
+    CardResourceComponent.ctorParameters = function () { return []; };
+    CardResourceComponent.propDecorators = {
+        widgetData: [{ type: Input }]
+    };
+    return CardResourceComponent;
+}(WidgetBaseComponent));
+if (false) {
+    /** @type {?} */
+    CardResourceComponent.prototype.widgetData;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CardPortraitComponent = /** @class */ (function () {
+    function CardPortraitComponent(snackBar, translate, langtranslations, configSvc, contSvc) {
+        var _this = this;
+        this.snackBar = snackBar;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.contSvc = contSvc;
+        this.isCardLoading = false;
+        this.contentData = new EventEmitter();
+        this.isCardFlipped = false;
+        this.acbpConstants = NsCardContent$1.ACBPConst;
+        this.showFlip = false;
+        this.widgetType = 'df';
+        this.widgetSubType = 'sdf';
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        function () {
+            if (localStorage.getItem('websiteLanguage')) {
+                _this.translate.setDefaultLang('en');
+                /** @type {?} */
+                var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                _this.translate.use(lang);
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    CardPortraitComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var instanceConfig = this.configSvc.instanceConfig;
+        if (instanceConfig) {
+            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+            this.sourceLogos = instanceConfig.sources;
+            this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
+        }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+    };
+    /**
+     * @return {?}
+     */
+    CardPortraitComponent.prototype.showSnackbar = /**
+     * @return {?}
+     */
+    function () {
+        if (this.showIntranetContent) {
+            this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
+        }
+        else if (!this.isLiveOrMarkForDeletion) {
+            this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
+        }
+    };
+    /**
+     * @param {?} contentData
+     * @return {?}
+     */
+    CardPortraitComponent.prototype.getRedirectUrlData = /**
+     * @param {?} contentData
+     * @return {?}
+     */
+    function (contentData) {
+        // for telemetry
+        if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
+            contentData['typeOfTelemetry'] = this.widgetData.context.pageSection;
+        }
+        this.contSvc.changeTelemetryData(contentData);
+        // for redirection
+        this.contentData.emit(contentData);
+    };
+    CardPortraitComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'sb-uic-card-portrait',
+                    template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer  {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n          role=\"link\" i18n-aria-label>\n    <ng-container *ngIf=\"!isCardFlipped\">\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n        matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n        matTooltip=\"Available only in Company's network\"\n        *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n      <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n        (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n        <mat-icon>flip_to_back</mat-icon>\n      </button>\n      <mat-card-content class=\"min-top\">\n        <div style=\"position: relative; z-index: 1;\">\n          <ng-container *ngIf=\"widgetData.content.posterImage\">\n            <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n            class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n            [alt]=\"widgetData.content.name\" />\n          </ng-container>\n          <ng-container *ngIf=\"!widgetData.content.posterImage\">\n            <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n              <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-template #defaultImg>\n              <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-template>\n          </ng-container>\n          <div class=\"source-div\" style=\"display: none;\">\n            <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n          </div>\n          <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n            <div class=\"cbp-mark\">\n              <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n            </div>\n          </ng-container>\n          <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n            <div class=\"cbp-mark\">\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n            </div>\n          </ng-container> -->\n          <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]  &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n            <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n              cbpData: cbPlanMapData[widgetData?.content?.identifier]\n            }}\"></ng-container>\n          </ng-container>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n            </span>\n          </div>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n            </span>\n          </div>\n        </div>\n        <div class=\"padding-m\">\n          <div class=\"course_widget flex margin-remove\">\n            <div class=\"flex flex-end course_v2\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                ?'Module'\n                :widgetData.content?.primaryCategory\">\n\n              </sb-uic-display-content-type>\n            </div>\n          </div>\n          <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n            class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n            {{ widgetData.content.name }}\n          </div>\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n              <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-m\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n            </span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n            </span>\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n    </ng-container>\n    <ng-container *ngIf=\"isCardFlipped\">\n      <div class=\"flex items-center\">\n        <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n        <button mat-icon-button (click)=\"isCardFlipped = false\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <p class=\"text-justify mat-body-1\">\n        {{ widgetData.content.reason }}\n      </p>\n    </ng-container>\n      </a>\n    </ng-container>\n  </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n    <div class=\"display-contents\" >\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n            <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n              <div class=\"\">\n                <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n              <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n    </div>\n  </mat-card>\n</ng-container>\n\n<ng-template #cbpPlan  let-data=\"data\">\n  <div class=\"cbp-mark left-0 border-top-radius\">\n    <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n    <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n    <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n  </div>\n</ng-template>",
+                    styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
+                }] }
+    ];
+    /** @nocollapse */
+    CardPortraitComponent.ctorParameters = function () { return [
+        { type: MatSnackBar },
+        { type: TranslateService },
+        { type: MultilingualTranslationsService },
+        { type: ConfigurationsService$1 },
+        { type: WidgetContentService }
+    ]; };
+    CardPortraitComponent.propDecorators = {
+        widgetData: [{ type: Input }],
+        isLiveOrMarkForDeletion: [{ type: Input }],
+        showIntranetContent: [{ type: Input }],
+        isIntranetAllowedSettings: [{ type: Input }],
+        isCardLoading: [{ type: Input }],
+        contentData: [{ type: Output }],
+        cbPlanMapData: [{ type: Input }]
+    };
+    return CardPortraitComponent;
+}());
+if (false) {
+    /** @type {?} */
+    CardPortraitComponent.prototype.widgetData;
+    /** @type {?} */
+    CardPortraitComponent.prototype.isLiveOrMarkForDeletion;
+    /** @type {?} */
+    CardPortraitComponent.prototype.showIntranetContent;
+    /** @type {?} */
+    CardPortraitComponent.prototype.isIntranetAllowedSettings;
+    /** @type {?} */
+    CardPortraitComponent.prototype.isCardLoading;
+    /** @type {?} */
+    CardPortraitComponent.prototype.contentData;
+    /** @type {?} */
+    CardPortraitComponent.prototype.cbPlanMapData;
+    /** @type {?} */
+    CardPortraitComponent.prototype.isCardFlipped;
+    /** @type {?} */
+    CardPortraitComponent.prototype.acbpConstants;
+    /** @type {?} */
+    CardPortraitComponent.prototype.defaultThumbnail;
+    /** @type {?} */
+    CardPortraitComponent.prototype.sourceLogos;
+    /** @type {?} */
+    CardPortraitComponent.prototype.defaultSLogo;
+    /** @type {?} */
+    CardPortraitComponent.prototype.showFlip;
+    /** @type {?} */
+    CardPortraitComponent.prototype.widgetType;
+    /** @type {?} */
+    CardPortraitComponent.prototype.widgetSubType;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardPortraitComponent.prototype.snackBar;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardPortraitComponent.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardPortraitComponent.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardPortraitComponent.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardPortraitComponent.prototype.contSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var PipePublicURL = /** @class */ (function () {
+    function PipePublicURL(environment) {
+        this.environment = environment;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    PipePublicURL.prototype.transform = /**
+     * @param {?} value
+     * @return {?}
+     */
+    function (value) {
+        /** @type {?} */
+        var mainUrl = value && value.split('/content').pop() || '';
+        /** @type {?} */
+        var finalURL = this.environment.contentHost + "/" + this.environment.contentBucket + "/content" + mainUrl;
+        return value ? finalURL : '';
+    };
+    PipePublicURL.decorators = [
+        { type: Pipe, args: [{
+                    name: 'pipePublicURL',
+                },] }
+    ];
+    /** @nocollapse */
+    PipePublicURL.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] }
+    ]; };
+    return PipePublicURL;
+}());
+if (false) {
+    /** @type {?} */
+    PipePublicURL.prototype.environment;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var PipePublicURLModule = /** @class */ (function () {
+    function PipePublicURLModule() {
+    }
+    PipePublicURLModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [PipePublicURL],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [PipePublicURL],
+                },] }
     ];
     return PipePublicURLModule;
 }());
@@ -10024,7 +11001,7 @@ var CardWideComponent = /** @class */ (function () {
         { 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 */
@@ -15509,666 +16486,1029 @@ var RatingService = /** @class */ (function () {
      * @param {?} avg
      * @return {?}
      */
-    RatingService.prototype.getRatingIcon = /**
+    RatingService.prototype.getRatingIcon = /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    function (ratingIndex, avg) {
+        if (avg) {
+            /** @type {?} */
+            var avgRating = avg;
+            /** @type {?} */
+            var ratingFloor = Math.floor(avgRating)
+            // const difference =  avgRating - ratingIndex
+            ;
+            // const difference =  avgRating - ratingIndex
+            if (ratingIndex <= ratingFloor) {
+                return 'star';
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
+                return 'star_half';
+            }
+        }
+        return 'star';
+    };
+    /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    RatingService.prototype.getRatingIconClass = /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    function (ratingIndex, avg) {
+        if (avg) {
+            /** @type {?} */
+            var avgRating = avg;
+            /** @type {?} */
+            var ratingFloor = Math.floor(avgRating);
+            if (ratingIndex <= ratingFloor) {
+                return true;
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
+                return true;
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 > 0.71) {
+                return true;
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 < 0.29) {
+                return false;
+            }
+        }
+        return false;
+    };
+    /**
+     * @param {?} contentId
+     * @param {?} userID
+     * @return {?}
+     */
+    RatingService.prototype.getAuthorReply = /**
+     * @param {?} contentId
+     * @param {?} userID
+     * @return {?}
+     */
+    function (contentId, userID) {
+        return this.http.get(API_END_POINTS$3.GET_AUTHOR_REPLY(contentId, userID));
+    };
+    RatingService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    /** @nocollapse */
+    RatingService.ctorParameters = function () { return [
+        { type: HttpClient }
+    ]; };
+    /** @nocollapse */ RatingService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RatingService_Factory() { return new RatingService(ɵɵinject(HttpClient)); }, token: RatingService, providedIn: "root" });
+    return RatingService;
+}());
+if (false) {
+    /** @type {?} */
+    RatingService.prototype.http;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var API_END_POINTS$4 = {
+    TOP_REVIEWS: "/apis/proxies/v8/ratings/v1/topReviews"
+};
+var UserContentRatingLibService = /** @class */ (function () {
+    function UserContentRatingLibService(http) {
+        this.http = http;
+    }
+    /**
+     * @param {?} doId
+     * @return {?}
+     */
+    UserContentRatingLibService.prototype.fetchTopReviews = /**
+     * @param {?} doId
+     * @return {?}
+     */
+    function (doId) {
+        return this.http.get(API_END_POINTS$4.TOP_REVIEWS + "/" + doId);
+    };
+    UserContentRatingLibService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    UserContentRatingLibService.ctorParameters = function () { return [
+        { type: HttpClient }
+    ]; };
+    /** @nocollapse */ UserContentRatingLibService.ngInjectableDef = ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(ɵɵinject(HttpClient)); }, token: UserContentRatingLibService, providedIn: "root" });
+    return UserContentRatingLibService;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    UserContentRatingLibService.prototype.http;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var UserContentRatingLibComponent = /** @class */ (function () {
+    function UserContentRatingLibComponent(ratingService, userRatingSvc) {
+        this.ratingService = ratingService;
+        this.userRatingSvc = userRatingSvc;
+        this.currentIndex = 0;
+        this.providerId = '';
+        this.formData = '';
+        this.emptyResponse = new EventEmitter();
+        this.styleData = {};
+        this.contentdata = [];
+    }
+    /**
+     * @return {?}
+     */
+    UserContentRatingLibComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
+        this.getTopReviews();
+    };
+    /**
+     * @return {?}
+     */
+    UserContentRatingLibComponent.prototype.getTopReviews = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.contentdata = [];
+        this.userRatingSvc.fetchTopReviews(this.providerId).subscribe((/**
+         * @param {?} response
+         * @return {?}
+         */
+        function (response) {
+            if (response && response.result && response.result.content.length) {
+                response.result.content.forEach((/**
+                 * @param {?} contentEle
+                 * @return {?}
+                 */
+                function (contentEle) {
+                    /** @type {?} */
+                    var localData = {};
+                    localData['content'] = contentEle.contentInfo;
+                    localData['rating'] = contentEle.rating;
+                    localData['review'] = contentEle.review;
+                    localData['userDetails'] = contentEle.userDetails;
+                    localData['cardSubType'] = "card-wide-lib";
+                    localData['cardCustomeClass'] = "";
+                    _this.contentdata.push(localData);
+                }));
+            }
+            else {
+                _this.emptyResponse.emit(true);
+            }
+        }), (/**
+         * @param {?} _error
+         * @return {?}
+         */
+        function (_error) {
+            _this.emptyResponse.emit(true);
+        }));
+    };
+    /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    UserContentRatingLibComponent.prototype.getRatingIcon = /**
      * @param {?} ratingIndex
      * @param {?} avg
      * @return {?}
      */
     function (ratingIndex, avg) {
-        if (avg) {
-            /** @type {?} */
-            var avgRating = avg;
-            /** @type {?} */
-            var ratingFloor = Math.floor(avgRating)
-            // const difference =  avgRating - ratingIndex
-            ;
-            // const difference =  avgRating - ratingIndex
-            if (ratingIndex <= ratingFloor) {
-                return 'star';
-            }
-            if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
-                return 'star_half';
-            }
-        }
-        return 'star';
+        return this.ratingService.getRatingIcon(ratingIndex, avg);
     };
     /**
      * @param {?} ratingIndex
      * @param {?} avg
      * @return {?}
      */
-    RatingService.prototype.getRatingIconClass = /**
+    UserContentRatingLibComponent.prototype.getRatingIconClass = /**
      * @param {?} ratingIndex
      * @param {?} avg
      * @return {?}
      */
     function (ratingIndex, avg) {
-        if (avg) {
-            /** @type {?} */
-            var avgRating = avg;
-            /** @type {?} */
-            var ratingFloor = Math.floor(avgRating);
-            if (ratingIndex <= ratingFloor) {
-                return true;
-            }
-            if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
-                return true;
-            }
-            if (ratingFloor === ratingIndex - 1 && avgRating % 1 > 0.71) {
-                return true;
-            }
-            if (ratingFloor === ratingIndex - 1 && avgRating % 1 < 0.29) {
-                return false;
-            }
-        }
-        return false;
+        return this.ratingService.getRatingIconClass(ratingIndex, avg);
     };
     /**
-     * @param {?} contentId
-     * @param {?} userID
+     * @param {?} indexValue
      * @return {?}
      */
-    RatingService.prototype.getAuthorReply = /**
-     * @param {?} contentId
-     * @param {?} userID
+    UserContentRatingLibComponent.prototype.getCurrentIndex = /**
+     * @param {?} indexValue
      * @return {?}
      */
-    function (contentId, userID) {
-        return this.http.get(API_END_POINTS$3.GET_AUTHOR_REPLY(contentId, userID));
+    function (indexValue) {
+        this.currentIndex = indexValue;
+        this.handleScrollClick(indexValue);
     };
-    RatingService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root',
-                },] }
+    /**
+     * @param {?} dataValue
+     * @return {?}
+     */
+    UserContentRatingLibComponent.prototype.handleScrollClick = /**
+     * @param {?} dataValue
+     * @return {?}
+     */
+    function (dataValue) {
+        /** @type {?} */
+        var item = this.scrollableItems.find((/**
+         * @param {?} x
+         * @return {?}
+         */
+        function (x) { return x.key === dataValue; }));
+        item.scrollIntoView("nearest");
+    };
+    UserContentRatingLibComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'sb-uic-user-content-rating',
+                    template: "<ng-container *ngIf=\"contentdata.length\">\n    <div class=\"user-rating-section\">\n        <sb-uic-sliders-ng-content [title]=\"'providerName'\"  [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n            <div sliderbody>\n                <div class=\"flex justify-start md:justify-center users-block\">\n                    <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n                        <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n                        [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n                            <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                            </sb-uic-avatar-photo>\n                        </div>\n                    </ng-container>\n                </div>\n                <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                    <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                        <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8 pb-5\">\n                            <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n                        </div>\n                        <div class=\"title-border-v2\"></div>\n                        <p class=\"userName w-full mb-4 pt-6\">{{ratingData?.userDetails?.firstName}}</p>\n                        <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                            <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                                [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n                                *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                                {{ getRatingIcon(rating, ratingData?.rating) }}\n                            </mat-icon>\n                        </div>\n                        <p class=\"content-feedback w-full mb-4 px-4 md:px-8\">{{ratingData?.review}}</p>\n                    </div>\n                </div>\n            </div>\n        </sb-uic-sliders-ng-content>\n    </div>\n</ng-container>\n\n",
+                    styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:10px!important;width:100%}.title-border-v2{margin:10px;width:300px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.user-ratting-wrapper{border:2px solid #f3962f;border-radius:15px;padding:30px 0;background:linear-gradient(111.16deg,rgba(243,150,47,.24) 9.09%,rgba(255,255,255,0) 74.81%)}.user-rating-section ::ng-deep.prev{margin-left:-50px;top:59%}.user-rating-section ::ng-deep.next{margin-right:-50px;top:59%}.user-rating-section ::ng-deep.dots-container{display:none!important}@media screen and (max-width:768px){.user-rating-section ::ng-deep.next{margin-right:-16px;top:59%}.user-rating-section .users-block{width:90%}.user-rating-section ::ng-deep.widget-card-content-new{margin:0 15px}.user-rating-section .user-ratting-wrapper{padding:15px 0}.user-rating-section ::ng-deep.dots-container{display:block!important}.user-rating-section ::ng-deep.banner-meta{bottom:-12px}}"]
+                }] }
     ];
     /** @nocollapse */
-    RatingService.ctorParameters = function () { return [
-        { type: HttpClient }
+    UserContentRatingLibComponent.ctorParameters = function () { return [
+        { type: RatingService },
+        { type: UserContentRatingLibService }
     ]; };
-    /** @nocollapse */ RatingService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RatingService_Factory() { return new RatingService(ɵɵinject(HttpClient)); }, token: RatingService, providedIn: "root" });
-    return RatingService;
+    UserContentRatingLibComponent.propDecorators = {
+        providerId: [{ type: Input }],
+        formData: [{ type: Input }],
+        emptyResponse: [{ type: Output }],
+        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    };
+    return UserContentRatingLibComponent;
 }());
 if (false) {
     /** @type {?} */
-    RatingService.prototype.http;
+    UserContentRatingLibComponent.prototype.currentIndex;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.providerId;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.formData;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.emptyResponse;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.styleData;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.contentdata;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.scrollableItems;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.ratingService;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.userRatingSvc;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var ScrollableItemDirective = /** @class */ (function () {
-    function ScrollableItemDirective(el) {
-        this.el = el;
+var UserContentRatingLibModule = /** @class */ (function () {
+    function UserContentRatingLibModule() {
     }
-    /**
-     * @param {?} blockValue
-     * @return {?}
-     */
-    ScrollableItemDirective.prototype.scrollIntoView = /**
-     * @param {?} blockValue
-     * @return {?}
-     */
-    function (blockValue) {
-        this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
-    };
-    ScrollableItemDirective.decorators = [
-        { type: Directive, args: [{
-                    selector: '[sbUicScrollableItem]'
+    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]
                 },] }
     ];
-    /** @nocollapse */
-    ScrollableItemDirective.ctorParameters = function () { return [
-        { type: ElementRef }
-    ]; };
-    ScrollableItemDirective.propDecorators = {
-        key: [{ type: Input, args: ['sbUicScrollableItem',] }]
-    };
-    return ScrollableItemDirective;
+    return UserContentRatingLibModule;
 }());
-if (false) {
-    /** @type {?} */
-    ScrollableItemDirective.prototype.key;
-    /**
-     * @type {?}
-     * @private
-     */
-    ScrollableItemDirective.prototype.el;
-}
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-var API_END_POINTS$4 = {
-    TOP_REVIEWS: "/apis/proxies/v8/ratings/v1/topReviews"
-};
-var UserContentRatingLibService = /** @class */ (function () {
-    function UserContentRatingLibService(http) {
-        this.http = http;
+var MdoChannelV1Component = /** @class */ (function () {
+    function MdoChannelV1Component() {
     }
     /**
-     * @param {?} doId
      * @return {?}
      */
-    UserContentRatingLibService.prototype.fetchTopReviews = /**
-     * @param {?} doId
+    MdoChannelV1Component.prototype.ngOnInit = /**
      * @return {?}
      */
-    function (doId) {
-        return this.http.get(API_END_POINTS$4.TOP_REVIEWS + "/" + doId);
+    function () {
     };
-    UserContentRatingLibService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
+    MdoChannelV1Component.decorators = [
+        { type: Component, args: [{
+                    selector: 'sb-uic-mdo-channel-v1',
+                    template: "<p>mdo-channel-v1 works!</p>\n",
+                    styles: [""]
+                }] }
     ];
     /** @nocollapse */
-    UserContentRatingLibService.ctorParameters = function () { return [
-        { type: HttpClient }
-    ]; };
-    /** @nocollapse */ UserContentRatingLibService.ngInjectableDef = ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(ɵɵinject(HttpClient)); }, token: UserContentRatingLibService, providedIn: "root" });
-    return UserContentRatingLibService;
+    MdoChannelV1Component.ctorParameters = function () { return []; };
+    return MdoChannelV1Component;
 }());
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    UserContentRatingLibService.prototype.http;
-}
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var UserContentRatingLibComponent = /** @class */ (function () {
-    function UserContentRatingLibComponent(ratingService, userRatingSvc) {
-        this.ratingService = ratingService;
-        this.userRatingSvc = userRatingSvc;
-        this.currentIndex = 0;
-        this.providerId = '';
-        this.formData = '';
-        this.emptyResponse = new EventEmitter();
-        this.styleData = {};
-        this.contentdata = [];
+var MdoChannelV2Component = /** @class */ (function () {
+    function MdoChannelV2Component(route, router, eventSvc, translate, langtranslations) {
+        var _this = this;
+        this.route = route;
+        this.router = router;
+        this.eventSvc = eventSvc;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.sectionList = [];
+        this.channnelName = '';
+        this.orgId = '';
+        this.selectedIndex = 0;
+        this.hideCompetencyBlock = false;
+        this.contentTabEmptyResponseCount = 0;
+        this.titles = [
+            { title: 'Learn', url: '/page/learn', icon: 'school', disableTranslate: false },
+            {
+                title: "MDO Channel",
+                url: "/app/learn/mdo-channels/all-channels",
+                icon: '', disableTranslate: true,
+            },
+        ];
+        this.showModal = false;
+        this.descriptionMaxLength = 500;
+        this.isTelemetryRaised = false;
+        if (this.route.snapshot.data && this.route.snapshot.data.formData
+            && this.route.snapshot.data.formData.data
+            && this.route.snapshot.data.formData.data.result
+            && this.route.snapshot.data.formData.data.result.form
+            && this.route.snapshot.data.formData.data.result.form.data
+            && this.route.snapshot.data.formData.data.result.form.data.sectionList) {
+            this.sectionList = this.route.snapshot.data.formData.data.result.form.data.sectionList;
+        }
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        function () {
+            if (localStorage.getItem('websiteLanguage')) {
+                _this.translate.setDefaultLang('en');
+                /** @type {?} */
+                var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                _this.translate.use(lang);
+            }
+        }));
     }
     /**
      * @return {?}
      */
-    UserContentRatingLibComponent.prototype.ngOnInit = /**
+    MdoChannelV2Component.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.route.params.subscribe((/**
+         * @param {?} params
+         * @return {?}
+         */
+        function (params) {
+            _this.channnelName = params['channel'];
+            _this.orgId = params['orgId'];
+            _this.titles.push({
+                title: _this.channnelName, icon: '', url: 'none', disableTranslate: true,
+            });
+        }));
+    };
+    /**
+     * @param {?} tabEvent
+     * @return {?}
+     */
+    MdoChannelV2Component.prototype.tabClicked = /**
+     * @param {?} tabEvent
+     * @return {?}
+     */
+    function (tabEvent) {
+        this.raiseTelemetry(tabEvent.tab.textLabel + " tab");
+    };
+    /**
+     * @param {?} event
+     * @param {?} contentStripData
+     * @return {?}
+     */
+    MdoChannelV2Component.prototype.hideContentStrip = /**
+     * @param {?} event
+     * @param {?} contentStripData
+     * @return {?}
+     */
+    function (event, contentStripData) {
+        if (event) {
+            contentStripData['hideSection'] = true;
+            this.contentTabEmptyResponseCount = this.contentTabEmptyResponseCount + 1;
+            // if(this.contentTabEmptyResponseCount === 4 ) {
+            //   this.selectedIndex = 1
+            // }
+        }
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    MdoChannelV2Component.prototype.triggerOpenDialog = /**
+     * @param {?} event
      * @return {?}
      */
-    function () {
-        this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
-        this.getTopReviews();
+    function (event) {
+        if (event) {
+            this.showModal = true;
+            document.body.style.overflow = 'hidden';
+        }
+        this.raiseTelemetry('btn open key annoucements');
     };
     /**
      * @return {?}
      */
-    UserContentRatingLibComponent.prototype.getTopReviews = /**
+    MdoChannelV2Component.prototype.onClose = /**
      * @return {?}
      */
     function () {
-        var _this = this;
-        this.contentdata = [];
-        this.userRatingSvc.fetchTopReviews(this.providerId).subscribe((/**
-         * @param {?} response
-         * @return {?}
-         */
-        function (response) {
-            if (response && response.result && response.result.content.length) {
-                response.result.content.forEach((/**
-                 * @param {?} contentEle
-                 * @return {?}
-                 */
-                function (contentEle) {
-                    /** @type {?} */
-                    var localData = {};
-                    localData['content'] = contentEle.contentInfo;
-                    localData['rating'] = contentEle.rating;
-                    localData['review'] = contentEle.review;
-                    localData['userDetails'] = contentEle.userDetails;
-                    localData['cardSubType'] = "card-wide-lib";
-                    localData['cardCustomeClass'] = "";
-                    _this.contentdata.push(localData);
-                }));
-            }
-            else {
-                _this.emptyResponse.emit(true);
-            }
-        }), (/**
-         * @param {?} _error
-         * @return {?}
-         */
-        function (_error) {
-            _this.emptyResponse.emit(true);
-        }));
+        this.showModal = false;
+        document.body.style.overflow = 'auto';
+        this.raiseTelemetry('btn close key annoucements');
     };
     /**
-     * @param {?} ratingIndex
-     * @param {?} avg
+     * @param {?} event
      * @return {?}
      */
-    UserContentRatingLibComponent.prototype.getRatingIcon = /**
-     * @param {?} ratingIndex
-     * @param {?} avg
+    MdoChannelV2Component.prototype.raiseTelemetryInteratEvent = /**
+     * @param {?} event
      * @return {?}
      */
-    function (ratingIndex, avg) {
-        return this.ratingService.getRatingIcon(ratingIndex, avg);
+    function (event) {
+        if (event && event.viewMoreUrl) {
+            this.raiseTelemetry(event.stripTitle + " " + event.viewMoreUrl.viewMoreText);
+        }
+        if (!this.isTelemetryRaised && event && !event.viewMoreUrl) {
+            this.eventSvc.raiseInteractTelemetry({
+                type: 'click',
+                subType: 'mdo-channel',
+                id: 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 {?} ratingIndex
-     * @param {?} avg
+     * @param {?} name
      * @return {?}
      */
-    UserContentRatingLibComponent.prototype.getRatingIconClass = /**
-     * @param {?} ratingIndex
-     * @param {?} avg
+    MdoChannelV2Component.prototype.raiseCompetencyTelemetry = /**
+     * @param {?} name
      * @return {?}
      */
-    function (ratingIndex, avg) {
-        return this.ratingService.getRatingIconClass(ratingIndex, avg);
+    function (name) {
+        this.raiseTelemetry(name + " core expertise");
     };
     /**
-     * @param {?} indexValue
+     * @param {?} name
      * @return {?}
      */
-    UserContentRatingLibComponent.prototype.getCurrentIndex = /**
-     * @param {?} indexValue
+    MdoChannelV2Component.prototype.raiseTelemetry = /**
+     * @param {?} name
      * @return {?}
      */
-    function (indexValue) {
-        this.currentIndex = indexValue;
-        this.handleScrollClick(indexValue);
+    function (name) {
+        this.eventSvc.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'mdo-channel',
+            id: "" + kebabCase(name).toLocaleLowerCase(),
+        }, {}, {
+            module: WsEvents.EnumTelemetrymodules.LEARN,
+        });
     };
     /**
-     * @param {?} dataValue
+     * @param {?} event
      * @return {?}
      */
-    UserContentRatingLibComponent.prototype.handleScrollClick = /**
-     * @param {?} dataValue
+    MdoChannelV2Component.prototype.hideCompetency = /**
+     * @param {?} event
      * @return {?}
      */
-    function (dataValue) {
-        /** @type {?} */
-        var item = this.scrollableItems.find((/**
-         * @param {?} x
-         * @return {?}
-         */
-        function (x) { return x.key === dataValue; }));
-        item.scrollIntoView("nearest");
+    function (event) {
+        if (event) {
+            this.hideCompetencyBlock = true;
+        }
     };
-    UserContentRatingLibComponent.decorators = [
+    /**
+     * @param {?} _stripData
+     * @param {?} contentStrip
+     * @return {?}
+     */
+    MdoChannelV2Component.prototype.showAllContent = /**
+     * @param {?} _stripData
+     * @param {?} contentStrip
+     * @return {?}
+     */
+    function (_stripData, contentStrip) {
+        if (contentStrip && contentStrip.strips && contentStrip.strips.length) {
+            /** @type {?} */
+            var stripData = contentStrip.strips[0];
+            if (stripData && stripData.request) {
+                delete (stripData['loaderWidgets']);
+                this.router.navigate(["/app/learn/mdo-channels/" + this.channnelName + "/" + this.orgId + "/all-content"], { queryParams: { stripData: JSON.stringify(stripData) } });
+            }
+        }
+        else {
+            this.router.navigate(["/app/learn/browse-by/provider/" + this.channnelName + "/" + this.orgId + "/all-CBP"]);
+        }
+    };
+    MdoChannelV2Component.decorators = [
         { type: Component, args: [{
-                    selector: 'sb-uic-user-content-rating',
-                    template: "<ng-container *ngIf=\"contentdata.length\">\n    <sb-uic-sliders-ng-content [title]=\"'providerName'\"  [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n        <div sliderbody>\n            <div class=\"flex justify-start md:justify-center users-block mb-4 \">\n                <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n                    <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n                    [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n                        <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                        </sb-uic-avatar-photo>\n                    </div>\n                </ng-container>\n            </div>\n            <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                    <p class=\"userName w-full mb-4\">{{ratingData?.userDetails?.firstName}}</p>\n        \n                    <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                        <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                            [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n                            *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                            {{ getRatingIcon(rating, ratingData?.rating) }}\n                        </mat-icon>\n                    </div>\n                    <p class=\"content-feedback w-full mb-4 pl-0 pr-0 md:pl-12 md:pr-12 \">{{ratingData?.review}}</p>\n    \n                    <hr class=\"divider mb-4\">\n                    <p class=\"content-info w-full mb-4\">For The Content</p>\n                    <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8\">\n                        <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </sb-uic-sliders-ng-content>\n</ng-container>\n\n",
-                    styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:24px!important;width:100%}hr.divider{border:1px solid #f3972e;width:185px}"]
+                    selector: 'sb-uic-mdo-channel-v2',
+                    template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n    <div class=\"flex flex-col flex-1\">\n        <ng-container *ngIf=\"sectionList?.length\">\n            <ng-container *ngFor=\"let section of sectionList\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n                        <ng-container *ngFor=\"let column of section.column\">\n                            <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                                <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                    <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </section>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"hidden md:block\">\n        <div class=\"web-banner-background\">\n            <div class=\"flex sticky-logo-square\">\n            </div>\n            <div class=\"flex  items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n                                <div class=\"\">\n                                    <div class=\"flex items-center logo-square \">\n                                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                                    </div>\n                                    <h1  class=\" txt-ellipsis-2 break-words pt-10\"\n                                        [style.color]=\"data.titleColor\">{{data.title || channnelName}}</h1>\n                                    <p class=\"mat-body-1\" [style.color]=\"data.descriptionColor\">\n                                        {{data?.description | slice:0:descriptionMaxLength}}\n                                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                    </p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n                                <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        \n    </div>\n    <!-- top section m-site layout -->\n    <div class=\"block md:hidden\">\n        <div class=\"col-span-12\">\n            <div class=\"slider slider-box\" *ngIf=\"data.sliderData && data.sliderData.sliders\">\n                <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n            </div>\n        </div>\n        <div class=\"container px-4 flex flex-col mob-container\">\n            <div class=\"mr-4 logo-box-container\">\n                <div class=\"flex logo-box-square top mr-4\">\n                    <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                </div>\n            </div>\n            <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n                <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || channnelName}}</h1>\n                <p class=\"mat-body-2\">\n                    {{data?.description | slice:0:descriptionMaxLength}}\n                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                </p>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container metrics-section\" >\n            <div class=\"hidden md:block\">\n                <div class=\"metrics\"\n                    [ngStyle]=\"{'background': data?.metrics?.background}\">\n                    <sb-uic-data-points\n                        [providerId]=\"orgId\"\n                        [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\"\n                        [layoutType]=\"'singleFlexeRow'\"\n                        [pageLayout]=\"'mdo'\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n            <div class=\"block md:hidden  pt-14 px-4\">\n                <div class=\"mob-metrics mob-metrics-sec\">\n                    <sb-uic-data-points\n                        [providerId]=\"orgId\"\n                        [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\"\n                        [layoutType]=\"'singleRow'\"\n                        [pageLayout]=\"'mdo'\">\n                    </sb-uic-data-points>\n                </div>\n                \n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #mainContent let-data=\"data\">\n    <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"container\">\n            <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n                <sb-uic-cbp-plan\n                    [layoutType]=\"'web'\"\n                    [mobileHeight]=\"false\"\n                    [fetchDataFromApi]=\"true\"\n                    [channelId]=\"orgId\"\n                    [objectData]=\"data?.cbpPlanSection?.data\">\n                </sb-uic-cbp-plan>\n            </div>\n            <div class=\"block md:hidden col-span-12 mt-6\">\n                <sb-uic-announcements\n                    [layoutType]=\"'mobile'\"\n                    (openDialog)=\"triggerOpenDialog($event)\"\n                    [objectData]=\"data?.announcementSection?.data\"\n                    [fetchDataFromApi]=\"false\"\n                    [channelId]=\"orgId\">\n                </sb-uic-announcements>\n                <div class=\"announcements-container\" *ngIf=\"showModal\">\n                    <div class=\"cursor-pointer close-share-dialog\">\n                        <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n                    </div>\n                    <div class=\"share-modal px-3 pt-8\">\n                        <sb-uic-announcements\n                            [layoutType]=\"'web'\"\n                            (openDialog)=\"triggerOpenDialog($event)\"\n                            [objectData]=\"data?.announcementSection?.data\"\n                            [mobileHeight]=\"true\"\n                            [fetchDataFromApi]=\"true\"\n                            [channelId]=\"orgId\">\n                        </sb-uic-announcements>\n                    </div>\n                </div>\n            </div>\n            <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n                    <!-- Tabs Section -->\n                    <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n                        [selectedIndex]=\"selectedIndex\" (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n                        <mat-tab label=\"Content\" >\n                            <ng-template mat-tab-label i18n>\n                                Learn\n                            </ng-template>\n                            <ng-container *ngIf=\"data.tabSection.contentTab.length === contentTabEmptyResponseCount\">\n                                <div class=\"flex justify-center w-full\">\n                                    <div class=\"margin-xl text-center\" >\n                                        <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                                            class=\"margin-top-l margin-bottom-s\">\n                                        <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <div class=\"padding-top-l \">\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                        <mat-tab label=\"Core Areas\">\n                            <ng-template mat-tab-label i18n>\n                                Competency\n                            </ng-template>\n                            <div>\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                    </mat-tab-group>\n                </div>\n                <div class=\"col-span-12 md:col-span-4\">\n                    <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n                        *ngIf=\"data?.cbpPlanSection?.data\">\n                        <div class=\"pt-4\">\n                            <sb-uic-cbp-plan\n                                [layoutType]=\"'web'\"\n                                [mobileHeight]=\"false\"\n                                [fetchDataFromApi]=\"true\"\n                                [channelId]=\"orgId\"\n                                [objectData]=\"data?.cbpPlanSection?.data\">\n                            </sb-uic-cbp-plan>\n                        </div>                    \n                    </div>\n                    <div class=\"hidden md:block\" \n                    *ngIf=\"data?.announcementSection?.data\">\n                    <div class=\"pt-4\">\n                        <sb-uic-announcements\n                            [layoutType]=\"'web'\"\n                            [mobileHeight]=\"false\"\n                            [fetchDataFromApi]=\"true\"\n                            [channelId]=\"orgId\"\n                            [objectData]=\"data?.announcementSection?.data\">\n                        </sb-uic-announcements>\n                    </div>                    \n                </div>\n                </div>               \n            </div>\n        </div>\n    </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n    <div class=\"flex  items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"w-full\">\n            Announcement Section -->\n            <!-- <h1>Announcement</h1>\n        </div>\n    </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay  let-data=\"data\">\n    <ng-container *ngIf=\"data?.length\">\n        <ng-container *ngFor=\"let section of data\">\n            <ng-container *ngIf=\"section?.enabled\">\n                <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n                    <ng-container *ngFor=\"let column of section.column\">\n                        <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                            <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n                                [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n                                [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </section>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n    <div class=\"padding-top-l padding-bottom-l relative\"  [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock;else noData\">\n        <div class=\"w-full container-balanced\">\n            <p class=\"mat-body-1\">This section shows the list of top competencies users in this MDO are learning, based on the courses they've completed and enrolled in.</p>\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook-mdo\n                    [dynamicColor]=\"'#999999'\"\n                    [dynamicAlignPills]=\"'start'\"\n                    [cardDisplayCount]=\"2\"\n                    (emptyResponse)=\"hideCompetency($event)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n                    [objectData]=\"competency\"\n                    [providerId]=\"orgId\"\n                    >\n                </sb-uic-competency-passbook-mdo>\n            </div>\n        </div>\n        <!-- <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\"> -->\n    </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n    <ng-container *ngIf=\"!contentStrip?.hideSection\">\n        <div class=\"flex mb-8\">\n            <div class=\"w-full\">\n                <sb-uic-content-strip-with-tabs\n                    [emitViewAll]=\"true\"\n                    (viewAllResponse)=\"showAllContent($event, contentStrip)\"\n                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                    (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n                    [providerId]=\"orgId\"\n                    [widgetData]=\"contentStrip\"\n                    [channnelName]=\"channnelName\"\n                    >\n                </sb-uic-content-strip-with-tabs>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noData>\n        <div class=\"flex justify-center w-full\">\n            <div class=\"margin-xl text-center\" >\n                <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                    class=\"margin-top-l margin-bottom-s\">\n                <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n            </div>\n        </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container top-learners margin-bottom-l margin-top-l\">\n            <sb-uic-top-learners\n                [objectData]=\"data\"\n                [channnelName]=\"channnelName\"\n                [channelId]=\"orgId\">\n            </sb-uic-top-learners>\n        </div>\n    </div>\n</ng-template>",
+                    styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720698778795_MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:right;background-repeat:no-repeat}.sticky-logo-square{position:absolute;top:215px;justify-content:end;width:20.5%;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px}.logo-square{width:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:rgba(19,19,19,.6392156863);width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width:768px){.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]
                 }] }
     ];
     /** @nocollapse */
-    UserContentRatingLibComponent.ctorParameters = function () { return [
-        { type: RatingService },
-        { type: UserContentRatingLibService }
+    MdoChannelV2Component.ctorParameters = function () { return [
+        { type: ActivatedRoute },
+        { type: Router },
+        { type: EventService },
+        { type: TranslateService },
+        { type: MultilingualTranslationsService$1 }
     ]; };
-    UserContentRatingLibComponent.propDecorators = {
-        providerId: [{ type: Input }],
-        formData: [{ type: Input }],
-        emptyResponse: [{ type: Output }],
-        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    MdoChannelV2Component.propDecorators = {
+        sectionList: [{ type: Input }]
     };
-    return UserContentRatingLibComponent;
+    return MdoChannelV2Component;
 }());
 if (false) {
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.currentIndex;
+    MdoChannelV2Component.prototype.sectionList;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.providerId;
+    MdoChannelV2Component.prototype.channnelName;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.formData;
+    MdoChannelV2Component.prototype.orgId;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.emptyResponse;
+    MdoChannelV2Component.prototype.selectedIndex;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.styleData;
+    MdoChannelV2Component.prototype.hideCompetencyBlock;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.contentdata;
+    MdoChannelV2Component.prototype.contentTabEmptyResponseCount;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.scrollableItems;
+    MdoChannelV2Component.prototype.titles;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.ratingService;
+    MdoChannelV2Component.prototype.showModal;
     /** @type {?} */
-    UserContentRatingLibComponent.prototype.userRatingSvc;
+    MdoChannelV2Component.prototype.descriptionMaxLength;
+    /** @type {?} */
+    MdoChannelV2Component.prototype.isTelemetryRaised;
+    /**
+     * @type {?}
+     * @private
+     */
+    MdoChannelV2Component.prototype.route;
+    /**
+     * @type {?}
+     * @private
+     */
+    MdoChannelV2Component.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    MdoChannelV2Component.prototype.eventSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    MdoChannelV2Component.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    MdoChannelV2Component.prototype.langtranslations;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var SlidersNgContentLibComponent = /** @class */ (function (_super) {
-    __extends(SlidersNgContentLibComponent, _super);
-    function SlidersNgContentLibComponent(events, valueSvc) {
-        var _this = _super.call(this) || this;
-        _this.events = events;
-        _this.valueSvc = valueSvc;
-        _this.title = '';
-        _this.loadNgContentData = false;
-        _this.autoScroll = false;
-        _this.currentIndexValue = new EventEmitter();
-        _this.id = "banner_" + Math.random();
-        _this.defaultMenuSubscribe = null;
-        _this.isLtMedium$ = _this.valueSvc.isLtMedium$;
-        _this.currentIndex = 0;
-        _this.slideInterval = null;
-        _this.isMobile = false;
-        return _this;
+var ɵ0$7 = HttpLoaderFactory;
+var MDOChannelModule = /** @class */ (function () {
+    function MDOChannelModule() {
+    }
+    MDOChannelModule.decorators = [
+        { type: 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]
+                },] }
+    ];
+    return MDOChannelModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var ProvidersV2Component = /** @class */ (function () {
+    function ProvidersV2Component(route, router, datePipe, events) {
+        this.route = route;
+        this.router = router;
+        this.datePipe = datePipe;
+        this.events = events;
+        this.sectionList = [];
+        this.providerName = '';
+        this.providerId = '';
+        this.hideCompetencyBlock = false;
+        this.titles = [
+            { title: 'Learn', url: '/page/learn', icon: 'school', disableTranslate: false },
+            { title: "All Providers",
+                url: "/app/learn/browse-by/provider/all-providers",
+                icon: '', disableTranslate: true,
+            },
+        ];
+        this.descriptionMaxLength = 500;
+        this.isTelemetryRaised = false;
     }
     /**
      * @return {?}
      */
-    SlidersNgContentLibComponent.prototype.ngOnInit = /**
+    ProvidersV2Component.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        if (this.route.snapshot.data && this.route.snapshot.data.formData
+            && this.route.snapshot.data.formData.data
+            && this.route.snapshot.data.formData.data.result
+            && this.route.snapshot.data.formData.data.result.form
+            && this.route.snapshot.data.formData.data.result.form.data
+            && this.route.snapshot.data.formData.data.result.form.data.sectionList) {
+            this.sectionList = this.route.snapshot.data.formData.data.result.form.data.sectionList;
+        }
+        this.route.params.subscribe((/**
+         * @param {?} params
+         * @return {?}
+         */
+        function (params) {
+            _this.providerName = params['provider'];
+            _this.providerId = params['orgId'];
+            _this.titles.push({
+                title: _this.providerName, icon: '', url: 'none', disableTranslate: true,
+            });
+        }));
+        this.getNavitems();
+        this.currentMonthAndYear = this.datePipe.transform(new Date(), 'MMMM y');
+    };
+    /**
+     * @return {?}
+     */
+    ProvidersV2Component.prototype.getNavitems = /**
+     * @return {?}
+     */
+    function () {
+        this.navList = this.sectionList.filter((/**
+         * @param {?} obj
+         * @return {?}
+         */
+        function (obj) { return obj.enabled && obj.navigation && obj.navOrder; })).sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        function (a, b) { return a.navOrder - b.navOrder; }));
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    ProvidersV2Component.prototype.scrollToSection = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        /** @type {?} */
+        var section;
+        section = document.getElementById(name);
+        if (section) {
+            // section.scrollIntoView({ behavior: 'smooth', block: 'start',inline: 'nearest', offsetTop: yOffset  })
+            window.scrollTo({
+                top: section.offsetTop - 121,
+                behavior: 'smooth',
+            });
+        }
+    };
+    /**
+     * @param {?} event
+     * @param {?} columnData
+     * @return {?}
+     */
+    ProvidersV2Component.prototype.hideCompetency = /**
+     * @param {?} event
+     * @param {?} columnData
+     * @return {?}
+     */
+    function (event, columnData) {
+        if (event) {
+            this.hideCompetencyBlock = true;
+            columnData['navigation'] = false;
+            columnData['enabled'] = false;
+            this.navList.forEach((/**
+             * @param {?} navItem
+             * @return {?}
+             */
+            function (navItem) {
+                navItem.column.forEach((/**
+                 * @param {?} colEle
+                 * @return {?}
+                 */
+                function (colEle) {
+                    if (colEle.key === columnData.key) {
+                        navItem['navigation'] = false;
+                    }
+                }));
+            }));
+        }
+    };
+    /**
+     * @param {?} event
+     * @param {?} contentStripData
+     * @return {?}
+     */
+    ProvidersV2Component.prototype.hideContentStrip = /**
+     * @param {?} event
+     * @param {?} contentStripData
      * @return {?}
      */
-    function () {
-        var _this = this;
-        if (this.autoScroll) {
-            this.reInitiateSlideInterval();
+    function (event, contentStripData) {
+        if (event) {
+            contentStripData['hideSection'] = true;
         }
-        this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
-         * @param {?} isLtMedium
-         * @return {?}
-         */
-        function (isLtMedium) {
-            _this.isMobile = isLtMedium;
-        }));
     };
     /**
+     * @param {?} event
+     * @param {?} learnerReview
      * @return {?}
      */
-    SlidersNgContentLibComponent.prototype.reInitiateSlideInterval = /**
+    ProvidersV2Component.prototype.hideLearnerReview = /**
+     * @param {?} event
+     * @param {?} learnerReview
      * @return {?}
      */
-    function () {
-        var _this = this;
-        if (this.widgetData && this.widgetData.length > 1) {
-            try {
-                if (this.slideInterval) {
-                    this.slideInterval.unsubscribe();
-                }
-            }
-            catch (e) {
-            }
-            finally {
-                this.slideInterval = interval(8000).subscribe((/**
-                 * @return {?}
-                 */
-                function () {
-                    if (_this.currentIndex === _this.widgetData.length - 1) {
-                        _this.currentIndex = 0;
-                        _this.currentIndexValue.emit(_this.currentIndex);
-                    }
-                    else {
-                        _this.currentIndex += 1;
-                        _this.currentIndexValue.emit(_this.currentIndex);
-                    }
-                }));
-            }
+    function (event, learnerReview) {
+        if (event) {
+            learnerReview['hideSection'] = true;
         }
     };
     /**
-     * @param {?} index
+     * @param {?} _stripData
+     * @param {?} contentStrip
      * @return {?}
      */
-    SlidersNgContentLibComponent.prototype.slideTo = /**
-     * @param {?} index
+    ProvidersV2Component.prototype.showAllContent = /**
+     * @param {?} _stripData
+     * @param {?} contentStrip
      * @return {?}
      */
-    function (index) {
-        if (index >= 0 && index < this.widgetData.length) {
-            this.currentIndex = index;
-            this.currentIndexValue.emit(this.currentIndex);
-        }
-        else if (index === this.widgetData.length) {
-            this.currentIndex = 0;
-            this.currentIndexValue.emit(this.currentIndex);
+    function (_stripData, contentStrip) {
+        if (contentStrip && contentStrip.strips && contentStrip.strips.length) {
+            /** @type {?} */
+            var stripData = contentStrip.strips[0];
+            if (stripData && stripData.request) {
+                delete (stripData['loaderWidgets']);
+                this.router.navigate(["/app/learn/browse-by/provider/" + this.providerName + "/" + this.providerId + "/all-content"], { queryParams: { stripData: JSON.stringify(stripData), pageDetails: true } });
+            }
         }
         else {
-            this.currentIndex = this.widgetData.length + index;
-            this.currentIndexValue.emit(this.currentIndex);
-        }
-        if (this.autoScroll) {
-            this.reInitiateSlideInterval();
+            this.router.navigate(["/app/learn/browse-by/provider/" + this.providerName + "/" + this.providerId + "/all-CBP"], { queryParams: { pageDetails: true } });
         }
     };
-    Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            /** @type {?} */
-            var currentData = this.widgetData[this.currentIndex];
-            if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
-                return true;
-            }
-            return false;
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
+     * @param {?} event
      * @return {?}
      */
-    SlidersNgContentLibComponent.prototype.openInNewTab = /**
+    ProvidersV2Component.prototype.raiseTelemetryInteratEvent = /**
+     * @param {?} event
      * @return {?}
      */
-    function () {
-        /** @type {?} */
-        var currentData = this.widgetData[this.currentIndex];
-        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
-            window.open(currentData.redirectUrl);
+    function (event) {
+        if (event && event.viewMoreUrl) {
+            this.raiseTelemetry(event.stripTitle + " " + event.viewMoreUrl.viewMoreText);
+        }
+        if (!this.isTelemetryRaised && event && !event.viewMoreUrl) {
+            this.events.raiseInteractTelemetry({
+                type: 'click',
+                subType: 'ATI/CTI',
+                id: 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 {?} bannerUrl
+     * @param {?} name
      * @return {?}
      */
-    SlidersNgContentLibComponent.prototype.raiseTelemetry = /**
-     * @param {?} bannerUrl
+    ProvidersV2Component.prototype.raiseCompetencyTelemetry = /**
+     * @param {?} name
      * @return {?}
      */
-    function (bannerUrl) {
-        this.openInNewTab();
-        /** @type {?} */
-        var path = window.location.pathname.replace('/', '');
-        /** @type {?} */
-        var url = path + window.location.search;
+    function (name) {
+        this.raiseTelemetry(name + " core expertise");
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    ProvidersV2Component.prototype.raiseTelemetry = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
         this.events.raiseInteractTelemetry({
             type: 'click',
-            subType: 'banner',
-        }, {
-            pageUrl: url,
-            bannerRedirectUrl: bannerUrl,
-        }, {
-            pageIdExt: 'banner',
-            module: WsEvents.EnumTelemetrymodules.CONTENT,
+            subType: 'ATI/CTI',
+            id: "" + kebabCase(name).toLocaleLowerCase(),
+        }, {}, {
+            module: WsEvents.EnumTelemetrymodules.LEARN,
         });
     };
     /**
+     * @param {?} name
      * @return {?}
      */
-    SlidersNgContentLibComponent.prototype.ngOnDestroy = /**
+    ProvidersV2Component.prototype.raiseNavTelemetry = /**
+     * @param {?} name
      * @return {?}
      */
-    function () {
-        if (this.defaultMenuSubscribe) {
-            this.defaultMenuSubscribe.unsubscribe();
-        }
+    function (name) {
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'ATI/CTI',
+            id: 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 = function () { return [
-        { type: EventService },
-        { type: ValueService }
+    ProvidersV2Component.ctorParameters = function () { return [
+        { 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 }]
     };
-    return SlidersNgContentLibComponent;
-}(WidgetBaseComponent));
+    return ProvidersV2Component;
+}());
 if (false) {
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.widgetData;
+    ProvidersV2Component.prototype.sectionList;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.styleData;
+    ProvidersV2Component.prototype.providerName;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.title;
+    ProvidersV2Component.prototype.providerId;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.loadNgContentData;
+    ProvidersV2Component.prototype.navList;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.autoScroll;
+    ProvidersV2Component.prototype.hideCompetencyBlock;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.currentIndexValue;
+    ProvidersV2Component.prototype.currentMonthAndYear;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.id;
+    ProvidersV2Component.prototype.titles;
+    /** @type {?} */
+    ProvidersV2Component.prototype.descriptionMaxLength;
+    /** @type {?} */
+    ProvidersV2Component.prototype.isTelemetryRaised;
     /**
      * @type {?}
      * @private
      */
-    SlidersNgContentLibComponent.prototype.defaultMenuSubscribe;
-    /** @type {?} */
-    SlidersNgContentLibComponent.prototype.isLtMedium$;
-    /** @type {?} */
-    SlidersNgContentLibComponent.prototype.currentIndex;
+    ProvidersV2Component.prototype.route;
     /** @type {?} */
-    SlidersNgContentLibComponent.prototype.slideInterval;
-    /** @type {?} */
-    SlidersNgContentLibComponent.prototype.isMobile;
+    ProvidersV2Component.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    SlidersNgContentLibComponent.prototype.events;
+    ProvidersV2Component.prototype.datePipe;
     /**
      * @type {?}
      * @private
      */
-    SlidersNgContentLibComponent.prototype.valueSvc;
+    ProvidersV2Component.prototype.events;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/* tslint:enable */
-var  /* tslint:enable */
-MyHammerConfig$1 = /** @class */ (function (_super) {
-    __extends(MyHammerConfig, _super);
-    function MyHammerConfig() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * @param {?} element
-     * @return {?}
-     */
-    MyHammerConfig.prototype.buildHammer = /**
-     * @param {?} element
-     * @return {?}
-     */
-    function (element) {
-        /** @type {?} */
-        var mc = new Hammer(element, {
-            touchAction: 'pan-y',
-        });
-        return mc;
-    };
-    return MyHammerConfig;
-}(HammerGestureConfig));
-// tslint:disable-next-line: max-classes-per-file
-var SlidersNgContentLibModule = /** @class */ (function () {
-    function 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,
-                        },
-                    ],
-                },] }
-    ];
-    return SlidersNgContentLibModule;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var ScrollableItemModule = /** @class */ (function () {
-    function ScrollableItemModule() {
-    }
-    ScrollableItemModule.decorators = [
-        { type: NgModule, args: [{
-                    declarations: [ScrollableItemDirective],
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [ScrollableItemDirective],
-                },] }
-    ];
-    return ScrollableItemModule;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var UserContentRatingLibModule = /** @class */ (function () {
-    function UserContentRatingLibModule() {
+var ɵ0$8 = HttpLoaderFactory;
+var ProvidersModule = /** @class */ (function () {
+    function ProvidersModule() {
     }
-    UserContentRatingLibModule.decorators = [
+    ProvidersModule.decorators = [
         { type: 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]
                 },] }
     ];
-    return UserContentRatingLibModule;
+    return ProvidersModule;
 }());
 
 /**
@@ -16181,5 +17521,5 @@ var UserContentRatingLibModule = /** @class */ (function () {
  * @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