@sunbird-cb/consumption 0.0.1 → 0.0.3

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

@@ -472,7 +472,6 @@
                 var cardWidth = void 0;
                 /** @type {?} */
                 var arrLength_1;
-                console.log('this.cardSubType-->', this.cardSubType);
                 if (this.cardSubType !== 'card-wide-v2') {
                     cardWidth = this.cardSubType === 'standard' ? 245 :
                         ((document.getElementsByClassName(this.cardSubType) &&
@@ -1658,6 +1657,8 @@
         READ_COURSE_KARMAPOINTS: '/apis/proxies/v8/karmapoints/user/course/read',
         CLAIM_KARMAPOINTS: '/apis/proxies/v8/claimkarmapoints',
         USER_KARMA_POINTS: '/apis/proxies/v8/user/totalkarmapoints',
+        AGGREGATION_SEARCH: '/apis/proxies/v8/content/aggregation/search',
+        FEATURE_SEARCH: '/apis/proxies/v8/featured/content/search',
     };
     var WidgetContentService = /** @class */ (function () {
         function WidgetContentService(http, configSvc) {
@@ -2594,6 +2595,20 @@
             }
             return true;
         };
+        /**
+         * @param {?} apiUrl
+         * @param {?} req
+         * @return {?}
+         */
+        WidgetContentService.prototype.postApiMethod = /**
+         * @param {?} apiUrl
+         * @param {?} req
+         * @return {?}
+         */
+        function (apiUrl, req) {
+            req.query = req.query || '';
+            return this.http.post(apiUrl, req);
+        };
         WidgetContentService.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root',
@@ -3770,6 +3785,8 @@
             _this.userSvc = userSvc;
             _this.translate = translate;
             _this.langtranslations = langtranslations;
+            _this.emptyResponse = new core.EventEmitter();
+            _this.providerId = '';
             _this.id = "ws-strip-miltiple_" + Math.random();
             _this.stripsResultDataMap = {};
             _this.stripsKeyOrder = [];
@@ -4227,6 +4244,8 @@
             this.fetchFromSearchV6(strip, calculateParentStatus);
             this.fetchFromTrendingContent(strip, calculateParentStatus);
             this.fetchAllCbpPlans(strip, calculateParentStatus);
+            this.fetchAllTopContent(strip, calculateParentStatus);
+            this.fetchAllFeaturedContent(strip, calculateParentStatus);
             // this.enrollInterval = setInterval(() => {
             //   this.fetchAllCbpPlans(strip, calculateParentStatus)
             // },                                1000)
@@ -4953,7 +4972,9 @@
                     (strip.request.searchV6 && Object.keys(strip.request.searchV6).length) ||
                     (strip.request.enrollmentList && Object.keys(strip.request.enrollmentList).length) ||
                     (strip.request.cbpList && Object.keys(strip.request.cbpList).length) ||
-                    (strip.request.trendingSearch && Object.keys(strip.request.trendingSearch).length))) {
+                    (strip.request.trendingSearch && Object.keys(strip.request.trendingSearch).length) ||
+                    (strip.request.topContent && Object.keys(strip.request.topContent).length) ||
+                    (strip.request.featureContent && Object.keys(strip.request.featureContent).length))) {
                 return true;
             }
             return false;
@@ -5441,6 +5462,196 @@
             if (index >= 0) { }
             return lodash.get(item, 'widgetData.content.identifier');
         };
+        /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.fetchAllTopContent = /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, calculateParentStatus) {
+            if (calculateParentStatus === void 0) { calculateParentStatus = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var originalFilters, response, error_5;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(strip.request && strip.request.topContent && Object.keys(strip.request.topContent).length)) return [3 /*break*/, 4];
+                            originalFilters = [];
+                            if (strip.request &&
+                                strip.request.topContent &&
+                                strip.request.topContent.request &&
+                                strip.request.topContent.request.filters) {
+                                originalFilters = strip.request.topContent.request.filters;
+                                strip.request.topContent.request.filters = this.postMethodFilters(strip.request.topContent.request.filters);
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus)];
+                        case 2:
+                            response = _a.sent();
+                            // console.log('calling  after - response, ', response)
+                            if (response && response.results) {
+                                // console.log('calling  after-- ')
+                                if (response.results.result.content) {
+                                    this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
+                                }
+                                else {
+                                    this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                    this.emptyResponse.emit(true);
+                                }
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                this.emptyResponse.emit(true);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_5 = _a.sent();
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.fetchAllFeaturedContent = /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, calculateParentStatus) {
+            if (calculateParentStatus === void 0) { calculateParentStatus = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var originalFilters, response, error_6;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(strip.request && strip.request.featureContent && Object.keys(strip.request.featureContent).length)) return [3 /*break*/, 4];
+                            originalFilters = [];
+                            if (strip.request &&
+                                strip.request.featureContent &&
+                                strip.request.featureContent.request &&
+                                strip.request.featureContent.request.filters) {
+                                originalFilters = strip.request.featureContent.request.filters;
+                                strip.request.featureContent.request.filters = this.checkForDateFilters(strip.request.featureContent.request.filters);
+                                strip.request.featureContent.request.filters = this.getFiltersFromArray(strip.request.featureContent.request.filters);
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.postRequestMethod(strip, strip.request.featureContent.request, strip.request.featureContent.path, calculateParentStatus)];
+                        case 2:
+                            response = _a.sent();
+                            // console.log('calling  after - response, ', response)
+                            if (response && response.results) {
+                                // console.log('calling  after-- ')
+                                if (response.results.result.content) {
+                                    this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
+                                }
+                                else {
+                                    this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                }
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_6 = _a.sent();
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * @param {?} strip
+         * @param {?} request
+         * @param {?} apiUrl
+         * @param {?} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.postRequestMethod = /**
+         * @param {?} strip
+         * @param {?} request
+         * @param {?} apiUrl
+         * @param {?} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, request, apiUrl, calculateParentStatus) {
+            return __awaiter(this, void 0, void 0, function () {
+                var originalFilters;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    originalFilters = [];
+                    return [2 /*return*/, new Promise((/**
+                         * @param {?} resolve
+                         * @param {?} reject
+                         * @return {?}
+                         */
+                        function (resolve, reject) {
+                            if (request && request) {
+                                _this.contentSvc.postApiMethod(apiUrl, request).subscribe((/**
+                                 * @param {?} results
+                                 * @return {?}
+                                 */
+                                function (results) {
+                                    /** @type {?} */
+                                    var showViewMore = Boolean(results.result.content && results.result.content.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                                    /** @type {?} */
+                                    var viewMoreUrl = showViewMore
+                                        ? {
+                                            path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
+                                            queryParams: {
+                                                tab: 'Learn',
+                                                q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
+                                                f: request &&
+                                                    request.searchV6 &&
+                                                    request.searchV6.request &&
+                                                    request.searchV6.request.filters
+                                                    ? JSON.stringify(_this.transformSearchV6FiltersV2(originalFilters))
+                                                    : {},
+                                            },
+                                        }
+                                        : null;
+                                    resolve({ results: results, viewMoreUrl: viewMoreUrl });
+                                }), (/**
+                                 * @param {?} error
+                                 * @return {?}
+                                 */
+                                function (error) {
+                                    _this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                    reject(error);
+                                }));
+                            }
+                        }))];
+                });
+            });
+        };
+        /**
+         * @param {?} filters
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.postMethodFilters = /**
+         * @param {?} filters
+         * @return {?}
+         */
+        function (filters) {
+            if (filters.organisation &&
+                filters.organisation.indexOf('<orgID>') >= 0) {
+                filters.organisation = this.providerId;
+            }
+            return filters;
+        };
         ContentStripWithTabsLibComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-content-strip-with-tabs',
@@ -5462,6 +5673,8 @@
         ]; };
         ContentStripWithTabsLibComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
+            emptyResponse: [{ type: core.Output }],
+            providerId: [{ type: core.Input }],
             id: [{ type: core.HostBinding, args: ['id',] }]
         };
         return ContentStripWithTabsLibComponent;
@@ -5470,6 +5683,10 @@
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.widgetData;
         /** @type {?} */
+        ContentStripWithTabsLibComponent.prototype.emptyResponse;
+        /** @type {?} */
+        ContentStripWithTabsLibComponent.prototype.providerId;
+        /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.id;
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.stripsResultDataMap;
@@ -6097,14 +6314,61 @@
         return SlidersLibModule;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @type {?} */
+    var API_END_POINTS$2 = {
+        PROVIDER_INSIGHTS: "/apis/proxies/v8/microsite/read/insights"
+    };
+    var InsiteDataService = /** @class */ (function () {
+        function InsiteDataService(http) {
+            this.http = http;
+        }
+        /**
+         * @param {?} request
+         * @return {?}
+         */
+        InsiteDataService.prototype.fetchSearchData = /**
+         * @param {?} request
+         * @return {?}
+         */
+        function (request) {
+            return this.http.post(API_END_POINTS$2.PROVIDER_INSIGHTS, request);
+        };
+        InsiteDataService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        InsiteDataService.ctorParameters = function () { return [
+            { type: http.HttpClient }
+        ]; };
+        /** @nocollapse */ InsiteDataService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InsiteDataService_Factory() { return new InsiteDataService(core.ɵɵinject(http.HttpClient)); }, token: InsiteDataService, providedIn: "root" });
+        return InsiteDataService;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        InsiteDataService.prototype.http;
+    }
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var DataPointsComponent = /** @class */ (function () {
-        function DataPointsComponent() {
+        function DataPointsComponent(insightSvc) {
+            this.insightSvc = insightSvc;
             this.layoutType = '';
+            this.fetchDataFromApi = false;
+            this.providerId = '';
             this.customArray = [];
+            this.isDataLoading = false;
         }
         /**
          * @return {?}
@@ -6116,6 +6380,10 @@
             if (this.objectData && this.layoutType === 'gridLayout') {
                 this.customArray = this.createCustomArray(this.objectData.metrics);
             }
+            if (this.fetchDataFromApi) {
+                this.isDataLoading = true;
+                this.getInsiteData();
+            }
         };
         /**
          * @param {?} arr
@@ -6133,18 +6401,59 @@
             }
             return nByn;
         };
+        /**
+         * @return {?}
+         */
+        DataPointsComponent.prototype.getInsiteData = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            /** @type {?} */
+            var request = {
+                "request": {
+                    "filters": {
+                        "organisations": [
+                            this.providerId
+                        ]
+                    }
+                }
+            };
+            this.insightSvc.fetchSearchData(request).subscribe((/**
+             * @param {?} res
+             * @return {?}
+             */
+            function (res) {
+                if (res && res.result && res.result.response && res.result.response.nudges && res.result.response.nudges.length) {
+                    res.result.response.nudges.forEach((/**
+                     * @param {?} nudgeData
+                     * @return {?}
+                     */
+                    function (nudgeData) {
+                        if (_this.providerId && _this.providerId === nudgeData.orgId) {
+                            _this.objectData = nudgeData.data;
+                        }
+                    }));
+                }
+                _this.isDataLoading = false;
+            }));
+        };
         DataPointsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-data-points',
-                        template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows'\">\n    <div *ngFor=\"let obj of objectData\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak}\">\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\" >{{obj?.value}}</div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\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\">\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\">{{obj?.value}}</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\">{{item?.value}}</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>",
+                        template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak}\">\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\" >{{obj?.value | number: '1.1-2'}}</div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\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\">\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\">{{obj?.value  | number: '1.1-2'}}</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\">{{item?.value}}</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\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>",
                         styles: [".white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.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}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}"]
                     }] }
         ];
         /** @nocollapse */
-        DataPointsComponent.ctorParameters = function () { return []; };
+        DataPointsComponent.ctorParameters = function () { return [
+            { type: InsiteDataService }
+        ]; };
         DataPointsComponent.propDecorators = {
             objectData: [{ type: core.Input }],
-            layoutType: [{ type: core.Input }]
+            layoutType: [{ type: core.Input }],
+            fetchDataFromApi: [{ type: core.Input }],
+            providerId: [{ type: core.Input }]
         };
         return DataPointsComponent;
     }());
@@ -6154,9 +6463,86 @@
         /** @type {?} */
         DataPointsComponent.prototype.layoutType;
         /** @type {?} */
+        DataPointsComponent.prototype.fetchDataFromApi;
+        /** @type {?} */
+        DataPointsComponent.prototype.providerId;
+        /** @type {?} */
         DataPointsComponent.prototype.customArray;
+        /** @type {?} */
+        DataPointsComponent.prototype.isDataLoading;
+        /** @type {?} */
+        DataPointsComponent.prototype.insightSvc;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SkeletonLoaderLibComponent = /** @class */ (function () {
+        function SkeletonLoaderLibComponent() {
+            this.bindingClass = '';
+            this.height = '';
+            this.width = '';
+        }
+        /**
+         * @return {?}
+         */
+        SkeletonLoaderLibComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        SkeletonLoaderLibComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-skeleton-loader',
+                        template: "<div [ngClass]=\"bindingClass\" class=\"skeleton-box\" [style.height]=\"height\" [style.width]=\"width\"></div>",
+                        styles: [".skeleton-box{position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:1s infinite shimmer;content:\"\"}@keyframes shimmer{100%{transform:translateX(100%)}}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        SkeletonLoaderLibComponent.ctorParameters = function () { return []; };
+        SkeletonLoaderLibComponent.propDecorators = {
+            bindingClass: [{ type: core.Input }],
+            height: [{ type: core.Input }],
+            width: [{ type: core.Input }]
+        };
+        return SkeletonLoaderLibComponent;
+    }());
+    if (false) {
+        /** @type {?} */
+        SkeletonLoaderLibComponent.prototype.bindingClass;
+        /** @type {?} */
+        SkeletonLoaderLibComponent.prototype.height;
+        /** @type {?} */
+        SkeletonLoaderLibComponent.prototype.width;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SkeletonLoaderLibModule = /** @class */ (function () {
+        function SkeletonLoaderLibModule() {
+        }
+        SkeletonLoaderLibModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [SkeletonLoaderLibComponent],
+                        imports: [
+                            common.CommonModule,
+                            forms.FormsModule,
+                            forms.ReactiveFormsModule,
+                            material.MatDialogModule,
+                            material.MatIconModule,
+                        ],
+                        exports: [
+                            SkeletonLoaderLibComponent,
+                        ],
+                        entryComponents: [SkeletonLoaderLibComponent],
+                    },] }
+        ];
+        return SkeletonLoaderLibModule;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -6168,9 +6554,11 @@
             { type: core.NgModule, args: [{
                         declarations: [DataPointsComponent],
                         imports: [
-                            common.CommonModule
+                            common.CommonModule,
+                            SkeletonLoaderLibModule
                         ],
                         exports: [DataPointsComponent],
+                        providers: [InsiteDataService]
                     },] }
         ];
         return DataPointsModule;
@@ -7119,75 +7507,6 @@
         CardUserComponent.prototype.configSvc;
     }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var SkeletonLoaderLibComponent = /** @class */ (function () {
-        function SkeletonLoaderLibComponent() {
-            this.bindingClass = '';
-            this.height = '';
-            this.width = '';
-        }
-        /**
-         * @return {?}
-         */
-        SkeletonLoaderLibComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-        };
-        SkeletonLoaderLibComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'sb-uic-skeleton-loader',
-                        template: "<div [ngClass]=\"bindingClass\" class=\"skeleton-box\" [style.height]=\"height\" [style.width]=\"width\"></div>",
-                        styles: [".skeleton-box{position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:1s infinite shimmer;content:\"\"}@keyframes shimmer{100%{transform:translateX(100%)}}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        SkeletonLoaderLibComponent.ctorParameters = function () { return []; };
-        SkeletonLoaderLibComponent.propDecorators = {
-            bindingClass: [{ type: core.Input }],
-            height: [{ type: core.Input }],
-            width: [{ type: core.Input }]
-        };
-        return SkeletonLoaderLibComponent;
-    }());
-    if (false) {
-        /** @type {?} */
-        SkeletonLoaderLibComponent.prototype.bindingClass;
-        /** @type {?} */
-        SkeletonLoaderLibComponent.prototype.height;
-        /** @type {?} */
-        SkeletonLoaderLibComponent.prototype.width;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var SkeletonLoaderLibModule = /** @class */ (function () {
-        function SkeletonLoaderLibModule() {
-        }
-        SkeletonLoaderLibModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [SkeletonLoaderLibComponent],
-                        imports: [
-                            common.CommonModule,
-                            forms.FormsModule,
-                            forms.ReactiveFormsModule,
-                            material.MatDialogModule,
-                            material.MatIconModule,
-                        ],
-                        exports: [
-                            SkeletonLoaderLibComponent,
-                        ],
-                        entryComponents: [SkeletonLoaderLibComponent],
-                    },] }
-        ];
-        return SkeletonLoaderLibModule;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7836,7 +8155,7 @@
         CompetencyPassbookComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-competency-passbook',
-                        template: " <div class=\"competency-title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" \n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div *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\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" (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-3 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\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" \n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div *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\" (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-3 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}"]
                     }] }
         ];
@@ -8079,12 +8398,13 @@
     exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
     exports.ɵa = ContentStripWithTabsLibComponent;
     exports.ɵb = WidgetContentService;
-    exports.ɵba = SkeletonLoaderLibModule;
-    exports.ɵbb = SkeletonLoaderLibComponent;
-    exports.ɵbc = CompetencyPassbookComponent;
-    exports.ɵbd = CompetencyPassbookService;
-    exports.ɵbe = PillsModule;
-    exports.ɵbf = PillsComponent;
+    exports.ɵba = DefaultThumbnailDirective;
+    exports.ɵbb = PipeDurationTransformModule;
+    exports.ɵbc = PipeDurationTransformPipe;
+    exports.ɵbd = CompetencyPassbookComponent;
+    exports.ɵbe = CompetencyPassbookService;
+    exports.ɵbf = PillsModule;
+    exports.ɵbg = PillsComponent;
     exports.ɵc = WidgetUserService;
     exports.ɵd = MultilingualTranslationsService;
     exports.ɵe = ConfigurationsService;
@@ -8096,19 +8416,19 @@
     exports.ɵk = ImageResponsiveModule;
     exports.ɵl = ImageResponsiveDirective;
     exports.ɵm = DataPointsComponent;
-    exports.ɵn = CardResourceComponent;
-    exports.ɵo = CardsComponent;
-    exports.ɵp = CardPortraitComponent;
-    exports.ɵq = CardUserComponent;
-    exports.ɵr = CardLandscapeComponent;
-    exports.ɵs = PipePublicURLModule;
-    exports.ɵt = PipePublicURL;
-    exports.ɵu = DisplayContentTypeLibModule;
-    exports.ɵv = DisplayContentTypeLibComponent;
-    exports.ɵw = DefaultThumbnailModule;
-    exports.ɵx = DefaultThumbnailDirective;
-    exports.ɵy = PipeDurationTransformModule;
-    exports.ɵz = PipeDurationTransformPipe;
+    exports.ɵn = InsiteDataService;
+    exports.ɵo = SkeletonLoaderLibModule;
+    exports.ɵp = SkeletonLoaderLibComponent;
+    exports.ɵq = CardResourceComponent;
+    exports.ɵr = CardsComponent;
+    exports.ɵs = CardPortraitComponent;
+    exports.ɵt = CardUserComponent;
+    exports.ɵu = CardLandscapeComponent;
+    exports.ɵv = PipePublicURLModule;
+    exports.ɵw = PipePublicURL;
+    exports.ɵx = DisplayContentTypeLibModule;
+    exports.ɵy = DisplayContentTypeLibComponent;
+    exports.ɵz = DefaultThumbnailModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });