@sunbird-cb/consumption 0.0.81 → 0.0.83

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

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@sunbird-cb/utils-v2'), require('@angular/material'), require('@sunbird-cb/resolver-v2'), require('@angular/common/http'), require('lodash'), require('moment'), require('@ngx-translate/core'), require('rxjs/add/observable/of'), require('dayjs'), require('@ngx-translate/http-loader'), require('@angular/cdk/layout'), require('@angular/platform-browser'), require('hammerjs'), require('@angular/forms'), require('jspdf')) :
     typeof define === 'function' && define.amd ? define('@sunbird-cb/consumption', ['exports', '@angular/core', '@angular/common', '@angular/router', 'rxjs', 'rxjs/operators', '@sunbird-cb/utils-v2', '@angular/material', '@sunbird-cb/resolver-v2', '@angular/common/http', 'lodash', 'moment', '@ngx-translate/core', 'rxjs/add/observable/of', 'dayjs', '@ngx-translate/http-loader', '@angular/cdk/layout', '@angular/platform-browser', 'hammerjs', '@angular/forms', 'jspdf'], factory) :
     (global = global || self, factory((global['sunbird-cb'] = global['sunbird-cb'] || {}, global['sunbird-cb'].consumption = {}), global.ng.core, global.ng.common, global.ng.router, global.rxjs, global.rxjs.operators, global['@sunbird-cb/utils-v2'], global.ng.material, global['@sunbird-cb/resolver-v2'], global.ng.common.http, global.lodash, global.moment, global.core$1, global.rxjs['add/observable/of'], global.dayjs_, global.httpLoader, global.ng.cdk.layout, global.ng.platformBrowser, global.hammerjs, global.ng.forms, global.jspdf));
-}(this, (function (exports, core, common, router, rxjs, operators, utilsV2, material, resolverV2, http, lodash, moment$2, core$1, of, dayjs_, httpLoader, layout, platformBrowser, Hammer, forms, jspdf) { 'use strict';
+}(this, (function (exports, core, common, router, rxjs, operators, utilsV2, material, resolverV2, http, lodash, moment$4, core$1, of, dayjs_, httpLoader, layout, platformBrowser, Hammer, forms, jspdf) { 'use strict';
 
     Hammer = Hammer && Hammer.hasOwnProperty('default') ? Hammer['default'] : Hammer;
 
@@ -1683,7 +1683,7 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /** @type {?} */
-    var moment = moment$2;
+    var moment = moment$4;
     // tslint:enable
     // TODO: move this in some common place
     /** @type {?} */
@@ -7398,7 +7398,12 @@
         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) {
@@ -7448,6 +7453,57 @@
         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: core.Injectable, args: [{
                         providedIn: 'root'
@@ -7494,7 +7550,12 @@
             }
             if (this.fetchDataFromApi) {
                 this.isDataLoading = true;
-                this.getInsiteData();
+                if (this.pageLayout === 'nlw') {
+                    this.getStats();
+                }
+                else {
+                    this.getInsiteData();
+                }
             }
         };
         /**
@@ -7563,6 +7624,32 @@
                 _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 {?}
@@ -7593,8 +7680,8 @@
         DataPointsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-data-points',
-                        template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                        {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full 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 */
@@ -7606,7 +7693,8 @@
             layoutType: [{ type: core.Input }],
             fetchDataFromApi: [{ type: core.Input }],
             providerId: [{ type: core.Input }],
-            pageLayout: [{ type: core.Input }]
+            pageLayout: [{ type: core.Input }],
+            title: [{ type: core.Input }]
         };
         return DataPointsComponent;
     }());
@@ -7622,10 +7710,14 @@
         /** @type {?} */
         DataPointsComponent.prototype.pageLayout;
         /** @type {?} */
+        DataPointsComponent.prototype.title;
+        /** @type {?} */
         DataPointsComponent.prototype.customArray;
         /** @type {?} */
         DataPointsComponent.prototype.isDataLoading;
         /** @type {?} */
+        DataPointsComponent.prototype.apiResults;
+        /** @type {?} */
         DataPointsComponent.prototype.insightSvc;
     }
 
@@ -9259,7 +9351,7 @@
      * @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;
@@ -9679,6 +9771,7 @@
             _this.title = '';
             _this.loadNgContentData = false;
             _this.autoScroll = false;
+            _this.customBanner = false;
             _this.currentIndexValue = new core.EventEmitter();
             _this.id = "banner_" + Math.random();
             _this.defaultMenuSubscribe = null;
@@ -9832,8 +9925,8 @@
         SlidersNgContentLibComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-sliders-ng-content',
-                        template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n            <ng-content select=\"[sliderMeta]\"></ng-content>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *ngIf=\"widgetData?.length == 1\">\n  <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container *ngIf=\"!widgetData?.length\">\n  <div class=\"slider default-slider h-full\">\n    <div class=\"relative h-full\">\n        <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n        <div class=\"default-title rounded-full\">\n            <p class=\"mat-h1\">{{title}}</p>\n        </div>\n    </div>\n  </div>\n</ng-container> -->\n",
-                        styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
+                        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 */
@@ -9847,6 +9940,7 @@
             title: [{ type: core.Input }],
             loadNgContentData: [{ type: core.Input }],
             autoScroll: [{ type: core.Input }],
+            customBanner: [{ type: core.Input }],
             currentIndexValue: [{ type: core.Output }],
             id: [{ type: core.HostBinding, args: ['id',] }],
             currentIndex: [{ type: core.Input }]
@@ -9865,6 +9959,8 @@
         /** @type {?} */
         SlidersNgContentLibComponent.prototype.autoScroll;
         /** @type {?} */
+        SlidersNgContentLibComponent.prototype.customBanner;
+        /** @type {?} */
         SlidersNgContentLibComponent.prototype.currentIndexValue;
         /** @type {?} */
         SlidersNgContentLibComponent.prototype.id;
@@ -10819,18 +10915,18 @@
                      * to Print HH:mm:ss
                      * @type {?}
                      */
-                    var duration2 = moment$2.duration(data, 'seconds');
+                    var duration2 = moment$4.duration(data, 'seconds');
                     /** @type {?} */
-                    var resultstring = moment$2.utc(duration2.asMilliseconds()).format('HH:mm:ss');
+                    var resultstring = moment$4.utc(duration2.asMilliseconds()).format('HH:mm:ss');
                     return resultstring;
                 case 'hms2M': /**to Print mm:ss */
                     /**
                      * to Print mm:ss
                      * @type {?}
                      */
-                    var duration2H = moment$2.duration(data, 'seconds');
+                    var duration2H = moment$4.duration(data, 'seconds');
                     /** @type {?} */
-                    var resultstring2H = moment$2.utc(duration2H.asMilliseconds()).format('mm:ss');
+                    var resultstring2H = moment$4.utc(duration2H.asMilliseconds()).format('mm:ss');
                     return resultstring2H;
                 case 'hour':
                     if (h === 0) {
@@ -10846,7 +10942,7 @@
                 case 'day':
                     if (h > 24) {
                         /** @type {?} */
-                        var duration3 = moment$2.duration(data, 'seconds');
+                        var duration3 = moment$4.duration(data, 'seconds');
                         return duration3.days() + " day(s)";
                     }
                     return this.hmsCalculation(h, m, s, duration$1, type);
@@ -15683,6 +15779,7 @@
     /** @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 () {
@@ -15701,6 +15798,15 @@
         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 {?}
@@ -15739,7 +15845,7 @@
         // 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;
@@ -15756,6 +15862,7 @@
             this.competencyStrength = 0;
             this.competencyThemeLength = 6;
             this.showAllTheme = [{ name: 'Show all', showAll: false }];
+            this.environment = environment;
         }
         /**
          * @return {?}
@@ -15764,6 +15871,7 @@
          * @return {?}
          */
         function () {
+            this.comeptencyKeys = this.configSvc.compentency[this.environment.compentencyVersionKey];
             this.getAllCompetencies();
             // this.competencyData = this.objectData
             // this.filter(this.currentFilter)
@@ -15826,7 +15934,7 @@
                                         "lastUpdatedOn": "desc"
                                     },
                                     "facets": [
-                                        "competencies_v5.competencyArea"
+                                        this.environment.compentencyVersionKey + "." + this.comeptencyKeys.vCompetencyArea
                                     ],
                                     "limit": 0,
                                     "offset": 0,
@@ -15847,7 +15955,7 @@
                                      * @return {?}
                                      */
                                     function (fact) {
-                                        if (fact.name === 'competencies_v5.competencyArea') {
+                                        if (fact.name === _this.environment.compentencyVersionKey + "." + _this.comeptencyKeys.vCompetencyArea) {
                                             _this.competencyArea = fact.values;
                                         }
                                     }));
@@ -15966,18 +16074,16 @@
         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 {?}
                      */
@@ -16010,34 +16116,35 @@
         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;
@@ -16068,7 +16175,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_2 = _a.sent();
+                            error_2 = _b.sent();
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
                     }
@@ -16132,34 +16239,35 @@
         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;
@@ -16190,7 +16298,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_3 = _a.sent();
+                            error_3 = _b.sent();
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
                     }
@@ -16263,34 +16371,35 @@
         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;
@@ -16323,7 +16432,7 @@
                                                              * @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;
@@ -16336,7 +16445,7 @@
                             }
                             return [3 /*break*/, 4];
                         case 3:
-                            error_4 = _a.sent();
+                            error_4 = _b.sent();
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
                     }
@@ -16346,7 +16455,7 @@
         CompetencyPassbookComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -16355,7 +16464,8 @@
             { type: utilsV2.ConfigurationsService },
             { type: WidgetContentService },
             { type: CompetencyPassbookService },
-            { type: router.Router }
+            { type: router.Router },
+            { type: undefined, decorators: [{ type: core.Inject, args: ['environment',] }] }
         ]; };
         CompetencyPassbookComponent.propDecorators = {
             objectData: [{ type: core.Input }],
@@ -16409,6 +16519,10 @@
         /** @type {?} */
         CompetencyPassbookComponent.prototype.showAllTheme;
         /** @type {?} */
+        CompetencyPassbookComponent.prototype.environment;
+        /** @type {?} */
+        CompetencyPassbookComponent.prototype.comeptencyKeys;
+        /** @type {?} */
         CompetencyPassbookComponent.prototype.configSvc;
         /** @type {?} */
         CompetencyPassbookComponent.prototype.contentSvc;
@@ -16539,6 +16653,7 @@
     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
@@ -16556,6 +16671,15 @@
         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 {?}
@@ -16594,7 +16718,7 @@
         // 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;
@@ -16605,12 +16729,14 @@
             this.temeletryResponse = new core.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 {?}
@@ -16619,6 +16745,7 @@
          * @return {?}
          */
         function () {
+            this.comeptencyKeys = this.configSvc.compentency[this.environment.compentencyVersionKey];
             this.getAllCompetencies();
         };
         /**
@@ -16632,17 +16759,17 @@
             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 {?}
                      */
@@ -16688,11 +16815,11 @@
                                      * @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();
                                         }
@@ -16887,7 +17014,7 @@
         CompetencyPassbookMdoComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -16896,7 +17023,8 @@
             { type: utilsV2.ConfigurationsService },
             { type: WidgetContentService },
             { type: CompetencyPassbookMdoService },
-            { type: router.Router }
+            { type: router.Router },
+            { type: undefined, decorators: [{ type: core.Inject, args: ['environment',] }] }
         ]; };
         CompetencyPassbookMdoComponent.propDecorators = {
             objectData: [{ type: core.Input }],
@@ -16952,6 +17080,10 @@
         /** @type {?} */
         CompetencyPassbookMdoComponent.prototype.showAllTheme;
         /** @type {?} */
+        CompetencyPassbookMdoComponent.prototype.environment;
+        /** @type {?} */
+        CompetencyPassbookMdoComponent.prototype.comeptencyKeys;
+        /** @type {?} */
         CompetencyPassbookMdoComponent.prototype.configSvc;
         /** @type {?} */
         CompetencyPassbookMdoComponent.prototype.contentSvc;
@@ -18149,6 +18281,1280 @@
         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: core.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.Router },
+            { type: utilsV2.EventService }
+        ]; };
+        NationalLearningComponent.propDecorators = {
+            sectionList: [{ type: core.Input }],
+            configDetails: [{ type: core.Input }],
+            nwlConfiguration: [{ type: core.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 core.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: core.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: core.Input }],
+            formData: [{ type: core.Input }],
+            mode: [{ type: core.Input }],
+            emptyResponse: [{ type: core.Output }],
+            scrollableItems: [{ type: core.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: core.NgModule, args: [{
+                        declarations: [KeyHighlightsComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            SlidersNgContentLibModule,
+                            ScrollableItemModule
+                        ],
+                        exports: [
+                            KeyHighlightsComponent
+                        ],
+                        schemas: [core.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: core.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: core.Input }],
+            nwlEventsConfig: [{ type: core.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: core.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: core.Inject, args: ['environment',] }] },
+            { type: router.Router }
+        ]; };
+        EventCardComponent.propDecorators = {
+            objectData: [{ type: core.Input }],
+            eventDetails: [{ type: core.Input }],
+            loader: [{ type: core.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: core.NgModule, args: [{
+                        declarations: [EventsComponent, EventCardComponent],
+                        imports: [
+                            common.CommonModule,
+                            router.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 core.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: core.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: core.Input }],
+            tabClicked: [{ type: core.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: core.NgModule, args: [{
+                        declarations: [MdoLeaderboardComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            SkeletonLoaderLibModule,
+                            forms.FormsModule,
+                            material.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: core.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: core.Input }],
+            scrollableItems: [{ type: core.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: core.NgModule, args: [{
+                        declarations: [HighlightsOfWeekComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            material.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: core.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: core.Input }],
+            scrollableItems: [{ type: core.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: core.NgModule, args: [{
+                        declarations: [SpeakersComponent],
+                        imports: [
+                            common.CommonModule,
+                            ScrollableItemModule,
+                            SlidersNgContentLibModule,
+                            material.MatTooltipModule,
+                            material.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: core.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: core.Input }],
+            rootOrgId: [{ type: core.Input }],
+            scrollableItems: [{ type: core.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: core.NgModule, args: [{
+                        declarations: [UserProgressComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatTooltipModule,
+                            material.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: core.NgModule, args: [{
+                        declarations: [NationalLearningComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            material.MatChipsModule,
+                            SkeletonLoaderLibModule,
+                            SlidersLibModule,
+                            material.MatTabsModule,
+                            KeyHighlightsModule,
+                            ContentStripWithTabsLibModule,
+                            DataPointsModule,
+                            EventsModule,
+                            MdoLeaderboardModule,
+                            HighlightsOfWeekModule,
+                            SpeakersModule,
+                            UserProgressModule
+                        ],
+                        exports: [
+                            NationalLearningComponent,
+                        ],
+                        providers: [
+                            CommonMethodsService
+                        ],
+                        schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
+                    },] }
+        ];
+        return NationalLearningModule;
+    }());
+
     exports.AnnouncementsModule = AnnouncementsModule;
     exports.CalenderModule = CalenderModule;
     exports.CardsModule = CardsModule;
@@ -18165,15 +19571,22 @@
     exports.ContentStripWithTabsPillsModule = ContentStripWithTabsPillsModule;
     exports.DataPointsModule = DataPointsModule;
     exports.DialogComponentsModule = DialogComponentsModule;
+    exports.EventsModule = EventsModule;
+    exports.HighlightsOfWeekModule = HighlightsOfWeekModule;
     exports.HttpLoaderFactory = HttpLoaderFactory;
     exports.HttpLoaderFactory1 = HttpLoaderFactory1;
+    exports.KeyHighlightsModule = KeyHighlightsModule;
     exports.MDOChannelModule = MDOChannelModule;
+    exports.MdoLeaderboardModule = MdoLeaderboardModule;
     exports.MyHammerConfig = MyHammerConfig;
+    exports.NationalLearningModule = NationalLearningModule;
     exports.ProvidersModule = ProvidersModule;
     exports.ROOT_WIDGET_CONFIG = ROOT_WIDGET_CONFIG;
     exports.SlidersLibModule = SlidersLibModule;
+    exports.SpeakersModule = SpeakersModule;
     exports.TopLearnersModule = TopLearnersModule;
     exports.UserContentRatingLibModule = UserContentRatingLibModule;
+    exports.UserProgressModule = UserProgressModule;
     exports.WIDGET_REGISTERED_LIB_MODULES = WIDGET_REGISTERED_LIB_MODULES;
     exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
     exports.WidgetContentService = WidgetContentService;
@@ -18223,6 +19636,14 @@
     exports.ɵco = MdoChannelV1Component;
     exports.ɵcp = MdoChannelV2Component;
     exports.ɵcq = ProvidersV2Component;
+    exports.ɵcr = NationalLearningComponent;
+    exports.ɵcs = KeyHighlightsComponent;
+    exports.ɵct = EventsComponent;
+    exports.ɵcu = EventCardComponent;
+    exports.ɵcv = MdoLeaderboardComponent;
+    exports.ɵcw = HighlightsOfWeekComponent;
+    exports.ɵcx = SpeakersComponent;
+    exports.ɵcy = UserProgressComponent;
     exports.ɵd = ConfigurationsService;
     exports.ɵe = HorizontalScrollerV2Module;
     exports.ɵf = HorizontalScrollerV2Component;