@sunbird-cb/consumption 0.0.1 → 0.0.3

package/fesm2015/sunbird-cb-consumption.js

@@ -17,7 +17,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import Hammer from 'hammerjs';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 /**
  * @fileoverview added by tsickle
@@ -233,7 +233,6 @@ class HorizontalScrollerV2Component {
             let cardWidth;
             /** @type {?} */
             let arrLength;
-            console.log('this.cardSubType-->', this.cardSubType);
             if (this.cardSubType !== 'card-wide-v2') {
                 cardWidth = this.cardSubType === 'standard' ? 245 :
                     ((document.getElementsByClassName(this.cardSubType) &&
@@ -1412,6 +1411,8 @@ const API_END_POINTS = {
     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',
 };
 class WidgetContentService {
     /**
@@ -2108,6 +2109,15 @@ class WidgetContentService {
         }
         return true;
     }
+    /**
+     * @param {?} apiUrl
+     * @param {?} req
+     * @return {?}
+     */
+    postApiMethod(apiUrl, req) {
+        req.query = req.query || '';
+        return this.http.post(apiUrl, req);
+    }
 }
 WidgetContentService.decorators = [
     { type: Injectable, args: [{
@@ -3192,6 +3202,8 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         this.userSvc = userSvc;
         this.translate = translate;
         this.langtranslations = langtranslations;
+        this.emptyResponse = new EventEmitter();
+        this.providerId = '';
         this.id = `ws-strip-miltiple_${Math.random()}`;
         this.stripsResultDataMap = {};
         this.stripsKeyOrder = [];
@@ -3552,6 +3564,8 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         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)
@@ -4182,7 +4196,9 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                 (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;
@@ -4588,6 +4604,156 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         if (index >= 0) { }
         return get(item, 'widgetData.content.identifier');
     }
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchAllTopContent(strip, calculateParentStatus = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (strip.request && strip.request.topContent && Object.keys(strip.request.topContent).length) {
+                /** @type {?} */
+                let 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);
+                }
+                try {
+                    /** @type {?} */
+                    const response = yield this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus);
+                    // 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);
+                    }
+                }
+                catch (error) {
+                    // Handle errors
+                    // console.error('Error:', error);
+                }
+            }
+        });
+    }
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchAllFeaturedContent(strip, calculateParentStatus = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (strip.request && strip.request.featureContent && Object.keys(strip.request.featureContent).length) {
+                /** @type {?} */
+                let 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);
+                }
+                try {
+                    /** @type {?} */
+                    const response = yield this.postRequestMethod(strip, strip.request.featureContent.request, strip.request.featureContent.path, calculateParentStatus);
+                    // 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);
+                    }
+                }
+                catch (error) {
+                    // Handle errors
+                    // console.error('Error:', error);
+                }
+            }
+        });
+    }
+    /**
+     * @param {?} strip
+     * @param {?} request
+     * @param {?} apiUrl
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    postRequestMethod(strip, request, apiUrl, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const originalFilters = [];
+            return new Promise((/**
+             * @param {?} resolve
+             * @param {?} reject
+             * @return {?}
+             */
+            (resolve, reject) => {
+                if (request && request) {
+                    this.contentSvc.postApiMethod(apiUrl, request).subscribe((/**
+                     * @param {?} results
+                     * @return {?}
+                     */
+                    results => {
+                        /** @type {?} */
+                        const showViewMore = Boolean(results.result.content && results.result.content.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                        /** @type {?} */
+                        const 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, viewMoreUrl });
+                    }), (/**
+                     * @param {?} error
+                     * @return {?}
+                     */
+                    (error) => {
+                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        reject(error);
+                    }));
+                }
+            }));
+        });
+    }
+    /**
+     * @param {?} filters
+     * @return {?}
+     */
+    postMethodFilters(filters) {
+        if (filters.organisation &&
+            filters.organisation.indexOf('<orgID>') >= 0) {
+            filters.organisation = this.providerId;
+        }
+        return filters;
+    }
 }
 ContentStripWithTabsLibComponent.decorators = [
     { type: Component, args: [{
@@ -4610,12 +4776,18 @@ ContentStripWithTabsLibComponent.ctorParameters = () => [
 ];
 ContentStripWithTabsLibComponent.propDecorators = {
     widgetData: [{ type: Input }],
+    emptyResponse: [{ type: Output }],
+    providerId: [{ type: Input }],
     id: [{ type: HostBinding, args: ['id',] }]
 };
 if (false) {
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.widgetData;
     /** @type {?} */
+    ContentStripWithTabsLibComponent.prototype.emptyResponse;
+    /** @type {?} */
+    ContentStripWithTabsLibComponent.prototype.providerId;
+    /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.id;
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.stripsResultDataMap;
@@ -5179,14 +5351,62 @@ SlidersLibModule.decorators = [
             },] }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const API_END_POINTS$2 = {
+    PROVIDER_INSIGHTS: `/apis/proxies/v8/microsite/read/insights`
+};
+class InsiteDataService {
+    /**
+     * @param {?} http
+     */
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * @param {?} request
+     * @return {?}
+     */
+    fetchSearchData(request) {
+        return this.http.post(API_END_POINTS$2.PROVIDER_INSIGHTS, request);
+    }
+}
+InsiteDataService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+InsiteDataService.ctorParameters = () => [
+    { type: HttpClient }
+];
+/** @nocollapse */ InsiteDataService.ngInjectableDef = ɵɵdefineInjectable({ factory: function InsiteDataService_Factory() { return new InsiteDataService(ɵɵinject(HttpClient)); }, token: InsiteDataService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    InsiteDataService.prototype.http;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class DataPointsComponent {
-    constructor() {
+    /**
+     * @param {?} insightSvc
+     */
+    constructor(insightSvc) {
+        this.insightSvc = insightSvc;
         this.layoutType = '';
+        this.fetchDataFromApi = false;
+        this.providerId = '';
         this.customArray = [];
+        this.isDataLoading = false;
     }
     /**
      * @return {?}
@@ -5195,6 +5415,10 @@ class DataPointsComponent {
         if (this.objectData && this.layoutType === 'gridLayout') {
             this.customArray = this.createCustomArray(this.objectData.metrics);
         }
+        if (this.fetchDataFromApi) {
+            this.isDataLoading = true;
+            this.getInsiteData();
+        }
     }
     /**
      * @param {?} arr
@@ -5208,19 +5432,56 @@ class DataPointsComponent {
         }
         return nByn;
     }
+    /**
+     * @return {?}
+     */
+    getInsiteData() {
+        /** @type {?} */
+        let request = {
+            "request": {
+                "filters": {
+                    "organisations": [
+                        this.providerId
+                    ]
+                }
+            }
+        };
+        this.insightSvc.fetchSearchData(request).subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (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 {?}
+                 */
+                (nudgeData) => {
+                    if (this.providerId && this.providerId === nudgeData.orgId) {
+                        this.objectData = nudgeData.data;
+                    }
+                }));
+            }
+            this.isDataLoading = false;
+        }));
+    }
 }
 DataPointsComponent.decorators = [
     { type: 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 = () => [];
+DataPointsComponent.ctorParameters = () => [
+    { type: InsiteDataService }
+];
 DataPointsComponent.propDecorators = {
     objectData: [{ type: Input }],
-    layoutType: [{ type: Input }]
+    layoutType: [{ type: Input }],
+    fetchDataFromApi: [{ type: Input }],
+    providerId: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -5228,9 +5489,79 @@ if (false) {
     /** @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
+ */
+class SkeletonLoaderLibComponent {
+    constructor() {
+        this.bindingClass = '';
+        this.height = '';
+        this.width = '';
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+SkeletonLoaderLibComponent.decorators = [
+    { type: 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 = () => [];
+SkeletonLoaderLibComponent.propDecorators = {
+    bindingClass: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }]
+};
+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
+ */
+class SkeletonLoaderLibModule {
+}
+SkeletonLoaderLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SkeletonLoaderLibComponent],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    MatDialogModule,
+                    MatIconModule,
+                ],
+                exports: [
+                    SkeletonLoaderLibComponent,
+                ],
+                entryComponents: [SkeletonLoaderLibComponent],
+            },] }
+];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -5241,9 +5572,11 @@ DataPointsModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [DataPointsComponent],
                 imports: [
-                    CommonModule
+                    CommonModule,
+                    SkeletonLoaderLibModule
                 ],
                 exports: [DataPointsComponent],
+                providers: [InsiteDataService]
             },] }
 ];
 
@@ -6101,68 +6434,6 @@ if (false) {
     CardUserComponent.prototype.configSvc;
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class SkeletonLoaderLibComponent {
-    constructor() {
-        this.bindingClass = '';
-        this.height = '';
-        this.width = '';
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-SkeletonLoaderLibComponent.decorators = [
-    { type: 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 = () => [];
-SkeletonLoaderLibComponent.propDecorators = {
-    bindingClass: [{ type: Input }],
-    height: [{ type: Input }],
-    width: [{ type: Input }]
-};
-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
- */
-class SkeletonLoaderLibModule {
-}
-SkeletonLoaderLibModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SkeletonLoaderLibComponent],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    MatDialogModule,
-                    MatIconModule,
-                ],
-                exports: [
-                    SkeletonLoaderLibComponent,
-                ],
-                entryComponents: [SkeletonLoaderLibComponent],
-            },] }
-];
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -6726,7 +6997,7 @@ class CompetencyPassbookComponent {
 CompetencyPassbookComponent.decorators = [
     { type: 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}"]
             }] }
 ];
@@ -6936,5 +7207,5 @@ CommonMethodsService.ctorParameters = () => [];
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { CardsModule, CommonMethodsService, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, SkeletonLoaderLibModule as ɵba, SkeletonLoaderLibComponent as ɵbb, CompetencyPassbookComponent as ɵbc, CompetencyPassbookService as ɵbd, PillsModule as ɵbe, PillsComponent as ɵbf, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, CardResourceComponent as ɵn, CardsComponent as ɵo, CardPortraitComponent as ɵp, CardUserComponent as ɵq, CardLandscapeComponent as ɵr, PipePublicURLModule as ɵs, PipePublicURL as ɵt, DisplayContentTypeLibModule as ɵu, DisplayContentTypeLibComponent as ɵv, DefaultThumbnailModule as ɵw, DefaultThumbnailDirective as ɵx, PipeDurationTransformModule as ɵy, PipeDurationTransformPipe as ɵz };
+export { CardsModule, CommonMethodsService, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, DefaultThumbnailDirective as ɵba, PipeDurationTransformModule as ɵbb, PipeDurationTransformPipe as ɵbc, CompetencyPassbookComponent as ɵbd, CompetencyPassbookService as ɵbe, PillsModule as ɵbf, PillsComponent as ɵbg, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CardResourceComponent as ɵq, CardsComponent as ɵr, CardPortraitComponent as ɵs, CardUserComponent as ɵt, CardLandscapeComponent as ɵu, PipePublicURLModule as ɵv, PipePublicURL as ɵw, DisplayContentTypeLibModule as ɵx, DisplayContentTypeLibComponent as ɵy, DefaultThumbnailModule as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map