@sunbird-cb/consumption 0.0.81 → 0.0.83

package/fesm5/sunbird-cb-consumption.js

@@ -9,7 +9,7 @@ import { __assign, __awaiter, __generator, __extends, __values, __spread, __read
 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';
@@ -1479,7 +1479,7 @@ function viewerRouteGenerator(id, mimeType, collectionId, collectionType, forPre
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-var moment = moment$2;
+var moment = moment$4;
 // tslint:enable
 // TODO: move this in some common place
 /** @type {?} */
@@ -7194,7 +7194,12 @@ var API_END_POINTS$2 = {
     PROVIDER_INSIGHTS: "/apis/proxies/v8/microsite/read/insights",
     TRAINING_DETAILS: "apis/proxies/v8/sunbirdigot/search",
     ANNOUNCEMENTS_DETAILS: "apis/proxies/v8/announcements/v1/search",
-    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",
 };
 var InsiteDataService = /** @class */ (function () {
     function InsiteDataService(http) {
@@ -7244,6 +7249,57 @@ var InsiteDataService = /** @class */ (function () {
     function (channelId) {
         return this.http.get(API_END_POINTS$2.LEARNERS + "/" + channelId);
     };
+    /**
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchLeaderboard = /**
+     * @return {?}
+     */
+    function () {
+        return this.http.get("" + API_END_POINTS$2.LEADERBOARD);
+    };
+    /**
+     * @param {?} orgId
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchMdoUsers = /**
+     * @param {?} orgId
+     * @return {?}
+     */
+    function (orgId) {
+        return this.http.get(API_END_POINTS$2.LEADERBOARD_USERS + "/" + orgId);
+    };
+    /**
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchNwlStats = /**
+     * @return {?}
+     */
+    function () {
+        return this.http.get("" + API_END_POINTS$2.NLW_LEADERBOARD);
+    };
+    /**
+     * @param {?} payload
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchInsightsData = /**
+     * @param {?} payload
+     * @return {?}
+     */
+    function (payload) {
+        /** @type {?} */
+        var result = this.http.post(API_END_POINTS$2.INSIGHTS, payload);
+        return result;
+    };
+    /**
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchUserProgress = /**
+     * @return {?}
+     */
+    function () {
+        return this.http.get("" + API_END_POINTS$2.USER_PROGRESS);
+    };
     InsiteDataService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -7290,7 +7346,12 @@ var DataPointsComponent = /** @class */ (function () {
         }
         if (this.fetchDataFromApi) {
             this.isDataLoading = true;
-            this.getInsiteData();
+            if (this.pageLayout === 'nlw') {
+                this.getStats();
+            }
+            else {
+                this.getInsiteData();
+            }
         }
     };
     /**
@@ -7359,6 +7420,32 @@ var DataPointsComponent = /** @class */ (function () {
             _this.isDataLoading = false;
         }));
     };
+    /**
+     * @return {?}
+     */
+    DataPointsComponent.prototype.getStats = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.insightSvc.fetchNwlStats().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        function (res) {
+            if (res && res.result && res.result.data) {
+                _this.objectData = res.result.data;
+            }
+            _this.isDataLoading = false;
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        function (error) {
+            console.log(error);
+            _this.isDataLoading = false;
+        }));
+    };
     /**
      * @param {?} value
      * @return {?}
@@ -7389,8 +7476,8 @@ var DataPointsComponent = /** @class */ (function () {
     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 */
@@ -7402,7 +7489,8 @@ var DataPointsComponent = /** @class */ (function () {
         layoutType: [{ type: Input }],
         fetchDataFromApi: [{ type: Input }],
         providerId: [{ type: Input }],
-        pageLayout: [{ type: Input }]
+        pageLayout: [{ type: Input }],
+        title: [{ type: Input }]
     };
     return DataPointsComponent;
 }());
@@ -7418,10 +7506,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;
 }
 
@@ -9055,7 +9147,7 @@ var AnnouncementsModule = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-var moment$1 = moment$2;
+var moment$1 = moment$4;
 var TopLearnersComponent = /** @class */ (function () {
     function TopLearnersComponent(insightSvc) {
         this.insightSvc = insightSvc;
@@ -9475,6 +9567,7 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
         _this.title = '';
         _this.loadNgContentData = false;
         _this.autoScroll = false;
+        _this.customBanner = false;
         _this.currentIndexValue = new EventEmitter();
         _this.id = "banner_" + Math.random();
         _this.defaultMenuSubscribe = null;
@@ -9628,8 +9721,8 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
     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 */
@@ -9643,6 +9736,7 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
         title: [{ type: Input }],
         loadNgContentData: [{ type: Input }],
         autoScroll: [{ type: Input }],
+        customBanner: [{ type: Input }],
         currentIndexValue: [{ type: Output }],
         id: [{ type: HostBinding, args: ['id',] }],
         currentIndex: [{ type: Input }]
@@ -9661,6 +9755,8 @@ if (false) {
     /** @type {?} */
     SlidersNgContentLibComponent.prototype.autoScroll;
     /** @type {?} */
+    SlidersNgContentLibComponent.prototype.customBanner;
+    /** @type {?} */
     SlidersNgContentLibComponent.prototype.currentIndexValue;
     /** @type {?} */
     SlidersNgContentLibComponent.prototype.id;
@@ -15479,6 +15575,7 @@ var ContentStripWithTabsPillsModule = /** @class */ (function () {
 /** @type {?} */
 var 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/",
 };
 var CompetencyPassbookService = /** @class */ (function () {
@@ -15497,6 +15594,15 @@ var CompetencyPassbookService = /** @class */ (function () {
     function (payload) {
         return this.http.post(API_POINTS.COMPETENCY_LIST, payload);
     };
+    /**
+     * @return {?}
+     */
+    CompetencyPassbookService.prototype.getCompetencyListv_V2 = /**
+     * @return {?}
+     */
+    function () {
+        return this.http.get(API_POINTS.COMPETENCY_LIST_V2);
+    };
     /**
      * @param {?} certId
      * @return {?}
@@ -15535,7 +15641,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
     // currentFilter = 'Behavioural'
     // currentCompetencies: any = []
     // competencyData: any
-    function CompetencyPassbookComponent(configSvc, contentSvc, competencySvc, router) {
+    function CompetencyPassbookComponent(configSvc, contentSvc, competencySvc, router, environment) {
         this.configSvc = configSvc;
         this.contentSvc = contentSvc;
         this.competencySvc = competencySvc;
@@ -15552,6 +15658,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
         this.competencyStrength = 0;
         this.competencyThemeLength = 6;
         this.showAllTheme = [{ name: 'Show all', showAll: false }];
+        this.environment = environment;
     }
     /**
      * @return {?}
@@ -15560,6 +15667,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.comeptencyKeys = this.configSvc.compentency[this.environment.compentencyVersionKey];
         this.getAllCompetencies();
         // this.competencyData = this.objectData
         // this.filter(this.currentFilter)
@@ -15622,7 +15730,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
                                     "lastUpdatedOn": "desc"
                                 },
                                 "facets": [
-                                    "competencies_v5.competencyArea"
+                                    this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyArea
                                 ],
                                 "limit": 0,
                                 "offset": 0,
@@ -15643,7 +15751,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
                                  * @return {?}
                                  */
                                 function (fact) {
-                                    if (fact.name === 'competencies_v5.competencyArea') {
+                                    if (fact.name === _this.environment.compentencyVersionKey + "." + _this.comeptencyKeys.vCompetencyArea) {
                                         _this.competencyArea = fact.values;
                                     }
                                 }));
@@ -15762,18 +15870,16 @@ var CompetencyPassbookComponent = /** @class */ (function () {
     function () {
         var _this = this;
         this.loadCometency = true;
-        /** @type {?} */
-        var request = { "search": { "type": "Competency Area" }, "filter": { "isDetail": true } };
-        this.competencySvc.getCompetencyList(request).subscribe((/**
+        this.competencySvc.getCompetencyListv_V2().subscribe((/**
          * @param {?} response
          * @return {?}
          */
         function (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 {?}
                  */
@@ -15806,34 +15912,35 @@ var CompetencyPassbookComponent = /** @class */ (function () {
     function (value, addFilter) {
         return __awaiter(this, void 0, void 0, function () {
             var request, response, competencyThemeData_1, error_2;
+            var _a;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         request = {
                             "request": {
                                 "query": "",
-                                "filters": __assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": value, "status": [
-                                        "Live"
-                                    ] }),
+                                "filters": __assign({ "contentType": "Course" }, addFilter, (_a = {}, _a[this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyArea] = value, _a["status"] = [
+                                    "Live"
+                                ], _a)),
                                 "sort_by": {
                                     "lastUpdatedOn": "desc"
                                 },
                                 "facets": [
-                                    "competencies_v5.competencyTheme"
+                                    this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyTheme
                                 ],
                                 "limit": 0,
                                 "offset": 0,
                                 "fields": []
                             }
                         };
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
+                        _b.trys.push([1, 3, , 4]);
                         this.loadCometency = true;
                         return [4 /*yield*/, this.callCompetencySearch(request)];
                     case 2:
-                        response = _a.sent();
+                        response = _b.sent();
                         if (response && response.results) {
                             if (response.results.result.facets) {
                                 competencyThemeData_1 = response.results.result.facets[0].values;
@@ -15864,7 +15971,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_2 = _a.sent();
+                        error_2 = _b.sent();
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
                 }
@@ -15928,34 +16035,35 @@ var CompetencyPassbookComponent = /** @class */ (function () {
     function (area, addFilter) {
         return __awaiter(this, void 0, void 0, function () {
             var request, returnedData_1, response, competencyThemeData_2, error_3;
+            var _a;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         request = {
                             "request": {
                                 "query": "",
-                                "filters": __assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": area.name, "status": [
-                                        "Live"
-                                    ] }),
+                                "filters": __assign({ "contentType": "Course" }, addFilter, (_a = {}, _a[this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyArea] = area.name, _a["status"] = [
+                                    "Live"
+                                ], _a)),
                                 "sort_by": {
                                     "lastUpdatedOn": "desc"
                                 },
                                 "facets": [
-                                    "competencies_v5.competencyTheme"
+                                    this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyTheme
                                 ],
                                 "limit": 0,
                                 "offset": 0,
                                 "fields": []
                             }
                         };
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
+                        _b.trys.push([1, 3, , 4]);
                         returnedData_1 = this.loadCometency = true;
                         return [4 /*yield*/, this.callCompetencySearch(request)];
                     case 2:
-                        response = _a.sent();
+                        response = _b.sent();
                         if (response && response.results) {
                             if (response.results.result.facets) {
                                 competencyThemeData_2 = response.results.result.facets[0].values;
@@ -15986,7 +16094,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_3 = _a.sent();
+                        error_3 = _b.sent();
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
                 }
@@ -16059,34 +16167,35 @@ var CompetencyPassbookComponent = /** @class */ (function () {
     function (compArea, addFilter) {
         return __awaiter(this, void 0, void 0, function () {
             var request, response, competencySubThemeData_1, error_4;
+            var _a;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         request = {
                             "request": {
                                 "query": "",
-                                "filters": __assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": compArea.name, "status": [
-                                        "Live"
-                                    ] }),
+                                "filters": __assign({ "contentType": "Course" }, addFilter, (_a = {}, _a[this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyArea] = compArea.name, _a["status"] = [
+                                    "Live"
+                                ], _a)),
                                 "sort_by": {
                                     "lastUpdatedOn": "desc"
                                 },
                                 "facets": [
-                                    "competencies_v5.competencySubThemeId"
+                                    this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencySubTheme
                                 ],
                                 "limit": 0,
                                 "offset": 0,
                                 "fields": []
                             }
                         };
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, , 4]);
+                        _b.trys.push([1, 3, , 4]);
                         this.loadCometency = true;
                         return [4 /*yield*/, this.callCompetencySearch(request)];
                     case 2:
-                        response = _a.sent();
+                        response = _b.sent();
                         if (response && response.results) {
                             if (response.results.result.facets) {
                                 competencySubThemeData_1 = response.results.result.facets[0].values;
@@ -16119,7 +16228,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
                                                          * @param {?} key
                                                          * @return {?}
                                                          */
-                                                        function (key) { return obj1['id'] === Number(obj2['name']); }));
+                                                        function (key) { return obj1['name'] === (obj2['name']); }));
                                                     }));
                                                 }));
                                                 _this.allcompetencyTheme[themeEle.name.toLowerCase()]['children'] = data;
@@ -16132,7 +16241,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
                         }
                         return [3 /*break*/, 4];
                     case 3:
-                        error_4 = _a.sent();
+                        error_4 = _b.sent();
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
                 }
@@ -16142,7 +16251,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
     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}"]
                 }] }
     ];
@@ -16151,7 +16260,8 @@ var CompetencyPassbookComponent = /** @class */ (function () {
         { type: ConfigurationsService$1 },
         { type: WidgetContentService },
         { type: CompetencyPassbookService },
-        { type: Router }
+        { type: Router },
+        { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] }
     ]; };
     CompetencyPassbookComponent.propDecorators = {
         objectData: [{ type: Input }],
@@ -16205,6 +16315,10 @@ if (false) {
     /** @type {?} */
     CompetencyPassbookComponent.prototype.showAllTheme;
     /** @type {?} */
+    CompetencyPassbookComponent.prototype.environment;
+    /** @type {?} */
+    CompetencyPassbookComponent.prototype.comeptencyKeys;
+    /** @type {?} */
     CompetencyPassbookComponent.prototype.configSvc;
     /** @type {?} */
     CompetencyPassbookComponent.prototype.contentSvc;
@@ -16335,6 +16449,7 @@ var CompetencyPassbookModule = /** @class */ (function () {
 var 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",
 };
 var CompetencyPassbookMdoService = /** @class */ (function () {
     // tslint: disable-next-line: whitespace
@@ -16352,6 +16467,15 @@ var CompetencyPassbookMdoService = /** @class */ (function () {
     function (payload) {
         return this.http.post(API_POINTS$1.COMPETENCY_LIST, payload);
     };
+    /**
+     * @return {?}
+     */
+    CompetencyPassbookMdoService.prototype.getCompetencyListv_V2 = /**
+     * @return {?}
+     */
+    function () {
+        return this.http.get(API_POINTS$1.COMPETENCY_LIST_V2);
+    };
     /**
      * @param {?} providerId
      * @return {?}
@@ -16390,7 +16514,7 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
     // currentFilter = 'Behavioural'
     // currentCompetencies: any = []
     // competencyData: any
-    function CompetencyPassbookMdoComponent(configSvc, contentSvc, competencySvc, router) {
+    function CompetencyPassbookMdoComponent(configSvc, contentSvc, competencySvc, router, environment) {
         this.configSvc = configSvc;
         this.contentSvc = contentSvc;
         this.competencySvc = competencySvc;
@@ -16401,12 +16525,14 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
         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 {?}
@@ -16415,6 +16541,7 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.comeptencyKeys = this.configSvc.compentency[this.environment.compentencyVersionKey];
         this.getAllCompetencies();
     };
     /**
@@ -16428,17 +16555,17 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
         this.loadCometency = true;
         /** @type {?} */
         var request = { "search": { "type": "Competency Area" }, "filter": { "isDetail": true } };
-        this.competencySvc.getCompetencyList(request).subscribe((/**
+        this.competencySvc.getCompetencyListv_V2().subscribe((/**
          * @param {?} response
          * @return {?}
          */
         function (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 {?}
                  */
@@ -16484,11 +16611,11 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
                                  * @return {?}
                                  */
                                 function (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();
                                     }
@@ -16683,7 +16810,7 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
     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}"]
                 }] }
     ];
@@ -16692,7 +16819,8 @@ var CompetencyPassbookMdoComponent = /** @class */ (function () {
         { type: ConfigurationsService$1 },
         { type: WidgetContentService },
         { type: CompetencyPassbookMdoService },
-        { type: Router }
+        { type: Router },
+        { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] }
     ]; };
     CompetencyPassbookMdoComponent.propDecorators = {
         objectData: [{ type: Input }],
@@ -16748,6 +16876,10 @@ if (false) {
     /** @type {?} */
     CompetencyPassbookMdoComponent.prototype.showAllTheme;
     /** @type {?} */
+    CompetencyPassbookMdoComponent.prototype.environment;
+    /** @type {?} */
+    CompetencyPassbookMdoComponent.prototype.comeptencyKeys;
+    /** @type {?} */
     CompetencyPassbookMdoComponent.prototype.configSvc;
     /** @type {?} */
     CompetencyPassbookMdoComponent.prototype.contentSvc;
@@ -17945,6 +18077,1280 @@ var ProvidersModule = /** @class */ (function () {
     return ProvidersModule;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NationalLearningComponent = /** @class */ (function () {
+    function NationalLearningComponent(router, events) {
+        this.router = router;
+        this.events = events;
+        this.sectionList = [];
+        this.providerId = '123456789';
+        this.descriptionMaxLength = 500;
+    }
+    /**
+     * @return {?}
+     */
+    NationalLearningComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    /**
+     * @param {?} event
+     * @param {?} learnerReview
+     * @return {?}
+     */
+    NationalLearningComponent.prototype.hideKeyHightlight = /**
+     * @param {?} event
+     * @param {?} learnerReview
+     * @return {?}
+     */
+    function (event, learnerReview) {
+        if (event) {
+            learnerReview['hideSection'] = true;
+        }
+    };
+    /**
+     * @param {?} _stripData
+     * @param {?} columnData
+     * @return {?}
+     */
+    NationalLearningComponent.prototype.showAllContent = /**
+     * @param {?} _stripData
+     * @param {?} columnData
+     * @return {?}
+     */
+    function (_stripData, columnData) {
+        if (columnData && columnData.contentStrip && columnData.contentStrip.strips && columnData.contentStrip.strips.length) {
+            /** @type {?} */
+            var stripData = _stripData;
+            /** @type {?} */
+            var 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: 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 {?}
+     */
+    NationalLearningComponent.prototype.hideContentStrip = /**
+     * @param {?} event
+     * @param {?} contentStripData
+     * @return {?}
+     */
+    function (event, contentStripData) {
+        if (event) {
+            contentStripData.contentStrip['hideSection'] = true;
+        }
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NationalLearningComponent.prototype.raiseTabClick = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'mdo-leaderboard',
+            id: event + "-tab",
+        }, {}, {
+            module: 'National Learning Week',
+        });
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NationalLearningComponent.prototype.raiseTelemetryInteratEvent = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (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 = function () { return [
+        { type: Router },
+        { type: EventService }
+    ]; };
+    NationalLearningComponent.propDecorators = {
+        sectionList: [{ type: Input }],
+        configDetails: [{ type: Input }],
+        nwlConfiguration: [{ type: Input }]
+    };
+    return NationalLearningComponent;
+}());
+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
+ */
+var KeyHighlightsComponent = /** @class */ (function () {
+    function KeyHighlightsComponent() {
+        this.currentIndex = 0;
+        this.providerId = '';
+        this.formData = '';
+        this.emptyResponse = new EventEmitter();
+        this.styleData = {};
+        this.contentdata = [];
+    }
+    /**
+     * @return {?}
+     */
+    KeyHighlightsComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
+        this.contentdata = this.formData && this.formData.content ? this.formData.content : [];
+    };
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    KeyHighlightsComponent.prototype.getCurrentIndex = /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    function (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 = function () { return []; };
+    KeyHighlightsComponent.propDecorators = {
+        providerId: [{ type: Input }],
+        formData: [{ type: Input }],
+        mode: [{ type: Input }],
+        emptyResponse: [{ type: Output }],
+        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    };
+    return KeyHighlightsComponent;
+}());
+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
+ */
+var KeyHighlightsModule = /** @class */ (function () {
+    function KeyHighlightsModule() {
+    }
+    KeyHighlightsModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [KeyHighlightsComponent],
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        SlidersNgContentLibModule,
+                        ScrollableItemModule
+                    ],
+                    exports: [
+                        KeyHighlightsComponent
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                },] }
+    ];
+    return KeyHighlightsModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var moment$2 = moment$4;
+var EventsComponent = /** @class */ (function () {
+    function EventsComponent(insightSvc) {
+        this.insightSvc = insightSvc;
+        this.daysBetween = [];
+        this.events = [];
+        this.loader = false;
+    }
+    /**
+     * @return {?}
+     */
+    EventsComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.requestBody = {
+            locale: [
+                'en',
+            ],
+            query: '',
+            request: {
+                query: '',
+                filters: {
+                    status: ['Live'],
+                    contentType: 'Event',
+                    category: 'Event',
+                    startDate: {
+                        ">=": '',
+                        "<": ''
+                    }
+                },
+                sort_by: {
+                    startDate: 'desc',
+                },
+            },
+        };
+        this.getEventsList();
+    };
+    /**
+     * @return {?}
+     */
+    EventsComponent.prototype.getDaysBetweenDates = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var currentDate = moment$2(this.nwlEventsConfig.startDate, 'DD-MM-YYYY');
+        /** @type {?} */
+        var endDate = moment$2(this.nwlEventsConfig.endDate, 'DD-MM-YYYY');
+        while (currentDate.isSameOrBefore(endDate)) {
+            /** @type {?} */
+            var 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 {?}
+     */
+    EventsComponent.prototype.getEvents = /**
+     * @param {?} slectedDate
+     * @return {?}
+     */
+    function (slectedDate) {
+        var _this = this;
+        this.currentDay = slectedDate.target.value;
+        /** @type {?} */
+        var 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 {?}
+         */
+        function (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 {?}
+         */
+        function (error) {
+            _this.loader = false;
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    EventsComponent.prototype.getEventsList = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.getDaysBetweenDates();
+        /** @type {?} */
+        var 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 {?}
+         */
+        function (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 {?}
+         */
+        function (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 = function () { return [
+        { type: InsiteDataService }
+    ]; };
+    EventsComponent.propDecorators = {
+        object: [{ type: Input }],
+        nwlEventsConfig: [{ type: Input }]
+    };
+    return EventsComponent;
+}());
+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 {?} */
+var moment$3 = moment$4;
+var EventCardComponent = /** @class */ (function () {
+    function EventCardComponent(environment, router) {
+        this.router = router;
+        this.descriptionMaxLength = 50;
+        this.environment = environment;
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    EventCardComponent.prototype.getEventDate = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        /** @type {?} */
+        var timeString = event.startTime.split(":");
+        /** @type {?} */
+        var dataString = moment$3(event.startDate).format('MMM DD, YYYY') + " " + timeString[0] + ":" + timeString[1];
+        return dataString;
+    };
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    EventCardComponent.prototype.getPublicUrl = /**
+     * @param {?} url
+     * @return {?}
+     */
+    function (url) {
+        /** @type {?} */
+        var mainUrl = url.split('/content').pop() || '';
+        return this.environment.contentHost + "/" + this.environment.contentBucket + "/content" + mainUrl;
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    EventCardComponent.prototype.redirectTo = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (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 = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] },
+        { type: Router }
+    ]; };
+    EventCardComponent.propDecorators = {
+        objectData: [{ type: Input }],
+        eventDetails: [{ type: Input }],
+        loader: [{ type: Input }]
+    };
+    return EventCardComponent;
+}());
+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
+ */
+var EventsModule = /** @class */ (function () {
+    function EventsModule() {
+    }
+    EventsModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [EventsComponent, EventCardComponent],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkeletonLoaderLibModule,
+                    ],
+                    exports: [EventsComponent, EventCardComponent]
+                },] }
+    ];
+    return EventsModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var MdoLeaderboardComponent = /** @class */ (function () {
+    function MdoLeaderboardComponent(insiteDataService) {
+        this.insiteDataService = insiteDataService;
+        this.currentTab = 'XL';
+        this.result = [];
+        this.searchTerm = '';
+        this.expand = true;
+        this.tabClicked = new EventEmitter();
+    }
+    /**
+     * @return {?}
+     */
+    MdoLeaderboardComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.getData();
+    };
+    /**
+     * @return {?}
+     */
+    MdoLeaderboardComponent.prototype.getData = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.insiteDataService.fetchLeaderboard().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        function (res) {
+            if (res && res.result) {
+                _this.result = res.result;
+                _this.filteredData = _this.result.mdoLeaderBoard
+                    .filter((/**
+                 * @param {?} user
+                 * @return {?}
+                 */
+                function (user) { return user.size === _this.currentTab; }))
+                    .map((/**
+                 * @param {?} user
+                 * @return {?}
+                 */
+                function (user) { return (__assign({}, user, { children: [], selected: false })); }));
+            }
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        function (error) {
+            console.log(error);
+        }));
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    MdoLeaderboardComponent.prototype.getTabData = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        var _this = this;
+        this.currentTab = name;
+        this.searchTerm = '';
+        this.filteredData = this.result.mdoLeaderBoard
+            .filter((/**
+         * @param {?} user
+         * @return {?}
+         */
+        function (user) { return user.size === _this.currentTab; }))
+            .map((/**
+         * @param {?} user
+         * @return {?}
+         */
+        function (user) { return (__assign({}, user, { children: [], selected: false })); }));
+        /** @type {?} */
+        var 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 {?}
+     */
+    MdoLeaderboardComponent.prototype.getRank = /**
+     * @param {?} rank
+     * @return {?}
+     */
+    function (rank) {
+        return [1, 2, 3].includes(rank) ? "rank" + rank : 'rank0';
+    };
+    /**
+     * @param {?} rank
+     * @return {?}
+     */
+    MdoLeaderboardComponent.prototype.getMedal = /**
+     * @param {?} rank
+     * @return {?}
+     */
+    function (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 {?}
+     */
+    MdoLeaderboardComponent.prototype.handleSearchQuery = /**
+     * @param {?} e
+     * @return {?}
+     */
+    function (e) {
+        var _this = this;
+        if (e.target.value && e.target.value.length > 0) {
+            this.searchTerm = e.target.value;
+            this.filteredData = this.result.mdoLeaderBoard
+                .filter((/**
+             * @param {?} user
+             * @return {?}
+             */
+            function (user) { return user.size === _this.currentTab && user.org_name.toLowerCase().includes(e.target.value); }))
+                .map((/**
+             * @param {?} user
+             * @return {?}
+             */
+            function (user) { return (__assign({}, user, { children: [] })); }));
+        }
+        else {
+            this.filteredData = this.result.mdoLeaderBoard
+                .filter((/**
+             * @param {?} user
+             * @return {?}
+             */
+            function (user) { return user.size === _this.currentTab; }))
+                .map((/**
+             * @param {?} user
+             * @return {?}
+             */
+            function (user) { return (__assign({}, user, { children: [] })); }));
+        }
+    };
+    /**
+     * @return {?}
+     */
+    MdoLeaderboardComponent.prototype.toggleWeekHightlits = /**
+     * @return {?}
+     */
+    function () {
+        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 = function () { return [
+        { type: InsiteDataService }
+    ]; };
+    MdoLeaderboardComponent.propDecorators = {
+        object: [{ type: Input }],
+        tabClicked: [{ type: Output }]
+    };
+    return MdoLeaderboardComponent;
+}());
+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
+ */
+var MdoLeaderboardModule = /** @class */ (function () {
+    function MdoLeaderboardModule() {
+    }
+    MdoLeaderboardModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [MdoLeaderboardComponent],
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        SkeletonLoaderLibModule,
+                        FormsModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        MdoLeaderboardComponent
+                    ],
+                    providers: [InsiteDataService]
+                },] }
+    ];
+    return MdoLeaderboardModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var HighlightsOfWeekComponent = /** @class */ (function () {
+    function HighlightsOfWeekComponent() {
+        this.currentIndex = 0;
+        this.contentdata = [];
+        this.styleData = {};
+        this.expand = true;
+    }
+    /**
+     * @return {?}
+     */
+    HighlightsOfWeekComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+        if (this.objectData && this.objectData.list) {
+            this.objectData.list.forEach((/**
+             * @param {?} contentEle
+             * @return {?}
+             */
+            function (contentEle) {
+                /** @type {?} */
+                var localData = {};
+                localData['title'] = contentEle.title;
+                localData['videoUrl'] = contentEle.videoUrl;
+                localData['cardSubType'] = "card-wide-lib";
+                localData['description'] = contentEle.description;
+                _this.contentdata.push(localData);
+            }));
+        }
+    };
+    /**
+     * @return {?}
+     */
+    HighlightsOfWeekComponent.prototype.toggleWeekHightlits = /**
+     * @return {?}
+     */
+    function () {
+        this.expand = !this.expand;
+    };
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    HighlightsOfWeekComponent.prototype.getCurrentIndex = /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    function (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 = function () { return []; };
+    HighlightsOfWeekComponent.propDecorators = {
+        objectData: [{ type: Input }],
+        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    };
+    return HighlightsOfWeekComponent;
+}());
+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
+ */
+var HighlightsOfWeekModule = /** @class */ (function () {
+    function HighlightsOfWeekModule() {
+    }
+    HighlightsOfWeekModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [HighlightsOfWeekComponent],
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ScrollableItemModule,
+                        SlidersNgContentLibModule
+                    ],
+                    exports: [
+                        HighlightsOfWeekComponent
+                    ]
+                },] }
+    ];
+    return HighlightsOfWeekModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var SpeakersComponent = /** @class */ (function () {
+    function SpeakersComponent() {
+        this.currentIndex = 0;
+        this.contentdata = [];
+        this.styleData = {};
+        this.expand = true;
+    }
+    /**
+     * @return {?}
+     */
+    SpeakersComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.styleData = this.objectData && this.objectData.sliderData && this.objectData.sliderData.styleData;
+        if (this.objectData && this.objectData.list) {
+            this.objectData.list.forEach((/**
+             * @param {?} contentEle
+             * @return {?}
+             */
+            function (contentEle) {
+                /** @type {?} */
+                var localData = {};
+                localData['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 {?}
+     */
+    SpeakersComponent.prototype.createInititals = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        /** @type {?} */
+        var initials = '';
+        /** @type {?} */
+        var array = name.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (var i = 0; i < name.length; i += 1) {
+                if (name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (name.charAt(i) === name.charAt(i)) {
+                    initials += name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        return initials.toUpperCase();
+    };
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    SpeakersComponent.prototype.getCurrentIndex = /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    function (indexValue) {
+        this.currentIndex = indexValue;
+    };
+    /**
+     * @return {?}
+     */
+    SpeakersComponent.prototype.toggleWeekHightlits = /**
+     * @return {?}
+     */
+    function () {
+        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 = function () { return []; };
+    SpeakersComponent.propDecorators = {
+        objectData: [{ type: Input }],
+        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    };
+    return SpeakersComponent;
+}());
+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
+ */
+var SpeakersModule = /** @class */ (function () {
+    function SpeakersModule() {
+    }
+    SpeakersModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [SpeakersComponent],
+                    imports: [
+                        CommonModule,
+                        ScrollableItemModule,
+                        SlidersNgContentLibModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                    ],
+                    exports: [
+                        SpeakersComponent
+                    ]
+                },] }
+    ];
+    return SpeakersModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var UserProgressComponent = /** @class */ (function () {
+    function UserProgressComponent(insightSvc) {
+        this.insightSvc = insightSvc;
+        this.insitesData = [];
+        this.currentIndex = 0;
+        this.styleData = {};
+        this.expand = true;
+    }
+    /**
+     * @return {?}
+     */
+    UserProgressComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.styleData = this.objectData.insights.data.sliderData.styleData;
+        this.getUserProgress();
+        this.getInsightsData();
+    };
+    /**
+     * @return {?}
+     */
+    UserProgressComponent.prototype.getUserProgress = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.insightSvc.fetchUserProgress().subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        function (res) {
+            if (res && res.result && res.result.userLeaderBoard) {
+                _this.userProgress = res.result.userLeaderBoard[0];
+            }
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    UserProgressComponent.prototype.getInsightsData = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        /** @type {?} */
+        var request = {
+            request: {
+                filters: {
+                    primaryCategory: 'programs',
+                    organisations: [
+                        'across',
+                        this.rootOrgId,
+                    ],
+                },
+            },
+        };
+        this.insightSvc.fetchInsightsData(request).subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        function (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 {?}
+                 */
+                function (obj) {
+                    return __assign({}, obj, { cardSubType: 'card-wide-lib' });
+                }));
+            }
+        }));
+    };
+    /**
+     * @param {?} number
+     * @return {?}
+     */
+    UserProgressComponent.prototype.roundTo = /**
+     * @param {?} number
+     * @return {?}
+     */
+    function (number) {
+        return Math.round(number * 100 / 100);
+    };
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    UserProgressComponent.prototype.getCurrentIndex = /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    function (indexValue) {
+        this.currentIndex = indexValue;
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    UserProgressComponent.prototype.createInititals = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        /** @type {?} */
+        var initials = '';
+        /** @type {?} */
+        var array = name.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (var i = 0; i < name.length; i += 1) {
+                if (name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (name.charAt(i) === name.charAt(i)) {
+                    initials += name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        return initials.toUpperCase();
+    };
+    /**
+     * @return {?}
+     */
+    UserProgressComponent.prototype.toggleWeekHightlits = /**
+     * @return {?}
+     */
+    function () {
+        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 = function () { return [
+        { type: InsiteDataService }
+    ]; };
+    UserProgressComponent.propDecorators = {
+        objectData: [{ type: Input }],
+        rootOrgId: [{ type: Input }],
+        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    };
+    return UserProgressComponent;
+}());
+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
+ */
+var UserProgressModule = /** @class */ (function () {
+    function UserProgressModule() {
+    }
+    UserProgressModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [UserProgressComponent],
+                    imports: [
+                        CommonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        ScrollableItemModule,
+                        SlidersNgContentLibModule,
+                    ],
+                    exports: [
+                        UserProgressComponent
+                    ]
+                },] }
+    ];
+    return UserProgressModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NationalLearningModule = /** @class */ (function () {
+    function 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]
+                },] }
+    ];
+    return NationalLearningModule;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -17955,5 +19361,5 @@ var ProvidersModule = /** @class */ (function () {
  * @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