@sunbird-cb/consumption 0.0.21 → 0.0.23

package/fesm2015/sunbird-cb-consumption.js

@@ -1,7 +1,7 @@
 import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, Pipe, ElementRef, ViewChildren } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { Router, RouterModule } from '@angular/router';
-import { fromEvent, timer, BehaviorSubject, of, EMPTY, ReplaySubject, Subject, throwError, interval } from 'rxjs';
+import { fromEvent, timer, BehaviorSubject, Subject, of, EMPTY, ReplaySubject, throwError, interval } from 'rxjs';
 import { debounceTime, throttleTime, shareReplay, retry, map, catchError, filter, distinctUntilChanged } from 'rxjs/operators';
 import { ValueService, ConfigurationsService as ConfigurationsService$1, WsEvents, LoggerService, EventService, UtilityService, MultilingualTranslationsService as MultilingualTranslationsService$1 } from '@sunbird-cb/utils-v2';
 import { MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatToolbarModule, MatTooltipModule, MatListModule, MatSidenavModule, MatCardModule, MatExpansionModule, MatRadioModule, MatChipsModule, MatInputModule, MatFormFieldModule, MatDialogModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatTableModule, MatCheckboxModule, MatButtonToggleModule, MatTabsModule, MatAutocompleteModule, MatSnackBar, MatMenuModule, MatRippleModule } from '@angular/material';
@@ -173,6 +173,17 @@ class HorizontalScrollerV2Component {
             if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
                 this.activeNav -= 1;
             }
+            else {
+                if (this.sliderConfig.arrowsAlwaysOn) {
+                    if (this.horizontalScrollElem.nativeElement.scrollLeft === 0) {
+                        this.horizontalScrollElem.nativeElement.scrollTo({
+                            left: elem.scrollWidth,
+                            behavior: 'smooth',
+                        });
+                        this.activeNav = this.bottomDotsArray.length - 1;
+                    }
+                }
+            }
         }
     }
     /**
@@ -194,6 +205,17 @@ class HorizontalScrollerV2Component {
             if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
                 this.activeNav += 1;
             }
+            else {
+                if (this.sliderConfig.arrowsAlwaysOn) {
+                    if (this.horizontalScrollElem.nativeElement.scrollLeft !== 0 && elem.clientWidth + elem.scrollLeft >= elem.scrollWidth) {
+                        this.horizontalScrollElem.nativeElement.scrollTo({
+                            left: 0,
+                            behavior: 'smooth',
+                        });
+                        this.activeNav = 0;
+                    }
+                }
+            }
         }
     }
     /**
@@ -202,6 +224,7 @@ class HorizontalScrollerV2Component {
      * @return {?}
      */
     updateNavigationBtnStatus(elem) {
+        debugger;
         this.enablePrev = true;
         this.enableNext = true;
         if (elem.scrollLeft === 0) {
@@ -1482,9 +1505,18 @@ class WidgetContentService {
         this.configSvc = configSvc;
         this.tocConfigData = new BehaviorSubject({});
         this.tocConfigData$ = this.tocConfigData.asObservable();
+        this.telemetryData = new Subject();
+        this.telemetryData$ = this.telemetryData.asObservable();
         this.programChildCourseResumeData = new BehaviorSubject({});
         this.programChildCourseResumeData$ = this.programChildCourseResumeData.asObservable();
     }
+    /**
+     * @param {?} message
+     * @return {?}
+     */
+    changeTelemetryData(message) {
+        this.telemetryData.next(message);
+    }
     /**
      * @param {?} primaryCategory
      * @return {?}
@@ -2193,6 +2225,13 @@ if (false) {
     WidgetContentService.prototype.tocConfigData;
     /** @type {?} */
     WidgetContentService.prototype.tocConfigData$;
+    /**
+     * @type {?}
+     * @private
+     */
+    WidgetContentService.prototype.telemetryData;
+    /** @type {?} */
+    WidgetContentService.prototype.telemetryData$;
     /** @type {?} */
     WidgetContentService.prototype.currentMetaData;
     /** @type {?} */
@@ -3266,6 +3305,7 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         this.langtranslations = langtranslations;
         this.emptyResponse = new EventEmitter();
         this.viewAllResponse = new EventEmitter();
+        this.telemtryResponse = new EventEmitter();
         this.providerId = '';
         this.emitViewAll = false;
         this.id = `ws-strip-miltiple_${Math.random()}`;
@@ -3300,6 +3340,13 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
     ngOnInit() {
         // const url = window.location.href
         this.initData();
+        this.contentSvc.telemetryData$.subscribe((/**
+         * @param {?} data
+         * @return {?}
+         */
+        (data) => {
+            this.telemtryResponse.emit(data);
+        }));
     }
     /**
      * @return {?}
@@ -4834,6 +4881,13 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             this.router.navigate([path], { queryParams: queryParamsData });
         }
     }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    raiseTelemetryInteratEvent(event) {
+        this.telemtryResponse.emit(event);
+    }
 }
 ContentStripWithTabsLibComponent.decorators = [
     { type: Component, args: [{
@@ -4859,6 +4913,7 @@ ContentStripWithTabsLibComponent.propDecorators = {
     widgetData: [{ type: Input }],
     emptyResponse: [{ type: Output }],
     viewAllResponse: [{ type: Output }],
+    telemtryResponse: [{ type: Output }],
     providerId: [{ type: Input }],
     emitViewAll: [{ type: Input }],
     id: [{ type: HostBinding, args: ['id',] }]
@@ -4871,6 +4926,8 @@ if (false) {
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.viewAllResponse;
     /** @type {?} */
+    ContentStripWithTabsLibComponent.prototype.telemtryResponse;
+    /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.providerId;
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.emitViewAll;
@@ -5502,6 +5559,7 @@ class DataPointsComponent {
         this.layoutType = '';
         this.fetchDataFromApi = false;
         this.providerId = '';
+        this.pageLayout = '';
         this.customArray = [];
         this.isDataLoading = false;
     }
@@ -5534,7 +5592,8 @@ class DataPointsComponent {
      */
     getInsiteData() {
         /** @type {?} */
-        let request = {
+        let request = {};
+        request = {
             "request": {
                 "filters": {
                     "organisations": [
@@ -5543,6 +5602,18 @@ class DataPointsComponent {
                 }
             }
         };
+        if (this.pageLayout && this.pageLayout === 'mdo') {
+            request = {
+                "request": {
+                    "filters": {
+                        "requestType": "MDO_INSIGHT",
+                        "organisations": [
+                            this.providerId
+                        ]
+                    }
+                }
+            };
+        }
         this.insightSvc.fetchSearchData(request).subscribe((/**
          * @param {?} res
          * @return {?}
@@ -5566,8 +5637,8 @@ class DataPointsComponent {
 DataPointsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-data-points',
-                template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                        {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *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\" [style.background]=\"obj?.background\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\"  *ngIf=\"(item && item.value)\">\n                                    {{item?.value  | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                                </div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow'\">\n    <div class=\"flex\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"singleFlexeRow-div flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div class=\"flex flex-col\">\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *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>\n",
-                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)}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@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}}"]
+                template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                        {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\"  *ngIf=\"(item && item.value)\">\n                                    {{item?.value  | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                                </div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n    <div class=\"flex\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"singleFlexeRow-div flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div class=\"flex flex-col\">\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n        <div class=\"flex\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"singleFlexeRow-div flex-item\">\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div class=\"flex flex-col\">\n                            <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n        <div class=\"flex gap-4\">\n            <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n                <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n                    <div class=\"flex flex-row gap-3\">\n                        <div>\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n                            </sb-uic-skeleton-loader>\n                        </div>\n                        <div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                            <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n                                </sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n",
+                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)}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@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 */
@@ -5578,7 +5649,8 @@ DataPointsComponent.propDecorators = {
     objectData: [{ type: Input }],
     layoutType: [{ type: Input }],
     fetchDataFromApi: [{ type: Input }],
-    providerId: [{ type: Input }]
+    providerId: [{ type: Input }],
+    pageLayout: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -5590,6 +5662,8 @@ if (false) {
     /** @type {?} */
     DataPointsComponent.prototype.providerId;
     /** @type {?} */
+    DataPointsComponent.prototype.pageLayout;
+    /** @type {?} */
     DataPointsComponent.prototype.customArray;
     /** @type {?} */
     DataPointsComponent.prototype.isDataLoading;
@@ -6867,7 +6941,7 @@ class AnnouncementsComponent {
 AnnouncementsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-announcements',
-                template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web' && !isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo \">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >\n            <div *ngFor=\"let item of objectData?.list; let i = index\">\n                <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n                    [style.borderColor]=\"objectData?.listItem?.border\"\n                    [style.backgroundColor]=\"objectData?.listItem?.background\">\n                    <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n                    <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n                    </div>\n                </div>\n            </div>                        \n        </div>        \n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n    <div class=\"flex item-center key-logo \">\n        <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            <div class=\"flex key-button gap-3\">\n                <div>\n                    <img [src]=\"objectData?.mobileIcon\">\n                </div>\n                <div>{{objectData?.title}}</div>                \n                <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n            </div>            \n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'web' && isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\" [height]=\"'35px'\">\n        </sb-uic-skeleton-loader>\n    </div>\n    <div class=\"flex item-center key-logo pt-1\">\n        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\" [height]=\"'32px'\">\n        </sb-uic-skeleton-loader>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >            \n            <div class=\"key-list-item mb-4\" \n                *ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n                [style.borderColor]=\"objectData?.listItem?.border\"\n                [style.backgroundColor]=\"objectData?.listItem?.background\">\n                <div class=\"key-list-item-content un-expand\">\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>        \n    </div>\n</div>\n",
+                template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web' && !isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >\n            <div *ngFor=\"let item of objectData?.list; let i = index\">\n                <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n                    [style.borderColor]=\"objectData?.listItem?.border\"\n                    [style.backgroundColor]=\"objectData?.listItem?.background\">\n                    <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n                    <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n                    </div>\n                </div>\n            </div>                        \n        </div>        \n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n    <div class=\"flex item-center key-logo \">\n        <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            <div class=\"flex key-button gap-3\">\n                <div>\n                    <img [src]=\"objectData?.mobileIcon\">\n                </div>\n                <div>{{objectData?.title}}</div>                \n                <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n            </div>            \n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'web' && isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo pt-1\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >            \n            <div class=\"key-list-item mb-4\" \n                *ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n                [style.borderColor]=\"objectData?.listItem?.border\"\n                [style.backgroundColor]=\"objectData?.listItem?.background\">\n                <div class=\"key-list-item-content un-expand\">\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"py-1\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n                        </sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>        \n    </div>\n</div>\n",
                 styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{max-height:600px;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
             }] }
 ];
@@ -7185,17 +7259,17 @@ if (false) {
 class CardPortraitComponent {
     /**
      * @param {?} snackBar
-     * @param {?} events
      * @param {?} translate
      * @param {?} langtranslations
      * @param {?} configSvc
+     * @param {?} contSvc
      */
-    constructor(snackBar, events, translate, langtranslations, configSvc) {
+    constructor(snackBar, translate, langtranslations, configSvc, contSvc) {
         this.snackBar = snackBar;
-        this.events = events;
         this.translate = translate;
         this.langtranslations = langtranslations;
         this.configSvc = configSvc;
+        this.contSvc = contSvc;
         this.isCardLoading = false;
         this.contentData = new EventEmitter();
         this.isCardFlipped = false;
@@ -7246,45 +7320,24 @@ class CardPortraitComponent {
      * @return {?}
      */
     getRedirectUrlData(contentData) {
+        this.contSvc.changeTelemetryData(contentData);
         this.contentData.emit(contentData);
     }
-    /**
-     * @return {?}
-     */
-    raiseTelemetry() {
-        // if(this.forPreview){
-        //   return
-        // }
-        this.events.raiseInteractTelemetry({
-            type: 'click',
-            subType: `${this.widgetType}-${this.widgetSubType}`,
-            id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
-        }, {
-            id: this.widgetData.content.identifier,
-            type: this.widgetData.content.primaryCategory,
-            //context: this.widgetData.context,
-            rollup: {},
-            ver: `${this.widgetData.content.version}${''}`,
-        }, {
-            pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
-            module: camelCase(this.widgetData.content.primaryCategory),
-        });
-    }
 }
 CardPortraitComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-portrait',
-                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n          role=\"link\" i18n-aria-label>\n    <ng-container *ngIf=\"!isCardFlipped\">\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n        matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n        matTooltip=\"Available only in Company's network\"\n        *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n      <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n        (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n        <mat-icon>flip_to_back</mat-icon>\n      </button>\n      <mat-card-content class=\"min-top\">\n        <div style=\"position: relative; z-index: 1;\">\n          <ng-container *ngIf=\"widgetData.content.posterImage\">\n            <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n            class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n            [alt]=\"widgetData.content.name\" />\n          </ng-container>\n          <ng-container *ngIf=\"!widgetData.content.posterImage\">\n            <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n              <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-template #defaultImg>\n              <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-template>\n          </ng-container>\n          <div class=\"source-div\" style=\"display: none;\">\n            <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n          </div>\n          <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n            <div class=\"cbp-mark\">\n              <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n            </div>\n          </ng-container>\n          <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n            <div class=\"cbp-mark\">\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n            </div>\n          </ng-container> -->\n          <!-- <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n            <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n              cbpData: cbPlanMapData[widgetData?.content?.identifier]\n            }}\"></ng-container>\n          </ng-container> -->\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n            </span>\n          </div>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n            </span>\n          </div>\n        </div>\n        <div class=\"padding-m\">\n          <div class=\"course_widget flex margin-remove\">\n            <div class=\"flex flex-end course_v2\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                ?'Module'\n                :widgetData.content?.primaryCategory\">\n\n              </sb-uic-display-content-type>\n            </div>\n          </div>\n          <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n            class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n            {{ widgetData.content.name }}\n          </div>\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n              <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-m\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n            </span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n            </span>\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n    </ng-container>\n    <ng-container *ngIf=\"isCardFlipped\">\n      <div class=\"flex items-center\">\n        <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n        <button mat-icon-button (click)=\"isCardFlipped = false\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <p class=\"text-justify mat-body-1\">\n        {{ widgetData.content.reason }}\n      </p>\n    </ng-container>\n      </a>\n    </ng-container>\n  </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n    <div class=\"display-contents\" >\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n            <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n              <div class=\"\">\n                <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n              <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n    </div>\n  </mat-card>\n</ng-container>",
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n          role=\"link\" i18n-aria-label>\n    <ng-container *ngIf=\"!isCardFlipped\">\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n        matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n        matTooltip=\"Available only in Company's network\"\n        *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n      <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n        (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n        <mat-icon>flip_to_back</mat-icon>\n      </button>\n      <mat-card-content class=\"min-top\">\n        <div style=\"position: relative; z-index: 1;\">\n          <ng-container *ngIf=\"widgetData.content.posterImage\">\n            <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n            class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n            [alt]=\"widgetData.content.name\" />\n          </ng-container>\n          <ng-container *ngIf=\"!widgetData.content.posterImage\">\n            <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n              <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-template #defaultImg>\n              <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-template>\n          </ng-container>\n          <div class=\"source-div\" style=\"display: none;\">\n            <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n          </div>\n          <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n            <div class=\"cbp-mark\">\n              <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n            </div>\n          </ng-container>\n          <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n            <div class=\"cbp-mark\">\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n            </div>\n          </ng-container> -->\n          <!-- <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n            <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n              cbpData: cbPlanMapData[widgetData?.content?.identifier]\n            }}\"></ng-container>\n          </ng-container> -->\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n            </span>\n          </div>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n            </span>\n          </div>\n        </div>\n        <div class=\"padding-m\">\n          <div class=\"course_widget flex margin-remove\">\n            <div class=\"flex flex-end course_v2\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                ?'Module'\n                :widgetData.content?.primaryCategory\">\n\n              </sb-uic-display-content-type>\n            </div>\n          </div>\n          <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n            class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n            {{ widgetData.content.name }}\n          </div>\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n              <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-m\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n            </span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n            </span>\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n    </ng-container>\n    <ng-container *ngIf=\"isCardFlipped\">\n      <div class=\"flex items-center\">\n        <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n        <button mat-icon-button (click)=\"isCardFlipped = false\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <p class=\"text-justify mat-body-1\">\n        {{ widgetData.content.reason }}\n      </p>\n    </ng-container>\n      </a>\n    </ng-container>\n  </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n    <div class=\"display-contents\" >\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n            <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n              <div class=\"\">\n                <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n              <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n    </div>\n  </mat-card>\n</ng-container>",
                 styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:268px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
             }] }
 ];
 /** @nocollapse */
 CardPortraitComponent.ctorParameters = () => [
     { type: MatSnackBar },
-    { type: EventService },
     { type: TranslateService },
     { type: MultilingualTranslationsService },
-    { type: ConfigurationsService$1 }
+    { type: ConfigurationsService$1 },
+    { type: WidgetContentService }
 ];
 CardPortraitComponent.propDecorators = {
     widgetData: [{ type: Input }],
@@ -7330,22 +7383,22 @@ if (false) {
      * @type {?}
      * @private
      */
-    CardPortraitComponent.prototype.events;
+    CardPortraitComponent.prototype.translate;
     /**
      * @type {?}
      * @private
      */
-    CardPortraitComponent.prototype.translate;
+    CardPortraitComponent.prototype.langtranslations;
     /**
      * @type {?}
      * @private
      */
-    CardPortraitComponent.prototype.langtranslations;
+    CardPortraitComponent.prototype.configSvc;
     /**
      * @type {?}
      * @private
      */
-    CardPortraitComponent.prototype.configSvc;
+    CardPortraitComponent.prototype.contSvc;
 }
 
 /**
@@ -7747,7 +7800,7 @@ CardUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-user',
                 template: "<mat-card class=\"user-card card-users-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div style=\"position: relative; z-index: 1;\">\n                            <ng-container *ngIf=\"widgetData.content.image\">\n                                <img mat-card-image [src]=\"widgetData.content.image\"\n                                    loading=\"lazy\" class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                    [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" [alt]=\"widgetData.content.name\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"!widgetData.content.image\">\n                                <ng-template #defaultImg>\n                                    <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                        class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                        [alt]=\"widgetData.content.name\" />\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                        <div class=\"padding-m\">\n                            <div class=\"user_widget flex margin-remove\">\n                            </div>\n                            <div [id]=\"'m-c-'+ widgetData.content?.userId\"\n                                class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                                {{ widgetData?.content?.name }}\n                            </div>\n                            <div class=\"flex w-full flex-wrap flex-middle\">\n                                <p class=\"whitespace-normal description-text mat-body-2\">\n                                    {{ widgetData?.content?.description }}\n                                </p>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
-                styles: [".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
+                styles: [".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
             }] }
 ];
 /** @nocollapse */
@@ -7852,6 +7905,10 @@ class CardLandscapeComponent {
             this.sourceLogos = instanceConfig.sources;
             this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
         }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
         this.cbPlanInterval = setInterval((/**
          * @return {?}
          */
@@ -8465,6 +8522,130 @@ if (false) {
     CardWideV2Component.prototype.configSvc;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CardKarmaProgramsComponent {
+    /**
+     * @param {?} events
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} configSvc
+     */
+    constructor(events, translate, langtranslations, configSvc) {
+        this.events = events;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.userData = new EventEmitter();
+        this.widgetType = '';
+        this.widgetSubType = '';
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        () => {
+            if (localStorage.getItem('websiteLanguage')) {
+                this.translate.setDefaultLang('en');
+                /** @type {?} */
+                const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                this.translate.use(lang);
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        /** @type {?} */
+        const instanceConfig = this.configSvc.instanceConfig;
+        if (instanceConfig) {
+            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+            this.sourceLogos = instanceConfig.sources;
+            this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
+        }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+    }
+    /**
+     * @return {?}
+     */
+    raiseTelemetry() {
+        // if(this.forPreview){
+        //   return
+        // }
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: `${this.widgetType}-${this.widgetSubType}`,
+            id: `${camelCase(this.widgetData.content.userId)}-card`,
+        }, {
+            id: this.widgetData.content.userId,
+            // type: this.widgetData.user.primaryCategory,
+            //context: this.widgetData.context,
+            rollup: {},
+        }, {
+            pageIdExt: `${camelCase('user')}-card`,
+            module: camelCase('user'),
+        });
+    }
+}
+CardKarmaProgramsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-card-karma-programs',
+                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" \n                [routerLink]=\"['/app/learn/karma-programs/asdfghj/123456/micro-sites']\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData.content.name\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData.content.posterImage\">\n                                    <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                    class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                    {{ widgetData?.content?.name }}\n                                </div>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                    class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                    {{ widgetData?.content?.programCount}} Programs\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:208px;height:208px;max-height:208px;margin:0 8px;background:#1a4ca1!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:124px;max-height:124px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]
+            }] }
+];
+/** @nocollapse */
+CardKarmaProgramsComponent.ctorParameters = () => [
+    { type: EventService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService$1 },
+    { type: ConfigurationsService$1 }
+];
+CardKarmaProgramsComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    userData: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.widgetData;
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.userData;
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.defaultThumbnail;
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.sourceLogos;
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.defaultSLogo;
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.widgetType;
+    /** @type {?} */
+    CardKarmaProgramsComponent.prototype.widgetSubType;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.configSvc;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -8480,7 +8661,8 @@ CardsModule.decorators = [
                     CardLandscapeComponent,
                     CardWideComponent,
                     CardMDOChannelComponent,
-                    CardWideV2Component
+                    CardWideV2Component,
+                    CardKarmaProgramsComponent
                 ],
                 imports: [
                     CommonModule,
@@ -8504,7 +8686,8 @@ CardsModule.decorators = [
                     CardUserComponent,
                     CardWideComponent,
                     CardMDOChannelComponent,
-                    CardWideV2Component
+                    CardWideV2Component,
+                    CardKarmaProgramsComponent
                 ],
             },] }
 ];
@@ -9908,5 +10091,5 @@ UserContentRatingLibModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, PipePublicURLModule as ɵbb, PipePublicURL as ɵbc, DisplayContentTypeLibModule as ɵbd, DisplayContentTypeLibComponent as ɵbe, DefaultThumbnailModule as ɵbf, DefaultThumbnailDirective as ɵbg, PipeDurationTransformModule as ɵbh, PipeDurationTransformPipe as ɵbi, CompetencyPassbookComponent as ɵbj, CompetencyPassbookService as ɵbk, PillsModule as ɵbl, PillsComponent as ɵbm, UserContentRatingLibComponent as ɵbn, ScrollableItemDirective as ɵbo, RatingService as ɵbp, UserContentRatingLibService as ɵbq, AvatarPhotoLibModule as ɵbr, AvatarPhotoLibComponent as ɵbs, MyHammerConfig$1 as ɵbt, SlidersNgContentLibModule as ɵbu, SlidersNgContentLibComponent as ɵbv, ScrollableItemModule as ɵbw, MultilingualTranslationsService as ɵc, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
+export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, CardKarmaProgramsComponent as ɵbb, PipePublicURLModule as ɵbc, PipePublicURL as ɵbd, DisplayContentTypeLibModule as ɵbe, DisplayContentTypeLibComponent as ɵbf, DefaultThumbnailModule as ɵbg, DefaultThumbnailDirective as ɵbh, PipeDurationTransformModule as ɵbi, PipeDurationTransformPipe as ɵbj, CompetencyPassbookComponent as ɵbk, CompetencyPassbookService as ɵbl, PillsModule as ɵbm, PillsComponent as ɵbn, UserContentRatingLibComponent as ɵbo, ScrollableItemDirective as ɵbp, RatingService as ɵbq, UserContentRatingLibService as ɵbr, AvatarPhotoLibModule as ɵbs, AvatarPhotoLibComponent as ɵbt, MyHammerConfig$1 as ɵbu, SlidersNgContentLibModule as ɵbv, SlidersNgContentLibComponent as ɵbw, ScrollableItemModule as ɵbx, MultilingualTranslationsService as ɵc, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map