@sunbird-cb/consumption 0.0.81 → 0.0.83

package/fesm2015/sunbird-cb-consumption.js

@@ -9,7 +9,7 @@ import { __awaiter } from 'tslib';
 import { WidgetBaseComponent, SbUiResolverModule } from '@sunbird-cb/resolver-v2';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { get, uniqBy, orderBy, camelCase, kebabCase } from 'lodash';
-import * as moment$2 from 'moment';
+import * as moment$4 from 'moment';
 import { duration, utc } from 'moment';
 import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import 'rxjs/add/observable/of';
@@ -1444,7 +1444,7 @@ function viewerRouteGenerator(id, mimeType, collectionId, collectionType, forPre
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-const moment = moment$2;
+const moment = moment$4;
 // tslint:enable
 // TODO: move this in some common place
 /** @type {?} */
@@ -6323,7 +6323,12 @@ const API_END_POINTS$2 = {
     PROVIDER_INSIGHTS: `/apis/proxies/v8/microsite/read/insights`,
     TRAINING_DETAILS: `apis/proxies/v8/sunbirdigot/search`,
     ANNOUNCEMENTS_DETAILS: `apis/proxies/v8/announcements/v1/search`,
-    LEARNERS: `apis/proxies/v8/halloffame/top/learners`
+    LEARNERS: `apis/proxies/v8/halloffame/top/learners`,
+    LEADERBOARD: 'apis/proxies/v8/halloffame/v1/mdoleaderboard',
+    LEADERBOARD_USERS: `apis/proxies/v8/halloffame/v1/userleaderboard`,
+    NLW_LEADERBOARD: `apis/proxies/v8/national/learning/week/insights`,
+    INSIGHTS: `apis/proxies/v8/read/user/insights`,
+    USER_PROGRESS: `apis/proxies/v8/halloffame/v1/userleaderboard`,
 };
 class InsiteDataService {
     /**
@@ -6360,6 +6365,40 @@ class InsiteDataService {
     fetchLearner(channelId) {
         return this.http.get(`${API_END_POINTS$2.LEARNERS}/${channelId}`);
     }
+    /**
+     * @return {?}
+     */
+    fetchLeaderboard() {
+        return this.http.get(`${API_END_POINTS$2.LEADERBOARD}`);
+    }
+    /**
+     * @param {?} orgId
+     * @return {?}
+     */
+    fetchMdoUsers(orgId) {
+        return this.http.get(`${API_END_POINTS$2.LEADERBOARD_USERS}/${orgId}`);
+    }
+    /**
+     * @return {?}
+     */
+    fetchNwlStats() {
+        return this.http.get(`${API_END_POINTS$2.NLW_LEADERBOARD}`);
+    }
+    /**
+     * @param {?} payload
+     * @return {?}
+     */
+    fetchInsightsData(payload) {
+        /** @type {?} */
+        const result = this.http.post(API_END_POINTS$2.INSIGHTS, payload);
+        return result;
+    }
+    /**
+     * @return {?}
+     */
+    fetchUserProgress() {
+        return this.http.get(`${API_END_POINTS$2.USER_PROGRESS}`);
+    }
 }
 InsiteDataService.decorators = [
     { type: Injectable, args: [{
@@ -6405,7 +6444,12 @@ class DataPointsComponent {
         }
         if (this.fetchDataFromApi) {
             this.isDataLoading = true;
-            this.getInsiteData();
+            if (this.pageLayout === 'nlw') {
+                this.getStats();
+            }
+            else {
+                this.getInsiteData();
+            }
         }
     }
     /**
@@ -6466,6 +6510,28 @@ class DataPointsComponent {
             this.isDataLoading = false;
         }));
     }
+    /**
+     * @return {?}
+     */
+    getStats() {
+        this.insightSvc.fetchNwlStats().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            if (res && res.result && res.result.data) {
+                this.objectData = res.result.data;
+            }
+            this.isDataLoading = false;
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        error => {
+            console.log(error);
+            this.isDataLoading = false;
+        }));
+    }
     /**
      * @param {?} value
      * @return {?}
@@ -6493,8 +6559,8 @@ class DataPointsComponent {
 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 pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n    <!-- <div class=\"logodiv margin-bottom-s\">\n        <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n    </div> -->\n    <div *ngFor=\"let obj of objectData; let i = index\">\n        <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n            <div class=\"v2-icons-div\">\n                <div class=\"v2-icon-contaier\"\n                    [style.background]=\"obj?.iconBackgroupColorV2\"\n                    [style.borderColor]=\"obj?.valueColorV2\">\n                    <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n                </div>\n            </div>\n            <div class=\"v2-content-div\">\n                <div class=\"flex flex-col\">\n                    <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n                    <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n                        {{converToIndianSystem(obj?.value)}}\n                    </div>\n                    <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n                        {{obj?.label}}\n                    </div>\n                    <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n                        <div class=\"v2-dot\"\n                            [style.background]=\"obj?.valueColorV2\"\n                            [style.borderColor]=\"obj?.labelColorV2\"></div>\n                        <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n                        <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\"  *ngIf=\"(item && item.value)\">\n                                    {{item?.value  | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                                </div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n    <div class=\"flex space-around\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div class=\"flex flex-col\">\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n        <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n            <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n                <div class=\"v2-icons-div\">\n                    <div class=\"v2-icon-contaier\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n                        [height]=\"'55px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n                <div class=\"v2-content-div\">\n                    <div class=\"flex flex-col\">\n                        <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        </div>\n                        <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                        </div>\n                    </div>\n                </div>\n            </div>        \n        </div>\n    </div>\n</ng-container>\n\n<ng-container>\n    <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n        <div class=\"flex\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"singleFlexeRow-div flex-item\">\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div class=\"flex flex-col\">\n                            <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n        <div class=\"flex gap-4\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n        <div class=\"flex gap-4\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n",
-                styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
+                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 pl-5 margin-top-l\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n    <!-- <div class=\"logodiv margin-bottom-s\">\n        <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n    </div> -->\n    <div *ngFor=\"let obj of objectData; let i = index\">\n        <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n            <div class=\"v2-icons-div\">\n                <div class=\"v2-icon-contaier\"\n                    [style.background]=\"obj?.iconBackgroupColorV2\"\n                    [style.borderColor]=\"obj?.valueColorV2\">\n                    <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n                </div>\n            </div>\n            <div class=\"v2-content-div\">\n                <div class=\"flex flex-col\">\n                    <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj?.value)\">0</div>\n                    <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n                        {{converToIndianSystem(obj?.value)}}\n                    </div>\n                    <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n                        {{obj?.label}}\n                    </div>\n                    <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData?.length\">\n                        <div class=\"v2-dot\"\n                            [style.background]=\"obj?.valueColorV2\"\n                            [style.borderColor]=\"obj?.labelColorV2\"></div>\n                        <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n                        <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\"  *ngIf=\"(item && item.value)\">\n                                    {{item?.value  | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                                </div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n    <div class=\"flex space-around\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div class=\"flex flex-col\">\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n    <div class=\"stats-header\">\n        <div class=\"flex items-center justify-center stats-title\">\n            <span class=\"my-arrow\">&#10094;</span>\n            <span class=\"my-arrow less-opacity1\">&#10094;</span>\n            <span class=\"my-arrow less-opacity2\">&#10094;</span>\n            <span class=\"px-4\">{{title}}</span>\n            <span class=\"my-arrow less-opacity2\">&#10095;</span>\n            <span class=\"my-arrow less-opacity1\">&#10095;</span>\n            <span class=\"my-arrow\">&#10095;</span>\n        </div>\n    </div>\n    <div class=\"nlw-status\" *ngIf=\"layoutType === 'nlwRow'\">\n        <div class=\"flex space-around pt-5\">\n            <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n                <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\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    <div class=\"nlw-status-mob\" *ngIf=\"layoutType === 'nlwCol'\">\n        <div *ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n            <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div class=\"flex flex-col\">\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                            {{converToIndianSystem(obj?.value)}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n        <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n            <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n                <div class=\"v2-icons-div\">\n                    <div class=\"v2-icon-contaier\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n                        [height]=\"'55px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n                <div class=\"v2-content-div\">\n                    <div class=\"flex flex-col\">\n                        <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        </div>\n                        <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                        </div>\n                    </div>\n                </div>\n            </div>        \n        </div>\n    </div>\n</ng-container>\n\n<ng-container>\n    <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n        <div class=\"flex\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"singleFlexeRow-div flex-item\">\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div class=\"flex flex-col\">\n                            <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n        <div class=\"flex gap-4\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n        <div class=\"flex gap-4\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n",
+                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')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top:-20px;z-index:90}.my-arrow{font-size:12px}.less-opacity1{opacity:.75}.less-opacity2{opacity:.5}.nlw-status{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px}.nlw-status-mob{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px;padding-top:32px}.nlw-div{padding:0 16px;margin:10px 0 16px}.divider{border-left:1.6px solid #a6a4a4}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
             }] }
 ];
 /** @nocollapse */
@@ -6506,7 +6572,8 @@ DataPointsComponent.propDecorators = {
     layoutType: [{ type: Input }],
     fetchDataFromApi: [{ type: Input }],
     providerId: [{ type: Input }],
-    pageLayout: [{ type: Input }]
+    pageLayout: [{ type: Input }],
+    title: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -6520,10 +6587,14 @@ if (false) {
     /** @type {?} */
     DataPointsComponent.prototype.pageLayout;
     /** @type {?} */
+    DataPointsComponent.prototype.title;
+    /** @type {?} */
     DataPointsComponent.prototype.customArray;
     /** @type {?} */
     DataPointsComponent.prototype.isDataLoading;
     /** @type {?} */
+    DataPointsComponent.prototype.apiResults;
+    /** @type {?} */
     DataPointsComponent.prototype.insightSvc;
 }
 
@@ -7950,7 +8021,7 @@ AnnouncementsModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-const moment$1 = moment$2;
+const moment$1 = moment$4;
 class TopLearnersComponent {
     /**
      * @param {?} insightSvc
@@ -8334,6 +8405,7 @@ class SlidersNgContentLibComponent extends WidgetBaseComponent {
         this.title = '';
         this.loadNgContentData = false;
         this.autoScroll = false;
+        this.customBanner = false;
         this.currentIndexValue = new EventEmitter();
         this.id = `banner_${Math.random()}`;
         this.defaultMenuSubscribe = null;
@@ -8461,8 +8533,8 @@ class SlidersNgContentLibComponent extends WidgetBaseComponent {
 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}}"]
+                template: "<div class=\"{{customBanner ? 'keybanner' : '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=\"{{customBanner ? 'keybanner' : '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}.keybanner{position:relative;margin:auto}.keybanner.inline-meta{padding-bottom:0!important}.keybanner.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}}.keybanner .prev{background-color:#f3962f!important;color:#fff;top:50%;font-size:12px;height:26px!important;width:26px!important}.keybanner .next{top:50%;background-color:#f3962f!important;color:#fff;font-size:12px;height:26px!important;width:26px!important}@media screen and (max-width:768px){.keybanner .prev{top:50px;left:0;background-color:#f3962f!important;color:#fff}.keybanner .next{right:0;margin-right:-16px;top:50px;background-color:#f3962f!important;color:#fff}}"]
             }] }
 ];
 /** @nocollapse */
@@ -8476,6 +8548,7 @@ SlidersNgContentLibComponent.propDecorators = {
     title: [{ type: Input }],
     loadNgContentData: [{ type: Input }],
     autoScroll: [{ type: Input }],
+    customBanner: [{ type: Input }],
     currentIndexValue: [{ type: Output }],
     id: [{ type: HostBinding, args: ['id',] }],
     currentIndex: [{ type: Input }]
@@ -8492,6 +8565,8 @@ if (false) {
     /** @type {?} */
     SlidersNgContentLibComponent.prototype.autoScroll;
     /** @type {?} */
+    SlidersNgContentLibComponent.prototype.customBanner;
+    /** @type {?} */
     SlidersNgContentLibComponent.prototype.currentIndexValue;
     /** @type {?} */
     SlidersNgContentLibComponent.prototype.id;
@@ -13715,6 +13790,7 @@ ContentStripWithTabsPillsModule.decorators = [
 /** @type {?} */
 const API_POINTS = {
     COMPETENCY_LIST: `apis/proxies/v8/competency/v4/search`,
+    COMPETENCY_LIST_V2: `apis/proxies/v8/searchBy/v2/competency`,
     CERTIFICATE_URL: `apis/protected/v8/cohorts/course/batch/cert/download/`,
 };
 class CompetencyPassbookService {
@@ -13732,6 +13808,12 @@ class CompetencyPassbookService {
     getCompetencyList(payload) {
         return this.http.post(API_POINTS.COMPETENCY_LIST, payload);
     }
+    /**
+     * @return {?}
+     */
+    getCompetencyListv_V2() {
+        return this.http.get(API_POINTS.COMPETENCY_LIST_V2);
+    }
     /**
      * @param {?} certId
      * @return {?}
@@ -13770,8 +13852,9 @@ class CompetencyPassbookComponent {
      * @param {?} contentSvc
      * @param {?} competencySvc
      * @param {?} router
+     * @param {?} environment
      */
-    constructor(configSvc, contentSvc, competencySvc, router) {
+    constructor(configSvc, contentSvc, competencySvc, router, environment) {
         this.configSvc = configSvc;
         this.contentSvc = contentSvc;
         this.competencySvc = competencySvc;
@@ -13788,11 +13871,13 @@ class CompetencyPassbookComponent {
         this.competencyStrength = 0;
         this.competencyThemeLength = 6;
         this.showAllTheme = [{ name: 'Show all', showAll: false }];
+        this.environment = environment;
     }
     /**
      * @return {?}
      */
     ngOnInit() {
+        this.comeptencyKeys = this.configSvc.compentency[this.environment.compentencyVersionKey];
         this.getAllCompetencies();
         // this.competencyData = this.objectData
         // this.filter(this.currentFilter)
@@ -13834,7 +13919,7 @@ class CompetencyPassbookComponent {
                         "lastUpdatedOn": "desc"
                     },
                     "facets": [
-                        "competencies_v5.competencyArea"
+                        `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyArea}`
                     ],
                     "limit": 0,
                     "offset": 0,
@@ -13852,7 +13937,7 @@ class CompetencyPassbookComponent {
                          * @return {?}
                          */
                         (fact) => {
-                            if (fact.name === 'competencies_v5.competencyArea') {
+                            if (fact.name === `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyArea}`) {
                                 this.competencyArea = fact.values;
                             }
                         }));
@@ -13944,18 +14029,16 @@ class CompetencyPassbookComponent {
      */
     getAllCompetencies() {
         this.loadCometency = true;
-        /** @type {?} */
-        let request = { "search": { "type": "Competency Area" }, "filter": { "isDetail": true } };
-        this.competencySvc.getCompetencyList(request).subscribe((/**
+        this.competencySvc.getCompetencyListv_V2().subscribe((/**
          * @param {?} response
          * @return {?}
          */
         (response) => {
             this.allcompetencyTheme = {};
-            if (response && response.result && response.result.competency) {
-                this.originalCompetencyArray = response.result.competency;
+            if (response && response.result && response.result.content) {
+                this.originalCompetencyArray = response.result.content;
                 this.getCompetencyArea();
-                response.result.competency.forEach((/**
+                response.result.content.forEach((/**
                  * @param {?} element
                  * @return {?}
                  */
@@ -13986,14 +14069,14 @@ class CompetencyPassbookComponent {
             let request = {
                 "request": {
                     "query": "",
-                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": value, "status": [
+                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { [`${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyArea}`]: value, "status": [
                             "Live"
                         ] }),
                     "sort_by": {
                         "lastUpdatedOn": "desc"
                     },
                     "facets": [
-                        "competencies_v5.competencyTheme"
+                        `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyTheme}`
                     ],
                     "limit": 0,
                     "offset": 0,
@@ -14090,14 +14173,14 @@ class CompetencyPassbookComponent {
             let request = {
                 "request": {
                     "query": "",
-                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": area.name, "status": [
+                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { [`${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyArea}`]: area.name, "status": [
                             "Live"
                         ] }),
                     "sort_by": {
                         "lastUpdatedOn": "desc"
                     },
                     "facets": [
-                        "competencies_v5.competencyTheme"
+                        `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyTheme}`
                     ],
                     "limit": 0,
                     "offset": 0,
@@ -14193,14 +14276,14 @@ class CompetencyPassbookComponent {
             let request = {
                 "request": {
                     "query": "",
-                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": compArea.name, "status": [
+                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { [`${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyArea}`]: compArea.name, "status": [
                             "Live"
                         ] }),
                     "sort_by": {
                         "lastUpdatedOn": "desc"
                     },
                     "facets": [
-                        "competencies_v5.competencySubThemeId"
+                        `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencySubTheme}`
                     ],
                     "limit": 0,
                     "offset": 0,
@@ -14242,7 +14325,7 @@ class CompetencyPassbookComponent {
                                          * @param {?} key
                                          * @return {?}
                                          */
-                                        key => obj1['id'] === Number(obj2['name'])))))));
+                                        key => obj1['name'] === (obj2['name'])))))));
                                         this.allcompetencyTheme[themeEle.name.toLowerCase()]['children'] = data;
                                     }
                                 }));
@@ -14262,7 +14345,7 @@ class CompetencyPassbookComponent {
 CompetencyPassbookComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-competency-passbook',
-                template: " <div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <!-- <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count === 1\">{{obj.count}} Content</div>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count !== 1\">{{obj.count}} Contents</div>\n                    </div> -->\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n                                {{ child.name }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
+                template: " <div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.displayName}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                       {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <!-- <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count === 1\">{{obj.count}} Content</div>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count !== 1\">{{obj.count}} Contents</div>\n                    </div> -->\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.displayName\" >\n                                {{ child?.displayName }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
                 styles: [".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]
             }] }
 ];
@@ -14271,7 +14354,8 @@ CompetencyPassbookComponent.ctorParameters = () => [
     { type: ConfigurationsService$1 },
     { type: WidgetContentService },
     { type: CompetencyPassbookService },
-    { type: Router }
+    { type: Router },
+    { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] }
 ];
 CompetencyPassbookComponent.propDecorators = {
     objectData: [{ type: Input }],
@@ -14323,6 +14407,10 @@ if (false) {
     /** @type {?} */
     CompetencyPassbookComponent.prototype.showAllTheme;
     /** @type {?} */
+    CompetencyPassbookComponent.prototype.environment;
+    /** @type {?} */
+    CompetencyPassbookComponent.prototype.comeptencyKeys;
+    /** @type {?} */
     CompetencyPassbookComponent.prototype.configSvc;
     /** @type {?} */
     CompetencyPassbookComponent.prototype.contentSvc;
@@ -14439,6 +14527,7 @@ CompetencyPassbookModule.decorators = [
 const API_POINTS$1 = {
     COMPETENCY_LIST: `apis/proxies/v8/competency/v4/search`,
     competency_URL: `apis/proxies/v8/v1/search/competenciesByOrg/`,
+    COMPETENCY_LIST_V2: `apis/proxies/v8/searchBy/v2/competency`,
 };
 class CompetencyPassbookMdoService {
     // tslint: disable-next-line: whitespace
@@ -14455,6 +14544,12 @@ class CompetencyPassbookMdoService {
     getCompetencyList(payload) {
         return this.http.post(API_POINTS$1.COMPETENCY_LIST, payload);
     }
+    /**
+     * @return {?}
+     */
+    getCompetencyListv_V2() {
+        return this.http.get(API_POINTS$1.COMPETENCY_LIST_V2);
+    }
     /**
      * @param {?} providerId
      * @return {?}
@@ -14493,8 +14588,9 @@ class CompetencyPassbookMdoComponent {
      * @param {?} contentSvc
      * @param {?} competencySvc
      * @param {?} router
+     * @param {?} environment
      */
-    constructor(configSvc, contentSvc, competencySvc, router) {
+    constructor(configSvc, contentSvc, competencySvc, router, environment) {
         this.configSvc = configSvc;
         this.contentSvc = contentSvc;
         this.competencySvc = competencySvc;
@@ -14505,17 +14601,20 @@ class CompetencyPassbookMdoComponent {
         this.temeletryResponse = new EventEmitter();
         this.loadCometency = false;
         this.loadCompetencyArea = false;
+        this.selectedValue = 'functional';
         this.competencyVersion = '';
         this.competencyTheme = [];
         this.allcompetencyTheme = {};
         this.competencyStrength = 0;
         this.competencyThemeLength = 6;
         this.showAllTheme = [{ name: 'Show all', showAll: false }];
+        this.environment = environment;
     }
     /**
      * @return {?}
      */
     ngOnInit() {
+        this.comeptencyKeys = this.configSvc.compentency[this.environment.compentencyVersionKey];
         this.getAllCompetencies();
     }
     /**
@@ -14525,17 +14624,17 @@ class CompetencyPassbookMdoComponent {
         this.loadCometency = true;
         /** @type {?} */
         let request = { "search": { "type": "Competency Area" }, "filter": { "isDetail": true } };
-        this.competencySvc.getCompetencyList(request).subscribe((/**
+        this.competencySvc.getCompetencyListv_V2().subscribe((/**
          * @param {?} response
          * @return {?}
          */
         (response) => {
             this.allcompetencyTheme = {};
-            if (response && response.result && response.result.competency) {
-                this.originalCompetencyArray = response.result.competency;
+            if (response && response.result && response.result.content) {
+                this.originalCompetencyArray = response.result.content;
                 this.getMdoCompetencies();
                 // this.getCompetencyArea()
-                response.result.competency.forEach((/**
+                response.result.content.forEach((/**
                  * @param {?} element
                  * @return {?}
                  */
@@ -14573,11 +14672,11 @@ class CompetencyPassbookMdoComponent {
                          * @return {?}
                          */
                         (facet) => {
-                            if (facet.name === 'competencies_v5.competencyArea') {
+                            if (facet.name === `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyArea}`) {
                                 this.competencyArea = facet.values;
                                 this.selectedValue = facet.values[0].name;
                             }
-                            else if (facet.name === 'competencies_v5.competencyTheme') {
+                            else if (facet.name === `${this.environment.compentencyVersionKey}.${this.comeptencyKeys.vCompetencyTheme}`) {
                                 this.competencyThemeData = facet.values;
                                 this.getCompetencyTheme();
                             }
@@ -14733,7 +14832,7 @@ class CompetencyPassbookMdoComponent {
 CompetencyPassbookMdoComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-competency-passbook-mdo',
-                template: "<div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n                                {{ child.name }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
+                template: "<div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.displayName}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.displayName\" >\n                                {{ child?.displayName }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
                 styles: [".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]
             }] }
 ];
@@ -14742,7 +14841,8 @@ CompetencyPassbookMdoComponent.ctorParameters = () => [
     { type: ConfigurationsService$1 },
     { type: WidgetContentService },
     { type: CompetencyPassbookMdoService },
-    { type: Router }
+    { type: Router },
+    { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] }
 ];
 CompetencyPassbookMdoComponent.propDecorators = {
     objectData: [{ type: Input }],
@@ -14796,6 +14896,10 @@ if (false) {
     /** @type {?} */
     CompetencyPassbookMdoComponent.prototype.showAllTheme;
     /** @type {?} */
+    CompetencyPassbookMdoComponent.prototype.environment;
+    /** @type {?} */
+    CompetencyPassbookMdoComponent.prototype.comeptencyKeys;
+    /** @type {?} */
     CompetencyPassbookMdoComponent.prototype.configSvc;
     /** @type {?} */
     CompetencyPassbookMdoComponent.prototype.contentSvc;
@@ -15826,6 +15930,1128 @@ ProvidersModule.decorators = [
             },] }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class NationalLearningComponent {
+    /**
+     * @param {?} router
+     * @param {?} events
+     */
+    constructor(router, events) {
+        this.router = router;
+        this.events = events;
+        this.sectionList = [];
+        this.providerId = '123456789';
+        this.descriptionMaxLength = 500;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+    /**
+     * @param {?} event
+     * @param {?} learnerReview
+     * @return {?}
+     */
+    hideKeyHightlight(event, learnerReview) {
+        if (event) {
+            learnerReview['hideSection'] = true;
+        }
+    }
+    /**
+     * @param {?} _stripData
+     * @param {?} columnData
+     * @return {?}
+     */
+    showAllContent(_stripData, columnData) {
+        if (columnData && columnData.contentStrip && columnData.contentStrip.strips && columnData.contentStrip.strips.length) {
+            /** @type {?} */
+            const stripData = _stripData;
+            /** @type {?} */
+            let tabSelected = stripData.viewMoreUrl && stripData.viewMoreUrl.queryParams && stripData.viewMoreUrl.queryParams.tabSelected && stripData.viewMoreUrl.queryParams.tabSelected || '';
+            this.router.navigate([`app/learn/national-learning-week/see-all`], { queryParams: { pageDetails: true, tabSelected, key: columnData.sectionKey } });
+        }
+        else {
+            this.router.navigate([`/app/learn/browse-by/provider/${this.providerName}/${this.providerId}/all-CBP`], { queryParams: { pageDetails: true } });
+        }
+    }
+    /**
+     * @param {?} event
+     * @param {?} contentStripData
+     * @return {?}
+     */
+    hideContentStrip(event, contentStripData) {
+        if (event) {
+            contentStripData.contentStrip['hideSection'] = true;
+        }
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    raiseTabClick(event) {
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'mdo-leaderboard',
+            id: `${event}-tab`,
+        }, {}, {
+            module: 'National Learning Week',
+        });
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    raiseTelemetryInteratEvent(event) {
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'mandatory-courses',
+            id: `mandatory-courses-card`,
+        }, {
+            id: event.identifier,
+            type: event.primaryCategory,
+        }, {
+            pageIdExt: `mandatory-courses-card`,
+            module: 'National Learning Week',
+        });
+    }
+}
+NationalLearningComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-national-learning',
+                template: "<div class=\"container-fluid white-background nlm-micro-sites micro-white\" id=\"nlm-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=\"'contentSection'\" [ngTemplateOutlet]=\"contentSection\"\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<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"w-full topSection\">\n        <div *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 *ngIf=\"data && data.metrics\">\n            <div class=\"block md:hidden\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwCol'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n            <div class=\"hidden md:block\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwRow'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"block md:hidden\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"hidden md:block\">\n                        <div class=\"flex flex items-center justify-center gap-10\">\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?.imageUrl\">\n                                </div>\n                            </div>\n                            <div class=\"w-full md:w-9/12 flex-1 flex flex-col pr-3\">\n                                <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                                <div class=\"description\">{{data?.description | slice:0:descriptionMaxLength}}\n                                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden\">\n                        <div class=\"flex flex-col items-center justify-center margin-bottom-xl px-5\">\n                            <div class=\"mlogo-box-rounded\">\n                                <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.imageUrl\">\n                            </div>\n                        </div>\n                        <div class=\"flex flex-col px-5\">\n                            <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                            <div class=\"mdescription\">{{data?.description | slice:0:descriptionMaxLength}}\n                                <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container margin-top-xl\">\n                    <div class=\"hidden md:block\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #contentSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.leftContent.colspan}}\">\n                    <div *ngIf=\"data.leftContent.data.weekHighlights.data\">\n                        <sb-uic-highlights-of-week\n                            [objectData]=\"data.leftContent.data.weekHighlights.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-{{data.rightContent.colspan}}\">\n                    <div *ngIf=\"data.rightContent.data.myprogress\">\n                        <sb-uic-user-progress\n                            [objectData]=\"data.rightContent.data.myprogress.data\" [rootOrgId]=\"configDetails?.unMappedUser?.rootOrgId\">\n                        </sb-uic-user-progress>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.speakerOftheDay\">\n                        <sb-uic-speakers\n                            [objectData]=\"data.rightContent.data.speakerOftheDay.data\">\n                        </sb-uic-speakers>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.mdoLeaderboard\">\n                        <sb-uic-mdo-leaderboard\n                            [object]=\"data.rightContent.data.mdoLeaderboard.data\"\n                            (tabClicked)=\"raiseTabClick($event)\"></sb-uic-mdo-leaderboard>\n                    </div>\n\n                    <div class=\"block md:hidden\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"block md:hidden px-4 md-px-0\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n",
+                styles: ["::ng-deep.mat-app-background{background-color:#fff!important}.nlw-mandatoryCourse ::ng-deep.capitalize{font-size:20px;line-height:24.38px}.nlm-micro-sites ::ng-deep.container{max-width:1200px!important}.nlm-micro-sites ::ng-deep.banner-container{padding-bottom:0!important}.topSection ::ng-deep.prev{margin-left:15px!important}.topSection ::ng-deep.next{margin-right:15px!important}.topSection .stats-header{display:flex;align-items:center;justify-content:center;position:absolute;left:43.5%;top:-20px;text-transform:capitalize}.topSection .stats-title{display:flex;align-items:center;justify-content:center;background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px}.topSection .my-arrow{font-size:12px}.topSection .less-opacity1{opacity:.75}.topSection .less-opacity2{opacity:.5}.topSection .details-wrapper{padding:16px;display:flex;gap:50px}.topSection .logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.topSection .logo-box-container{width:112px;height:72px}}.topSection .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)}.topSection .logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .logo-box-rounded{width:112px;height:112px}.topSection .logo-box-rounded .logo-img{max-width:84px}}.topSection .mlogo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 8px 3px rgba(0,0,0,.06)}.topSection .mlogo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .mlogo-box-rounded{width:112px;height:112px}.topSection .mlogo-box-rounded .logo-img{max-width:84px}}.topSection .txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.topSection .description-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;padding-bottom:16px}.topSection .description{font-family:Lato;font-size:16px;font-weight:400;line-height:24px;text-align:left}.topSection .mdescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}@media screen and (min-width:320px) and (max-width:769px){.topSection ::ng-deep.prev{margin-left:15px!important}.topSection ::ng-deep.next{margin-right:15px!important}.topSection ::ng-deep.banner-container{min-height:212px!important}}"]
+            }] }
+];
+/** @nocollapse */
+NationalLearningComponent.ctorParameters = () => [
+    { type: Router },
+    { type: EventService }
+];
+NationalLearningComponent.propDecorators = {
+    sectionList: [{ type: Input }],
+    configDetails: [{ type: Input }],
+    nwlConfiguration: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    NationalLearningComponent.prototype.sectionList;
+    /** @type {?} */
+    NationalLearningComponent.prototype.configDetails;
+    /** @type {?} */
+    NationalLearningComponent.prototype.nwlConfiguration;
+    /** @type {?} */
+    NationalLearningComponent.prototype.providerId;
+    /** @type {?} */
+    NationalLearningComponent.prototype.providerName;
+    /** @type {?} */
+    NationalLearningComponent.prototype.descriptionMaxLength;
+    /** @type {?} */
+    NationalLearningComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    NationalLearningComponent.prototype.events;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class KeyHighlightsComponent {
+    constructor() {
+        this.currentIndex = 0;
+        this.providerId = '';
+        this.formData = '';
+        this.emptyResponse = new EventEmitter();
+        this.styleData = {};
+        this.contentdata = [];
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
+        this.contentdata = this.formData && this.formData.content ? this.formData.content : [];
+    }
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    getCurrentIndex(indexValue) {
+        this.currentIndex = indexValue;
+    }
+}
+KeyHighlightsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-key-highlights',
+                template: "<ng-container *ngIf=\"contentdata?.length && mode === 'desktop'\">\n    <div class=\"key-highlighs-container\">\n        <sb-uic-sliders-ng-content\n            [title]=\"'providerName'\"\n            [autoScroll]=\"true\"\n            [currentIndex]=\"currentIndex\" \n            (currentIndexValue)=\"getCurrentIndex($event)\"\n            [loadNgContentData]=\"true\"\n            [customBanner]=\"true\"\n            [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n            <div sliderbody>\n                <div *ngFor=\"let content of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                    <div class=\"flex flex-row key-wrapper items-center justify-center\">\n                        <div class=\"kh-description\"> {{content?.title}}</div>\n                    </div>\n                </div>\n            </div>                    \n        </sb-uic-sliders-ng-content>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"contentdata?.length && mode === 'mobile'\">\n    <div class=\"p-5\">\n        <div class=\"mob-key-highlighs-container\">\n            <sb-uic-sliders-ng-content\n                [title]=\"'providerName'\"\n                [autoScroll]=\"true\"\n                [currentIndex]=\"currentIndex\" \n                (currentIndexValue)=\"getCurrentIndex($event)\"\n                [loadNgContentData]=\"true\"\n                [customBanner]=\"true\"\n                [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n                <div sliderbody>\n                    <div *ngFor=\"let content of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                        <div class=\"flex flex-row mkey-wrapper items-center justify-center\">\n                            <div class=\"mkh-description\"> {{content?.title}}</div>\n                        </div>\n                    </div>\n                </div>\n            </sb-uic-sliders-ng-content>\n        </div>\n    </div>\n</ng-container>",
+                styles: [".kh-description{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:0 10px}.key-wrapper{background-color:#eaf1f8;padding:25px 16px;border-radius:50px}.mkey-wrapper{background-color:#eaf1f8;padding:16px;border-radius:50px}.mkh-description{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;padding:0 30px}"]
+            }] }
+];
+/** @nocollapse */
+KeyHighlightsComponent.ctorParameters = () => [];
+KeyHighlightsComponent.propDecorators = {
+    providerId: [{ type: Input }],
+    formData: [{ type: Input }],
+    mode: [{ type: Input }],
+    emptyResponse: [{ type: Output }],
+    scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+};
+if (false) {
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.currentIndex;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.providerId;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.formData;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.mode;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.emptyResponse;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.styleData;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.contentdata;
+    /** @type {?} */
+    KeyHighlightsComponent.prototype.scrollableItems;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class KeyHighlightsModule {
+}
+KeyHighlightsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [KeyHighlightsComponent],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    SlidersNgContentLibModule,
+                    ScrollableItemModule
+                ],
+                exports: [
+                    KeyHighlightsComponent
+                ],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const moment$2 = moment$4;
+class EventsComponent {
+    /**
+     * @param {?} insightSvc
+     */
+    constructor(insightSvc) {
+        this.insightSvc = insightSvc;
+        this.daysBetween = [];
+        this.events = [];
+        this.loader = false;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.requestBody = {
+            locale: [
+                'en',
+            ],
+            query: '',
+            request: {
+                query: '',
+                filters: {
+                    status: ['Live'],
+                    contentType: 'Event',
+                    category: 'Event',
+                    startDate: {
+                        ">=": '',
+                        "<": ''
+                    }
+                },
+                sort_by: {
+                    startDate: 'desc',
+                },
+            },
+        };
+        this.getEventsList();
+    }
+    /**
+     * @return {?}
+     */
+    getDaysBetweenDates() {
+        /** @type {?} */
+        let currentDate = moment$2(this.nwlEventsConfig.startDate, 'DD-MM-YYYY');
+        /** @type {?} */
+        const endDate = moment$2(this.nwlEventsConfig.endDate, 'DD-MM-YYYY');
+        while (currentDate.isSameOrBefore(endDate)) {
+            /** @type {?} */
+            let localObj = {};
+            localObj['startDate'] = currentDate.format('YYYY-MM-DD');
+            localObj['diplayFormat'] = currentDate.format('MMM DD, YYYY');
+            if (currentDate.isSame(moment$2(), 'day')) {
+                this.currentDay = currentDate.format('YYYY-MM-DD');
+            }
+            currentDate.add(1, 'days').format('YYYY-MM-DD');
+            this.daysBetween.push(localObj);
+        }
+        console.log("currentDay ", this.currentDay);
+    }
+    /**
+     * @param {?} slectedDate
+     * @return {?}
+     */
+    getEvents(slectedDate) {
+        this.currentDay = slectedDate.target.value;
+        /** @type {?} */
+        let nextDay = moment$2(slectedDate.target.value, 'YYYY-MM-DD');
+        nextDay.add(1, 'days');
+        this.requestBody.request.filters.startDate[">="] = this.currentDay;
+        this.requestBody.request.filters.startDate["<"] = nextDay.format('YYYY-MM-DD');
+        this.loader = true;
+        this.insightSvc.fetchTrainingDetails(this.requestBody).subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            this.events = [];
+            if (res && res.result && res.result.count > 0) {
+                this.events = res.result.Event;
+                this.loader = false;
+            }
+            else {
+                this.loader = false;
+            }
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        error => {
+            this.loader = false;
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    getEventsList() {
+        this.getDaysBetweenDates();
+        /** @type {?} */
+        let nextDay = moment$2(this.currentDay, 'YYYY-MM-DD');
+        nextDay.add(1, 'days');
+        this.requestBody.request.filters.startDate[">="] = this.currentDay;
+        this.requestBody.request.filters.startDate["<"] = nextDay.format('YYYY-MM-DD');
+        this.loader = true;
+        this.insightSvc.fetchTrainingDetails(this.requestBody).subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            this.events = [];
+            if (res && res.result && res.result.count > 0) {
+                this.events = res.result.Event;
+                this.loader = false;
+            }
+            else {
+                this.loader = false;
+            }
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        error => {
+            this.loader = false;
+        }));
+    }
+}
+EventsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-events',
+                template: "<div class=\"flex items-center mb-4 mt-2 e-header\">\n    <div class=\"event-title\">\n        {{object?.title}}\n    </div>\n    <div class=\"events-select\">\n        <select (change)=\"getEvents($event)\">\n            <option value=\"{{d?.startDate}}\" *ngFor=\"let d of daysBetween\" [selected]=\"currentDay === d.startDate\">{{d?.diplayFormat}}</option>\n        </select>\n    </div>\n</div>\n<div class=\"grid grid-cols-1 gap-4\">\n    <div class=\"events-card-wrapper\">\n        <div *ngIf=\"!loader\">\n            <div *ngIf=\"events?.length > 0\">\n                <div *ngFor=\"let event of events\">\n                    <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n                </div>\n            </div>\n            <div *ngIf=\"events?.length === 0\">\n                <div class=\"flex item-center justify-center p-5 no-events\">\n                    No events exist.\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"loader && events?.length === 0\">\n            <div *ngFor=\"let event of [1,2,3]\">\n                <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n            </div>\n        </div>\n    </div>\n</div>",
+                styles: ["@charset \"UTF-8\";.e-header{justify-content:space-between}.event-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.events-select{position:relative;display:inline-block;width:150px}.events-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.events-select:after{content:\"\u25BC\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.no-events{border:1px solid #c3c3c3;border-radius:12px}"]
+            }] }
+];
+/** @nocollapse */
+EventsComponent.ctorParameters = () => [
+    { type: InsiteDataService }
+];
+EventsComponent.propDecorators = {
+    object: [{ type: Input }],
+    nwlEventsConfig: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    EventsComponent.prototype.object;
+    /** @type {?} */
+    EventsComponent.prototype.nwlEventsConfig;
+    /** @type {?} */
+    EventsComponent.prototype.daysBetween;
+    /** @type {?} */
+    EventsComponent.prototype.events;
+    /** @type {?} */
+    EventsComponent.prototype.requestBody;
+    /** @type {?} */
+    EventsComponent.prototype.currentDay;
+    /** @type {?} */
+    EventsComponent.prototype.loader;
+    /** @type {?} */
+    EventsComponent.prototype.insightSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const moment$3 = moment$4;
+class EventCardComponent {
+    /**
+     * @param {?} environment
+     * @param {?} router
+     */
+    constructor(environment, router) {
+        this.router = router;
+        this.descriptionMaxLength = 50;
+        this.environment = environment;
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    getEventDate(event) {
+        /** @type {?} */
+        let timeString = event.startTime.split(":");
+        /** @type {?} */
+        let dataString = `${moment$3(event.startDate).format('MMM DD, YYYY')} ${timeString[0]}:${timeString[1]}`;
+        return dataString;
+    }
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    getPublicUrl(url) {
+        /** @type {?} */
+        const mainUrl = url.split('/content').pop() || '';
+        return `${this.environment.contentHost}/${this.environment.contentBucket}/content${mainUrl}`;
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    redirectTo(event) {
+        this.router.navigate(["/app/event-hub/home/", event.identifier]);
+    }
+}
+EventCardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-event-card',
+                template: "<div class=\"events-card margin-bottom-m cursor-pointer\" *ngIf=\"!loader\" (click)=\"redirectTo(eventDetails)\">\n    <div class=\"flex gap-4\">\n        <div class=\"event-poster\">\n            <img class='poster' [src]=\"eventDetails.appIcon ? getPublicUrl(eventDetails.appIcon) : objectData?.defaultImage\" alt=\"\" />\n        </div>\n        <div class=\"flex flex-col\">\n            <div class=\"flex\">\n                <div class=\"flex event-label\">{{eventDetails?.resourceType}}</div>\n            </div>\n            <div class=\"orgName pt-2 pb-1\">\n                {{eventDetails?.owner}}\n            </div>\n            <div class=\"event-title pt-1\">\n                {{eventDetails?.name | slice:0:descriptionMaxLength}}\n                <span *ngIf=\"eventDetails?.name?.length > descriptionMaxLength\">...</span>\n            </div>\n            <div class=\"event-date pt-2\">{{getEventDate(eventDetails)}}</div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"loader\">\n    <div class=\"events-card margin-bottom-m\">\n        <div class=\"flex gap-4\">\n            <div class=\"event-poster\">\n                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'180px'\" [height]=\"'107px'\">\n                </sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex flex-col\">\n                <div class=\"flex\">\n                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'60px'\" [height]=\"'21px'\">\n                    </sb-uic-skeleton-loader>\n                </div>\n                <div class=\"flex orgName pt-2 pb-1\">\n                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n                    </sb-uic-skeleton-loader>\n                </div>\n                <div class=\"flex event-title pt-1\">\n                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n                    </sb-uic-skeleton-loader>\n                </div>\n                <div class=\"event-date pt-2\">\n                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n                    </sb-uic-skeleton-loader>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>",
+                styles: [".events-card{padding:16px;border-radius:12px;border:1px solid #c3c3c3}.events-card .poster{width:180px;height:107px;border-radius:12px}.events-card .event-label{border:1px solid #ef951e;background:rgba(239,149,30,.05);border-radius:45px;font:400 14px/16.8px Lato;padding:8px 12px}.events-card .orgName{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6}.events-card .event-title{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:left}.events-card .event-date{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;color:#1b4ca1}@media screen and (min-width:320px) and (max-width:769px){.events-card .poster{width:80px;height:69px}}"]
+            }] }
+];
+/** @nocollapse */
+EventCardComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] },
+    { type: Router }
+];
+EventCardComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    eventDetails: [{ type: Input }],
+    loader: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    EventCardComponent.prototype.objectData;
+    /** @type {?} */
+    EventCardComponent.prototype.eventDetails;
+    /** @type {?} */
+    EventCardComponent.prototype.environment;
+    /** @type {?} */
+    EventCardComponent.prototype.loader;
+    /** @type {?} */
+    EventCardComponent.prototype.descriptionMaxLength;
+    /**
+     * @type {?}
+     * @private
+     */
+    EventCardComponent.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class EventsModule {
+}
+EventsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [EventsComponent, EventCardComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    SkeletonLoaderLibModule,
+                ],
+                exports: [EventsComponent, EventCardComponent]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class MdoLeaderboardComponent {
+    /**
+     * @param {?} insiteDataService
+     */
+    constructor(insiteDataService) {
+        this.insiteDataService = insiteDataService;
+        this.currentTab = 'XL';
+        this.result = [];
+        this.searchTerm = '';
+        this.expand = true;
+        this.tabClicked = new EventEmitter();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.getData();
+    }
+    /**
+     * @return {?}
+     */
+    getData() {
+        this.insiteDataService.fetchLeaderboard().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            if (res && res.result) {
+                this.result = res.result;
+                this.filteredData = this.result.mdoLeaderBoard
+                    .filter((/**
+                 * @param {?} user
+                 * @return {?}
+                 */
+                user => user.size === this.currentTab))
+                    .map((/**
+                 * @param {?} user
+                 * @return {?}
+                 */
+                user => (Object.assign({}, user, { children: [], selected: false }))));
+            }
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        error => {
+            console.log(error);
+        }));
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    getTabData(name) {
+        this.currentTab = name;
+        this.searchTerm = '';
+        this.filteredData = this.result.mdoLeaderBoard
+            .filter((/**
+         * @param {?} user
+         * @return {?}
+         */
+        user => user.size === this.currentTab))
+            .map((/**
+         * @param {?} user
+         * @return {?}
+         */
+        user => (Object.assign({}, user, { children: [], selected: false }))));
+        /** @type {?} */
+        let nameStr = '';
+        switch (name) {
+            case 'XL':
+                nameStr = 'greater-than-50K';
+                break;
+            case 'L':
+                nameStr = '10K-50K';
+                break;
+            case 'M':
+                nameStr = '1K-10K';
+                break;
+            case 'S':
+                nameStr = '500-1K';
+                break;
+            default:
+                nameStr = 'less-than-500';
+                break;
+        }
+        this.tabClicked.emit(nameStr);
+    }
+    /**
+     * @param {?} rank
+     * @return {?}
+     */
+    getRank(rank) {
+        return [1, 2, 3].includes(rank) ? `rank${rank}` : 'rank0';
+    }
+    /**
+     * @param {?} rank
+     * @return {?}
+     */
+    getMedal(rank) {
+        if (rank === 1) {
+            return 'assets/images/national-learning/Medal1.svg';
+        }
+        else if (rank === 2) {
+            return 'assets/images/national-learning/Medal2.svg';
+        }
+        else {
+            return 'assets/images/national-learning/Medal3.svg';
+        }
+    }
+    /**
+     * @param {?} e
+     * @return {?}
+     */
+    handleSearchQuery(e) {
+        if (e.target.value && e.target.value.length > 0) {
+            this.searchTerm = e.target.value;
+            this.filteredData = this.result.mdoLeaderBoard
+                .filter((/**
+             * @param {?} user
+             * @return {?}
+             */
+            user => user.size === this.currentTab && user.org_name.toLowerCase().includes(e.target.value)))
+                .map((/**
+             * @param {?} user
+             * @return {?}
+             */
+            user => (Object.assign({}, user, { children: [] }))));
+        }
+        else {
+            this.filteredData = this.result.mdoLeaderBoard
+                .filter((/**
+             * @param {?} user
+             * @return {?}
+             */
+            user => user.size === this.currentTab))
+                .map((/**
+             * @param {?} user
+             * @return {?}
+             */
+            user => (Object.assign({}, user, { children: [] }))));
+        }
+    }
+    /**
+     * @return {?}
+     */
+    toggleWeekHightlits() {
+        this.expand = !this.expand;
+    }
+}
+MdoLeaderboardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-mdo-leaderboard',
+                template: "<div class=\"mdo-leaderboard-container\">\n    <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n        <div class=\"flex gap-2\">\n            {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n        </div>\n        <div class=\"block md:hidden\">\n            <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex item-center justify-center\" *ngIf=\"expand\">\n        <div class=\"flex fl-div\">\n            <div class=\"pointer\">\n                <span class=\"dot-dot\"></span>\n            </div>\n        </div>\n    </div>\n    <div class=\"l-content\" *ngIf=\"expand\">\n        <div class=\"horizontal-scroll-container\">\n            <div class=\"scroll-content\">\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">Greater than 50K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">Less than 500</span>\n            </div>\n        </div>\n        <div class=\"relative search-wrapper margin-top-m mb-5\">\n            <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n            </mat-icon>\n            <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n                aria-label=\"Search\" i18n-placeholder=\"search\"  [(ngModel)]=\"searchTerm\"\n                placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n        </div>\n        <div class=\"l-tab-data\">\n            <div *ngFor=\"let user of filteredData\">\n                <div class=\"flex flex-row item mb-5 gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n                    <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" *ngIf=\"user.row_num === 1\"/></div>\n                    <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n                    <div class=\"w-full\">\n                        <div class=\"flex flex-between gap-2\">\n                            <div>\n                                <div class=\"rank-name\">{{user.org_name}}</div>\n                                <div class=\"rank-points flex mt-1 gap-1\">\n                                    <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n                                    <div class=\"points\">{{user.total_points || 0 }} points</div>\n                                </div>\n                            </div>\n                            <div class=\"rank-crown\" *ngIf=\"[1,2,3].includes(user.row_num)\">\n                                <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"no-data px-1\" *ngIf=\"filteredData?.length === 0\">\n                No data found!\n            </div>\n        </div>\n    </div>\n</div>\n",
+                styles: [".l-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.l-content{background-color:#e9eef6;border-radius:16px;padding:16px}.horizontal-scroll-container{overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;height:32px}.horizontal-scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-block}.tab-title{font-family:Lato;font-size:14px;line-height:16.8px;text-align:left;cursor:pointer;padding:0 15px 8px;border-bottom:2px solid #c3c3c3}.active{font-weight:700;border-bottom:2px solid #1b4ca1}.search-field{height:34px;padding:0 16px 0 40px;border-radius:52px;background:#fff;border:2px solid rgba(0,0,0,.0784313725);width:100%}.icon-search{top:10px;left:15px;height:15px;width:17px}.item{border-radius:12px;background-color:#fff;padding:16px;align-items:flex-start}.rank1{background:#ffca28;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank2{background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;color:#fff}.rank3{background:#ff8228;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank0{font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;border:1px solid #c3c3c3}.rank-name{font-family:Montserrat;line-height:1.5em;font-size:16px;font-weight:600;text-align:left;align-items:center;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}.rank-points{align-items:center}.nlw-kb{height:24px;width:24px}.points{font-family:Lato;font-size:14px;font-weight:600;line-height:16.8px;text-align:right}.crown{left:10px;top:0;width:36px;height:36px}.l-tab-data{height:520px;overflow:auto;padding-bottom:16px}.l-tab-data::-webkit-scrollbar{display:none}.pointer{margin-bottom:-59px;border-radius:41px;background:#c3c3c3;border:35px solid #e9eef6}.dot-dot{width:7px;display:flex;height:7px;background:#c3c3c3;margin-top:-25px;border-radius:10px}@media screen and (min-width:320px) and (max-width:769px){.mdo-leaderboard-container{background-color:#d1dbec}}"]
+            }] }
+];
+/** @nocollapse */
+MdoLeaderboardComponent.ctorParameters = () => [
+    { type: InsiteDataService }
+];
+MdoLeaderboardComponent.propDecorators = {
+    object: [{ type: Input }],
+    tabClicked: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.currentTab;
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.result;
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.filteredData;
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.searchTerm;
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.expand;
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.object;
+    /** @type {?} */
+    MdoLeaderboardComponent.prototype.tabClicked;
+    /**
+     * @type {?}
+     * @private
+     */
+    MdoLeaderboardComponent.prototype.insiteDataService;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class MdoLeaderboardModule {
+}
+MdoLeaderboardModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MdoLeaderboardComponent],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    SkeletonLoaderLibModule,
+                    FormsModule,
+                    MatTooltipModule
+                ],
+                exports: [
+                    MdoLeaderboardComponent
+                ],
+                providers: [InsiteDataService]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class HighlightsOfWeekComponent {
+    constructor() {
+        this.currentIndex = 0;
+        this.contentdata = [];
+        this.styleData = {};
+        this.expand = true;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+        if (this.objectData && this.objectData.list) {
+            this.objectData.list.forEach((/**
+             * @param {?} contentEle
+             * @return {?}
+             */
+            (contentEle) => {
+                /** @type {?} */
+                let localData = {};
+                localData['title'] = contentEle.title;
+                localData['videoUrl'] = contentEle.videoUrl;
+                localData['cardSubType'] = "card-wide-lib";
+                localData['description'] = contentEle.description;
+                this.contentdata.push(localData);
+            }));
+        }
+    }
+    /**
+     * @return {?}
+     */
+    toggleWeekHightlits() {
+        this.expand = !this.expand;
+    }
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    getCurrentIndex(indexValue) {
+        this.currentIndex = indexValue;
+    }
+}
+HighlightsOfWeekComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-highlights-of-week',
+                template: "<div *ngIf=\"contentdata.length\" class=\"highlights-of-the-week-container {{expand ? 'mb-4' : ''}}\">\n    <ng-container *ngIf=\"contentdata.length\">\n        <div class=\"flex title pb-3 no-radius items-center justify-between\">\n            <div class=\"flex gap-2\">\n                {{objectData?.title}}\n                <div class=\"block md:hidden\">\n                    <img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\">\n                </div>                \n            </div>\n            <div class=\"block md:hidden\">\n                <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n            </div>\n        </div>\n        <div *ngIf=\"expand\">\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=\"wh-wrapper no-radius\">\n                            <div class=\"player\">\n                                <video width=\"100%\" height=\"100%\" controls *ngIf=\"i === currentIndex\">\n                                    <source [src]=\"item.videoUrl\" type=\"video/mp4\">\n                                    <source [src]=\"item.videoUrl\" type=\"application/x-mpegURL\" />\n                                </video>\n                            </div>\n                            <div class=\"player-title py-3\">\n                                {{item?.title}}\n                            </div>\n                            <div class=\"player-body\">\n                                {{item?.description}}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </sb-uic-sliders-ng-content>\n        </div>\n    </ng-container>\n</div>\n\n",
+                styles: [".highlights-of-the-week-container ::ng-deep.banner-title{display:none}.highlights-of-the-week-container ::ng-deep.banner-meta{bottom:-37px}.highlights-of-the-week-container ::ng-deep.prev{margin-left:11px}.highlights-of-the-week-container ::ng-deep.next{margin-right:16px}.title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left;background-color:#d1dbec;padding:16px;border-top-left-radius:12px;border-top-right-radius:12px}.wh-wrapper{background-color:#d1dbec;padding:0 16px 16px;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.wh-wrapper .player{height:420px}.wh-wrapper .player-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.wh-wrapper .player-body{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}@media screen and (min-width:320px) and (max-width:769px){.highlights-of-the-week-container ::ng-deep.prev{display:none!important}.highlights-of-the-week-container ::ng-deep.next{display:none!important}.wh-wrapper .player{height:215px}.no-radius{border-radius:0}}"]
+            }] }
+];
+/** @nocollapse */
+HighlightsOfWeekComponent.ctorParameters = () => [];
+HighlightsOfWeekComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+};
+if (false) {
+    /** @type {?} */
+    HighlightsOfWeekComponent.prototype.objectData;
+    /** @type {?} */
+    HighlightsOfWeekComponent.prototype.currentIndex;
+    /** @type {?} */
+    HighlightsOfWeekComponent.prototype.contentdata;
+    /** @type {?} */
+    HighlightsOfWeekComponent.prototype.styleData;
+    /** @type {?} */
+    HighlightsOfWeekComponent.prototype.expand;
+    /** @type {?} */
+    HighlightsOfWeekComponent.prototype.scrollableItems;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class HighlightsOfWeekModule {
+}
+HighlightsOfWeekModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [HighlightsOfWeekComponent],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatTooltipModule,
+                    ScrollableItemModule,
+                    SlidersNgContentLibModule
+                ],
+                exports: [
+                    HighlightsOfWeekComponent
+                ]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class SpeakersComponent {
+    constructor() {
+        this.currentIndex = 0;
+        this.contentdata = [];
+        this.styleData = {};
+        this.expand = true;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+        if (this.objectData && this.objectData.list) {
+            this.objectData.list.forEach((/**
+             * @param {?} contentEle
+             * @return {?}
+             */
+            (contentEle) => {
+                /** @type {?} */
+                let localData = {};
+                localData['name'] = contentEle.title;
+                localData['cardSubType'] = "card-wide-lib";
+                localData['description'] = contentEle.description;
+                localData['initial'] = this.createInititals(contentEle.title);
+                localData['profileImage'] = contentEle.profileImage ? contentEle.profileImage : '';
+                this.contentdata.push(localData);
+            }));
+        }
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    createInititals(name) {
+        /** @type {?} */
+        let initials = '';
+        /** @type {?} */
+        const array = name.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (let i = 0; i < name.length; i += 1) {
+                if (name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (name.charAt(i) === name.charAt(i)) {
+                    initials += name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        return initials.toUpperCase();
+    }
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    getCurrentIndex(indexValue) {
+        this.currentIndex = indexValue;
+    }
+    /**
+     * @return {?}
+     */
+    toggleWeekHightlits() {
+        this.expand = !this.expand;
+    }
+}
+SpeakersComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-speakers',
+                template: "<div class=\"nlw-speakers-wrapper px-4 md:px-0 my-4 md:my-0\">\n    <div class=\"flex speakers-title gap-2 justify-between pb-1\" *ngIf=\"contentdata.length\">\n        <div class=\"flex gap-2\">\n            {{objectData?.title}}\n            <div><img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\"></div>\n        </div>\n        <div class=\"block md:hidden\">\n            <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n        </div>\n    </div>\n    <div *ngIf=\"expand\" class=\"speakers-container margin-bottom-xs\" >\n        <ng-container *ngIf=\"contentdata.length\">\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=\"speakers-wrapper\">\n                            <div class=\"flex items-center justify-center pb-2\">\n                                <div class=\"speaker-initial\" *ngIf=\"!item.profileImage\">{{item?.initial}}</div>\n                                <img class='speaker-icon' [src]=\"item?.profileImage\" alt=\"\" *ngIf=\"item.profileImage\"/>\n                            </div>\n                            <div class=\"flex items-center justify-center pb-2\">\n                                <div class=\"speaker-title\">{{item.name}}</div>\n                            </div>\n                            <div class=\"flex items-center justify-center\">\n                                <div class=\"speaker-description\">{{item.description}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </sb-uic-sliders-ng-content>\n        </ng-container>\n    </div>\n</div>",
+                styles: [".speakers-container ::ng-deep.banner-title{display:none}.speakers-container ::ng-deep.prev{margin-left:0;background-color:#fff4ec!important;color:#b6b4b4}.speakers-container ::ng-deep.next{margin-right:0;background-color:#fff4ec!important;color:#b6b4b4}.speakers-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.speakers-wrapper{background-color:#fff4ec;border-radius:12px;padding:24px}.speaker-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.speaker-description{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:center}.speaker-initial{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:center;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;border-radius:50px}.speaker-icon{width:80px;height:80px;border-radius:50px}@media screen and (min-width:320px) and (max-width:769px){.nlw-speakers-wrapper{background-color:#d1dbec}.speakers-title{padding:16px 0}}"]
+            }] }
+];
+/** @nocollapse */
+SpeakersComponent.ctorParameters = () => [];
+SpeakersComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+};
+if (false) {
+    /** @type {?} */
+    SpeakersComponent.prototype.objectData;
+    /** @type {?} */
+    SpeakersComponent.prototype.currentIndex;
+    /** @type {?} */
+    SpeakersComponent.prototype.contentdata;
+    /** @type {?} */
+    SpeakersComponent.prototype.styleData;
+    /** @type {?} */
+    SpeakersComponent.prototype.expand;
+    /** @type {?} */
+    SpeakersComponent.prototype.scrollableItems;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class SpeakersModule {
+}
+SpeakersModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SpeakersComponent],
+                imports: [
+                    CommonModule,
+                    ScrollableItemModule,
+                    SlidersNgContentLibModule,
+                    MatTooltipModule,
+                    MatIconModule,
+                ],
+                exports: [
+                    SpeakersComponent
+                ]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class UserProgressComponent {
+    /**
+     * @param {?} insightSvc
+     */
+    constructor(insightSvc) {
+        this.insightSvc = insightSvc;
+        this.insitesData = [];
+        this.currentIndex = 0;
+        this.styleData = {};
+        this.expand = true;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.styleData = this.objectData.insights.data.sliderData.styleData;
+        this.getUserProgress();
+        this.getInsightsData();
+    }
+    /**
+     * @return {?}
+     */
+    getUserProgress() {
+        this.insightSvc.fetchUserProgress().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            if (res && res.result && res.result.userLeaderBoard) {
+                this.userProgress = res.result.userLeaderBoard[0];
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    getInsightsData() {
+        /** @type {?} */
+        const request = {
+            request: {
+                filters: {
+                    primaryCategory: 'programs',
+                    organisations: [
+                        'across',
+                        this.rootOrgId,
+                    ],
+                },
+            },
+        };
+        this.insightSvc.fetchInsightsData(request).subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            if (res && res.result && res.result.response && res.result.response.nudges) {
+                this.insitesData = res.result.response.nudges;
+                this.insitesData = this.insitesData.map((/**
+                 * @param {?} obj
+                 * @return {?}
+                 */
+                (obj) => {
+                    return Object.assign({}, obj, { cardSubType: 'card-wide-lib' });
+                }));
+            }
+        }));
+    }
+    /**
+     * @param {?} number
+     * @return {?}
+     */
+    roundTo(number) {
+        return Math.round(number * 100 / 100);
+    }
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    getCurrentIndex(indexValue) {
+        this.currentIndex = indexValue;
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    createInititals(name) {
+        /** @type {?} */
+        let initials = '';
+        /** @type {?} */
+        const array = name.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (let i = 0; i < name.length; i += 1) {
+                if (name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (name.charAt(i) === name.charAt(i)) {
+                    initials += name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        return initials.toUpperCase();
+    }
+    /**
+     * @return {?}
+     */
+    toggleWeekHightlits() {
+        this.expand = !this.expand;
+    }
+}
+UserProgressComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-user-progress',
+                template: "<div class=\"px-4 md:px-0 pt-4 md:pt-0 week-progress {{expand ? 'pb-4' : 'pb-1'}}\">\n    <div class=\"flex user-progress-title gap-2 margin-bottom-xs items-center justify-between\">\n        <div class=\"flex gap-2\">\n            {{objectData?.title}}\n            <div><img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\"></div>\n        </div>\n        <div class=\"block md:hidden\">\n            <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n        </div>\n    </div>\n    <div class=\"user-progress-wrapper\" *ngIf=\"expand\">\n        <div class=\"user-rank flex items-center\">\n            <div class=\"flex item-center\">\n                <div class=\"current-rank\" *ngIf=\"userProgress?.rank > 0\">#{{userProgress?.rank}} Rank</div>\n            </div>\n        </div>\n        <div class=\"user-details-wrapper\">\n            <div class=\"user-details flex gap-2\">\n                <div class=\"user-initial\" *ngIf=\"userProgress?.profile_image\">\n                    <img class=\"user-profile\" [src]=\"userProgress?.profile_image\" alt=\"\"/>\n                </div>\n                <div class=\"user-initial\" *ngIf=\"!userProgress?.profile_image && userProgress?.fullname\">{{createInititals(userProgress?.fullname)}}</div>\n                <div class=\"user-name pt-3\">{{userProgress?.fullname}}</div>\n            </div>\n            <div class=\"user-stats my-3\">\n                <div class=\"flex gap-2 items-center justify-center\">\n                    <div class=\"my-hours\">\n                        <div class=\"flex items-center gap-3\">\n                            <img class=\"hours-icon\"\n                                src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808794219_InProgress_Icon.svg\" alt=\"\">\n                            <div>\n                                <div class=\"counter\">{{userProgress?.total_learning_hours || 0}}</div>\n                                <div class=\"counter-title pt-1\">Learning Hours</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"my-certificates\">\n                        <div class=\"flex items-center gap-3\">\n                            <img class=\"cert-icon\"\n                                src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808775795_Certificate_icon.svg\" alt=\"\">\n                            <div>\n                                <div class=\"counter\">{{userProgress?.count || 0}}</div>\n                                <div class=\"counter-title pt-1\">Certificates</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex gap-2 items-center justify-center pt-3\">\n                    <div class=\"k-points\">\n                        <div class=\"flex items-center gap-3\">\n                            <img class=\"kp-point-icon\"\n                                src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808815206_karma-badge.svg\" alt=\"\">\n                            <div>\n                                <div class=\"counter\">{{userProgress?.total_points || 0}}</div>\n                                <div class=\"counter-title pt-1\">Karma Points</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"insights-wrapper\">\n                <div class=\"insights-container\">\n                    <sb-uic-sliders-ng-content\n                        [title]=\"'p1'\"\n                        [currentIndex]=\"currentIndex\"\n                        (currentIndexValue)=\"getCurrentIndex($event)\"\n                        [loadNgContentData]=\"true\" [widgetData]=\"insitesData\"\n                        [customBanner]=\"true\" [autoScroll]=\"true\"\n                        [styleData]=\"styleData\">\n                        <div sliderbody>\n                            <div class=\"insights-item\" *ngFor=\"let item of insitesData; let i = index\" [hidden]=\"i !== currentIndex\">\n                                <div class=\"flex gap-4\">\n                                    <div class=\"insights-lable\">{{item?.label}}</div>\n                                    <div class=\"flex items-center growth-positive\" *ngIf=\"item?.growth === 'positive'\">\n                                        <mat-icon class=\"positive-icon\">arrow_upward</mat-icon>\n                                        <span class=\"positive-note pt-1\">+{{roundTo(item?.progress)}}%</span>\n                                    </div>\n                                    <div class=\"flex items-center growth-negative\" *ngIf=\"item?.growth === 'negative' && item?.progress > 0\">\n                                        <mat-icon class=\"negative-icon\">arrow_downward</mat-icon>\n                                        <span class=\"negative-note\">-{{roundTo(item?.progress)}}%</span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </sb-uic-sliders-ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n",
+                styles: [".user-progress-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.user-progress-wrapper{border-radius:12px}.user-rank{background:url(https://portal.dev.karmayogibharat.net/content-store/orgStore/0132238763297177601/1727267061524_shadow.png),linear-gradient(124.59deg,#266eeb 51.53%,#133f8b 140.2%);height:76px;border-top-left-radius:12px;border-top-right-radius:12px;border-left-color:#266eeb;border-right-color:#266eeb;border-top-color:#266eeb;padding-left:25%}.current-rank{padding:3px 10px;border-radius:15px;background-color:#fff;color:#f3962f;font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center}.user-details-wrapper{padding:0 8px;border:1px solid #e8e8e8;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fff}.user-details,.user-stats{padding:0 8px}.user-initial{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background-color:#000;color:#fff;border-radius:50px;border:3px solid #fff;margin-top:-30px}.user-profile{width:70px;height:70px;border-radius:50px}.user-name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.my-hours{padding:16px;background-color:#f0f3f4;border-radius:12px;width:50%;border:1px solid #c3c3c3}.my-certificates{padding:16px;background-color:#f0f3f4;width:50%;border-radius:12px;border:1px solid #c3c3c3}.k-points{padding:16px;background-color:#f0f3f4;width:40%;border-radius:12px;border:1px solid #c3c3c3}.hours-icon{background:linear-gradient(143.13deg,rgba(255,191,26,.15) 5.36%,rgba(255,64,128,.15) 94.64%);border-radius:50px;padding:5px}.counter-title{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left}.counter{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.cert-icon{background:linear-gradient(180deg,rgba(255,206,81,.24) 0,rgba(254,231,28,.24) 100%);border-radius:50px;padding:5px}.kp-point-icon{background:#dbe4ff;border-radius:50px;padding:5px;height:18px;width:18px}.insights-wrapper{padding:8px 0}.insights-container{background:rgba(243,150,47,.2);height:84px;border-radius:8px}.insights-container ::ng-deep .prev{display:none}.insights-container ::ng-deep .next{display:none}.insights-item{padding:16px}.insights-lable{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left}.positive-note{font-size:12px;font-weight:400;line-height:14.4px}.positive-icon{font-size:18px;height:18px;width:18px}.growth-positive{color:green}.growth-negative{color:red}.negative-icon{font-size:18px;height:18px;width:18px}.negative-note{font-size:12px;font-weight:400;line-height:14.4px}@media screen and (min-width:320px) and (max-width:769px){.week-progress{background-color:#d1dbec}}"]
+            }] }
+];
+/** @nocollapse */
+UserProgressComponent.ctorParameters = () => [
+    { type: InsiteDataService }
+];
+UserProgressComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    rootOrgId: [{ type: Input }],
+    scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+};
+if (false) {
+    /** @type {?} */
+    UserProgressComponent.prototype.objectData;
+    /** @type {?} */
+    UserProgressComponent.prototype.rootOrgId;
+    /** @type {?} */
+    UserProgressComponent.prototype.insitesData;
+    /** @type {?} */
+    UserProgressComponent.prototype.currentIndex;
+    /** @type {?} */
+    UserProgressComponent.prototype.styleData;
+    /** @type {?} */
+    UserProgressComponent.prototype.userProgress;
+    /** @type {?} */
+    UserProgressComponent.prototype.expand;
+    /** @type {?} */
+    UserProgressComponent.prototype.scrollableItems;
+    /** @type {?} */
+    UserProgressComponent.prototype.insightSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class UserProgressModule {
+}
+UserProgressModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [UserProgressComponent],
+                imports: [
+                    CommonModule,
+                    MatTooltipModule,
+                    MatIconModule,
+                    ScrollableItemModule,
+                    SlidersNgContentLibModule,
+                ],
+                exports: [
+                    UserProgressComponent
+                ]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class NationalLearningModule {
+}
+NationalLearningModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [NationalLearningComponent],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatChipsModule,
+                    SkeletonLoaderLibModule,
+                    SlidersLibModule,
+                    MatTabsModule,
+                    KeyHighlightsModule,
+                    ContentStripWithTabsLibModule,
+                    DataPointsModule,
+                    EventsModule,
+                    MdoLeaderboardModule,
+                    HighlightsOfWeekModule,
+                    SpeakersModule,
+                    UserProgressModule
+                ],
+                exports: [
+                    NationalLearningComponent,
+                ],
+                providers: [
+                    CommonMethodsService
+                ],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            },] }
+];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -15836,5 +17062,5 @@ ProvidersModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AnnouncementsModule, CalenderModule, CardsModule, CbpPlanModule, CommonMethodsService, CommonStripModule, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentProgressModule, ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule, DataPointsModule, DialogComponentsModule, 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, CertificateDialogComponent as ɵcb, AvatarPhotoLibModule as ɵcc, AvatarPhotoLibComponent as ɵcd, ContentStripWithTabsPillsComponent as ɵce, CompetencyPassbookComponent as ɵcf, CompetencyPassbookService as ɵcg, PillsModule as ɵch, PillsComponent as ɵci, CompetencyPassbookMdoComponent as ɵcj, CompetencyPassbookMdoService as ɵck, UserContentRatingLibComponent as ɵcl, RatingService as ɵcm, UserContentRatingLibService as ɵcn, MdoChannelV1Component as ɵco, MdoChannelV2Component as ɵcp, ProvidersV2Component as ɵcq, 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 };
+export { AnnouncementsModule, CalenderModule, CardsModule, CbpPlanModule, CommonMethodsService, CommonStripModule, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentProgressModule, ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule, DataPointsModule, DialogComponentsModule, EventsModule, HighlightsOfWeekModule, HttpLoaderFactory, HttpLoaderFactory1, KeyHighlightsModule, MDOChannelModule, MdoLeaderboardModule, MyHammerConfig, NationalLearningModule, ProvidersModule, ROOT_WIDGET_CONFIG, SlidersLibModule, SpeakersModule, TopLearnersModule, UserContentRatingLibModule, UserProgressModule, 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, CertificateDialogComponent as ɵcb, AvatarPhotoLibModule as ɵcc, AvatarPhotoLibComponent as ɵcd, ContentStripWithTabsPillsComponent as ɵce, CompetencyPassbookComponent as ɵcf, CompetencyPassbookService as ɵcg, PillsModule as ɵch, PillsComponent as ɵci, CompetencyPassbookMdoComponent as ɵcj, CompetencyPassbookMdoService as ɵck, UserContentRatingLibComponent as ɵcl, RatingService as ɵcm, UserContentRatingLibService as ɵcn, MdoChannelV1Component as ɵco, MdoChannelV2Component as ɵcp, ProvidersV2Component as ɵcq, NationalLearningComponent as ɵcr, KeyHighlightsComponent as ɵcs, EventsComponent as ɵct, EventCardComponent as ɵcu, MdoLeaderboardComponent as ɵcv, HighlightsOfWeekComponent as ɵcw, SpeakersComponent as ɵcx, UserProgressComponent as ɵcy, 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