@sunbird-cb/consumption 0.0.22 → 0.0.24

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

@@ -1744,9 +1744,22 @@
             this.configSvc = configSvc;
             this.tocConfigData = new rxjs.BehaviorSubject({});
             this.tocConfigData$ = this.tocConfigData.asObservable();
+            this.telemetryData = new rxjs.Subject();
+            this.telemetryData$ = this.telemetryData.asObservable();
             this.programChildCourseResumeData = new rxjs.BehaviorSubject({});
             this.programChildCourseResumeData$ = this.programChildCourseResumeData.asObservable();
         }
+        /**
+         * @param {?} message
+         * @return {?}
+         */
+        WidgetContentService.prototype.changeTelemetryData = /**
+         * @param {?} message
+         * @return {?}
+         */
+        function (message) {
+            this.telemetryData.next(message);
+        };
         /**
          * @param {?} primaryCategory
          * @return {?}
@@ -2705,6 +2718,13 @@
         WidgetContentService.prototype.tocConfigData;
         /** @type {?} */
         WidgetContentService.prototype.tocConfigData$;
+        /**
+         * @type {?}
+         * @private
+         */
+        WidgetContentService.prototype.telemetryData;
+        /** @type {?} */
+        WidgetContentService.prototype.telemetryData$;
         /** @type {?} */
         WidgetContentService.prototype.currentMetaData;
         /** @type {?} */
@@ -3868,6 +3888,7 @@
             _this.langtranslations = langtranslations;
             _this.emptyResponse = new core.EventEmitter();
             _this.viewAllResponse = new core.EventEmitter();
+            _this.telemtryResponse = new core.EventEmitter();
             _this.providerId = '';
             _this.emitViewAll = false;
             _this.id = "ws-strip-miltiple_" + Math.random();
@@ -3904,8 +3925,16 @@
          * @return {?}
          */
         function () {
+            var _this = this;
             // const url = window.location.href
             this.initData();
+            this.contentSvc.telemetryData$.subscribe((/**
+             * @param {?} data
+             * @return {?}
+             */
+            function (data) {
+                _this.telemtryResponse.emit(data);
+            }));
         };
         /**
          * @return {?}
@@ -4329,6 +4358,7 @@
             this.fetchAllCbpPlans(strip, calculateParentStatus);
             this.fetchAllTopContent(strip, calculateParentStatus);
             this.fetchAllFeaturedContent(strip, calculateParentStatus);
+            this.fetchAllChannela(strip, calculateParentStatus);
             // this.enrollInterval = setInterval(() => {
             //   this.fetchAllCbpPlans(strip, calculateParentStatus)
             // },                                1000)
@@ -5057,7 +5087,8 @@
                     (strip.request.cbpList && Object.keys(strip.request.cbpList).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))) {
+                    (strip.request.featureContent && Object.keys(strip.request.featureContent).length) ||
+                    (strip.request.channels && Object.keys(strip.request.channels).length))) {
                 return true;
             }
             return false;
@@ -5757,6 +5788,143 @@
                 this.router.navigate([path], { queryParams: queryParamsData });
             }
         };
+        /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.fetchAllChannela = /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, calculateParentStatus) {
+            if (calculateParentStatus === void 0) { calculateParentStatus = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var originalFilters, data, response, error_7;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(strip.request && strip.request.channels && Object.keys(strip.request.channels).length)) return [3 /*break*/, 4];
+                            originalFilters = [];
+                            if (strip.request &&
+                                strip.request.channels &&
+                                strip.request.channels.request &&
+                                strip.request.channels.request.filters) {
+                                originalFilters = strip.request.channels.request.filters;
+                                strip.request.channels.request.filters = this.postMethodFilters(strip.request.channels.request.filters);
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            data = [
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Ministry of Consumer Affairs, Food and Public Distribution',
+                                    programCount: '10',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Ministry of Railways',
+                                    programCount: '10',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Department of Post',
+                                    programCount: '10',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'NLC India Limited',
+                                    programCount: '30',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Mission Karmayogi',
+                                    programCount: '24',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Mission Karmayogi',
+                                    programCount: '50',
+                                },
+                            ];
+                            return [4 /*yield*/, data
+                                // console.log('calling  after - response, ', response)
+                            ];
+                        case 2:
+                            response = _a.sent();
+                            // console.log('calling  after - response, ', response)
+                            if (response) {
+                                this.processStrip(strip, this.transformAllContentsToWidgets(response, strip), 'done', calculateParentStatus, response);
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                this.emptyResponse.emit(true);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_7 = _a.sent();
+                            this.emptyResponse.emit(true);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * @private
+         * @param {?} contents
+         * @param {?} strip
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.transformAllContentsToWidgets = /**
+         * @private
+         * @param {?} contents
+         * @param {?} strip
+         * @return {?}
+         */
+        function (contents, strip) {
+            return (contents || []).map((/**
+             * @param {?} content
+             * @param {?} idx
+             * @return {?}
+             */
+            function (content, idx) { return (content ? {
+                widgetType: 'cardLib',
+                widgetSubType: 'cardContentLib',
+                widgetHostClass: 'mb-2',
+                widgetData: __assign({ content: content }, (content.batch && { batch: content.batch }), { cardSubType: strip.stripConfig && strip.stripConfig.cardSubType, cardCustomeClass: strip.customeClass ? strip.customeClass : '', context: { pageSection: strip.key, position: idx }, intranetMode: strip.stripConfig && strip.stripConfig.intranetMode, deletedMode: strip.stripConfig && strip.stripConfig.deletedMode, contentTags: strip.stripConfig && strip.stripConfig.contentTags }),
+            } : {
+                widgetType: 'card',
+                widgetSubType: 'cardContent',
+                widgetHostClass: 'mb-2',
+                widgetData: {},
+            }); }));
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.raiseTelemetryInteratEvent = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            this.telemtryResponse.emit(event);
+        };
         ContentStripWithTabsLibComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-content-strip-with-tabs',
@@ -5781,6 +5949,7 @@
             widgetData: [{ type: core.Input }],
             emptyResponse: [{ type: core.Output }],
             viewAllResponse: [{ type: core.Output }],
+            telemtryResponse: [{ type: core.Output }],
             providerId: [{ type: core.Input }],
             emitViewAll: [{ type: core.Input }],
             id: [{ type: core.HostBinding, args: ['id',] }]
@@ -5795,6 +5964,8 @@
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.viewAllResponse;
         /** @type {?} */
+        ContentStripWithTabsLibComponent.prototype.telemtryResponse;
+        /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.providerId;
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.emitViewAll;
@@ -6553,8 +6724,7 @@
                         "filters": {
                             "requestType": "MDO_INSIGHT",
                             "organisations": [
-                                //this.providerId
-                                "123456"
+                                this.providerId
                             ]
                         }
                     }
@@ -6583,7 +6753,7 @@
             { type: core.Component, args: [{
                         selector: 'sb-uic-data-points',
                         template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                        {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *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}.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}}"]
+                        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 */
@@ -8349,7 +8519,7 @@
         CardsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2 [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"false\" [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>",
+                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2 (contentData)=\"getRedirectUrlData($event)\"  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"false\" [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>",
                         styles: [""]
                     }] }
         ];
@@ -8434,13 +8604,13 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var CardPortraitComponent = /** @class */ (function () {
-        function CardPortraitComponent(snackBar, events, translate, langtranslations, configSvc) {
+        function CardPortraitComponent(snackBar, translate, langtranslations, configSvc, contSvc) {
             var _this = this;
             this.snackBar = snackBar;
-            this.events = events;
             this.translate = translate;
             this.langtranslations = langtranslations;
             this.configSvc = configSvc;
+            this.contSvc = contSvc;
             this.isCardLoading = false;
             this.contentData = new core.EventEmitter();
             this.isCardFlipped = false;
@@ -8501,47 +8671,23 @@
          * @return {?}
          */
         function (contentData) {
+            this.contSvc.changeTelemetryData(contentData);
             this.contentData.emit(contentData);
         };
-        /**
-         * @return {?}
-         */
-        CardPortraitComponent.prototype.raiseTelemetry = /**
-         * @return {?}
-         */
-        function () {
-            // if(this.forPreview){
-            //   return
-            // }
-            this.events.raiseInteractTelemetry({
-                type: 'click',
-                subType: this.widgetType + "-" + this.widgetSubType,
-                id: lodash.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: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
-                module: lodash.camelCase(this.widgetData.content.primaryCategory),
-            });
-        };
         CardPortraitComponent.decorators = [
             { type: core.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 = function () { return [
             { type: material.MatSnackBar },
-            { type: utilsV2.EventService },
             { type: core$1.TranslateService },
             { type: MultilingualTranslationsService },
-            { type: utilsV2.ConfigurationsService }
+            { type: utilsV2.ConfigurationsService },
+            { type: WidgetContentService }
         ]; };
         CardPortraitComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
@@ -8589,22 +8735,22 @@
          * @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;
     }
 
     /**
@@ -9058,7 +9204,7 @@
             { type: core.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 */
@@ -9820,9 +9966,19 @@
             this.translate = translate;
             this.langtranslations = langtranslations;
             this.configSvc = configSvc;
+            this.randomColorApply = false;
             this.userData = new core.EventEmitter();
             this.widgetType = '';
             this.widgetSubType = '';
+            this.randomColors = [
+                '#EF941D',
+                '#F97440',
+                '#35B5B0',
+                '#9988FF',
+                '#254092',
+                '#926525',
+                '#4F72DF'
+            ];
             this.langtranslations.languageSelectedObservable.subscribe((/**
              * @return {?}
              */
@@ -9853,6 +10009,26 @@
                 this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
                 this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
             }
+            this.setRandomColor();
+        };
+        /**
+         * @return {?}
+         */
+        CardKarmaProgramsComponent.prototype.setRandomColor = /**
+         * @return {?}
+         */
+        function () {
+            if (this.widgetData && this.widgetData.content) {
+                if (this.randomColorApply) {
+                    /** @type {?} */
+                    var randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomColors.length));
+                    this.widgetData.content['bgColor'] = this.randomColors[randomIndex1];
+                }
+                else {
+                    this.widgetData.content['bgColor'] = '#1a4ca1';
+                }
+            }
+            console.log(this.widgetData.content, this.randomColorApply);
         };
         /**
          * @return {?}
@@ -9878,11 +10054,23 @@
                 module: lodash.camelCase('user'),
             });
         };
+        Object.defineProperty(CardKarmaProgramsComponent.prototype, "getRandomColors", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomColors.length));
+                return this.randomColors[randomIndex1];
+            },
+            enumerable: true,
+            configurable: true
+        });
         CardKarmaProgramsComponent.decorators = [
             { type: core.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}"]
+                        template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\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=\"title-container\">\n                                <div class=\"flex   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  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                        </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;background:#1a4ca1;border-radius:12px}.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-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.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 */
@@ -9894,6 +10082,7 @@
         ]; };
         CardKarmaProgramsComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
+            randomColorApply: [{ type: core.Input }],
             userData: [{ type: core.Output }]
         };
         return CardKarmaProgramsComponent;
@@ -9902,6 +10091,8 @@
         /** @type {?} */
         CardKarmaProgramsComponent.prototype.widgetData;
         /** @type {?} */
+        CardKarmaProgramsComponent.prototype.randomColorApply;
+        /** @type {?} */
         CardKarmaProgramsComponent.prototype.userData;
         /** @type {?} */
         CardKarmaProgramsComponent.prototype.defaultThumbnail;
@@ -9913,6 +10104,8 @@
         CardKarmaProgramsComponent.prototype.widgetType;
         /** @type {?} */
         CardKarmaProgramsComponent.prototype.widgetSubType;
+        /** @type {?} */
+        CardKarmaProgramsComponent.prototype.randomColors;
         /**
          * @type {?}
          * @private