@sunbird-cb/consumption 0.0.26 → 0.0.28

package/fesm5/sunbird-cb-consumption.js

@@ -246,7 +246,6 @@ var HorizontalScrollerV2Component = /** @class */ (function () {
      * @return {?}
      */
     function (elem) {
-        debugger;
         this.enablePrev = true;
         this.enableNext = true;
         if (elem.scrollLeft === 0) {
@@ -255,14 +254,29 @@ var HorizontalScrollerV2Component = /** @class */ (function () {
             }
             this.activeNav = 0;
         }
-        if (elem.scrollWidth === Math.round(elem.clientWidth + elem.scrollLeft)) {
+        // if (elem.scrollWidth === Math.round(elem.clientWidth + elem.scrollLeft)) {
+        //   if (this.loadStatus === 'hasMore') {
+        //     this.loadNext.emit();
+        //   } else {
+        //     if(!this.sliderConfig.arrowsAlwaysOn) {
+        //       this.enableNext = false;
+        //     }
+        //     if (this.bottomDotsArray.length) {
+        //       this.activeNav = this.bottomDotsArray.length - 1;
+        //     }
+        //   }
+        // }
+        // if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
+        //   this.activeNav = Math.ceil(elem.scrollLeft / elem.clientWidth);
+        // }
+        /** @type {?} */
+        var widthDiff = Math.abs(elem.scrollWidth - Math.round(elem.clientWidth + elem.scrollLeft));
+        if (widthDiff === 0 || widthDiff === 1) {
             if (this.loadStatus === 'hasMore') {
                 this.loadNext.emit();
             }
             else {
-                if (!this.sliderConfig.arrowsAlwaysOn) {
-                    this.enableNext = false;
-                }
+                this.enableNext = false;
                 if (this.bottomDotsArray.length) {
                     this.activeNav = this.bottomDotsArray.length - 1;
                 }
@@ -2494,6 +2508,18 @@ var WidgetContentService = /** @class */ (function () {
         req.query = req.query || '';
         return this.http.post(apiUrl, req);
     };
+    /**
+     * @param {?} apiUrl
+     * @return {?}
+     */
+    WidgetContentService.prototype.getApiMethod = /**
+     * @param {?} apiUrl
+     * @return {?}
+     */
+    function (apiUrl) {
+        // req.query = req.query || '';
+        return this.http.get(apiUrl);
+    };
     WidgetContentService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root',
@@ -3709,7 +3735,6 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
             _this.translate.use(lang);
         }
         _this.environment = environment;
-        console.log('plugin');
         return _this;
     }
     /**
@@ -4121,10 +4146,15 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
         }
         else if (filters.organisation &&
             filters.organisation.indexOf('<orgID>') >= 0) {
-            filters.organisation = userData && userData.rootOrgId;
-            if (filters && filters.hasOwnProperty('designation')) {
-                filters.designation = userData.professionalDetails.length > 0 ?
-                    userData.professionalDetails[0].designation : '';
+            if (this.providerId) {
+                filters.organisation = this.providerId;
+            }
+            else {
+                filters.organisation = userData && userData.rootOrgId;
+                if (filters && filters.hasOwnProperty('designation')) {
+                    filters.designation = userData.professionalDetails.length > 0 ?
+                        userData.professionalDetails[0].designation : '';
+                }
             }
         }
         return filters;
@@ -4152,7 +4182,9 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
         this.fetchAllCbpPlans(strip, calculateParentStatus);
         this.fetchAllTopContent(strip, calculateParentStatus);
         this.fetchAllFeaturedContent(strip, calculateParentStatus);
-        this.fetchAllChannela(strip, calculateParentStatus);
+        this.fetchAllBookMarkData(strip, calculateParentStatus);
+        this.fetchAllPlaylistSearch(strip, calculateParentStatus);
+        this.fetchPlaylistReadData(strip, calculateParentStatus);
         // this.enrollInterval = setInterval(() => {
         //   this.fetchAllCbpPlans(strip, calculateParentStatus)
         // },                                1000)
@@ -4882,7 +4914,9 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
                 (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.channels && Object.keys(strip.request.channels).length))) {
+                (strip.request.bookmarkRead && Object.keys(strip.request.bookmarkRead).length) ||
+                (strip.request.playlistSearch && Object.keys(strip.request.playlistSearch).length) ||
+                (strip.request.playlistRead && Object.keys(strip.request.playlistRead).length))) {
             return true;
         }
         return false;
@@ -5558,6 +5592,61 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * @param {?} strip
+     * @param {?} request
+     * @param {?} apiUrl
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    ContentStripWithTabsLibComponent.prototype.getRequestMethod = /**
+     * @param {?} strip
+     * @param {?} request
+     * @param {?} apiUrl
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    function (strip, request, apiUrl, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function () {
+            var originalFilters;
+            var _this = this;
+            return __generator(this, function (_a) {
+                originalFilters = [];
+                return [2 /*return*/, new Promise((/**
+                     * @param {?} resolve
+                     * @param {?} reject
+                     * @return {?}
+                     */
+                    function (resolve, reject) {
+                        if (request && request) {
+                            _this.contentSvc.getApiMethod(apiUrl).subscribe((/**
+                             * @param {?} results
+                             * @return {?}
+                             */
+                            function (results) {
+                                console.log(results, 'results=========');
+                                /** @type {?} */
+                                var showViewMore = Boolean(results.result.data && results.result.data.orgList.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                                /** @type {?} */
+                                var viewMoreUrl = showViewMore
+                                    ? {
+                                        path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
+                                    }
+                                    : null;
+                                resolve({ results: results, viewMoreUrl: viewMoreUrl });
+                            }), (/**
+                             * @param {?} error
+                             * @return {?}
+                             */
+                            function (error) {
+                                _this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                reject(error);
+                            }));
+                        }
+                    }))];
+            });
+        });
+    };
     /**
      * @param {?} filters
      * @return {?}
@@ -5573,6 +5662,28 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
         }
         return filters;
     };
+    /**
+     * @param {?} apiUrl
+     * @param {?} id
+     * @return {?}
+     */
+    ContentStripWithTabsLibComponent.prototype.getFullUrl = /**
+     * @param {?} apiUrl
+     * @param {?} id
+     * @return {?}
+     */
+    function (apiUrl, id) {
+        /** @type {?} */
+        var formedUrl = '';
+        if (apiUrl.indexOf('<bookmarkId>') >= 0) {
+            formedUrl = apiUrl.replace('<bookmarkId>', this.environment.mdoChannelsBookmarkId);
+        }
+        else if (apiUrl.indexOf('<playlistKey>') >= 0 && apiUrl.indexOf('<orgID>') >= 0) {
+            formedUrl = apiUrl.replace('<playlistKey>', this.providerId + id);
+            formedUrl = formedUrl.replace('<orgID>', this.providerId);
+        }
+        return formedUrl;
+    };
     /**
      * @param {?} stripData
      * @param {?} path
@@ -5598,7 +5709,7 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
      * @param {?=} calculateParentStatus
      * @return {?}
      */
-    ContentStripWithTabsLibComponent.prototype.fetchAllChannela = /**
+    ContentStripWithTabsLibComponent.prototype.fetchAllBookMarkData = /**
      * @param {?} strip
      * @param {?=} calculateParentStatus
      * @return {?}
@@ -5606,74 +5717,27 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
     function (strip, calculateParentStatus) {
         if (calculateParentStatus === void 0) { calculateParentStatus = true; }
         return __awaiter(this, void 0, void 0, function () {
-            var originalFilters, data, response, error_7;
+            var originalFilters, response, content, 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];
+                        if (!(strip.request && strip.request.bookmarkRead && Object.keys(strip.request.bookmarkRead).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);
+                            strip.request.bookmarkRead &&
+                            strip.request.bookmarkRead.bookmarkId) {
+                            strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.bookmarkRead.bookmarkId);
                         }
                         _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)
-                        ];
+                        return [4 /*yield*/, this.getRequestMethod(strip, strip.request.bookmarkRead, strip.request.apiUrl, calculateParentStatus)];
                     case 2:
                         response = _a.sent();
-                        // console.log('calling  after - response, ', response)
+                        console.log('calling  after - response, ', response);
+                        content = response.results.result.data.orgList;
                         if (response) {
-                            this.processStrip(strip, this.transformAllContentsToWidgets(response, strip), 'done', calculateParentStatus, response);
+                            this.processStrip(strip, this.transformAllContentsToWidgets(content, strip), 'done', calculateParentStatus, response);
                         }
                         else {
                             this.processStrip(strip, [], 'error', calculateParentStatus, null);
@@ -5719,6 +5783,112 @@ var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
             widgetData: {},
         }); }));
     };
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    ContentStripWithTabsLibComponent.prototype.fetchAllPlaylistSearch = /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    function (strip, calculateParentStatus) {
+        if (calculateParentStatus === void 0) { calculateParentStatus = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var originalFilters, response, error_8;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(strip.request && strip.request.playlistSearch && Object.keys(strip.request.playlistSearch).length)) return [3 /*break*/, 4];
+                        originalFilters = [];
+                        if (strip.request &&
+                            strip.request.playlistSearch &&
+                            strip.request.playlistSearch.request &&
+                            strip.request.playlistSearch.request.filters) {
+                            originalFilters = strip.request.playlistSearch.request.filters;
+                            strip.request.playlistSearch.request.filters = this.postMethodFilters(strip.request.playlistSearch.request.filters);
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.postRequestMethod(strip, strip.request.playlistSearch.request, strip.request.apiUrl, calculateParentStatus)];
+                    case 2:
+                        response = _a.sent();
+                        // console.log('calling  after - response, ', response)
+                        if (response && response.results) {
+                            // console.log('calling  after-- ')
+                            if (response.results.result.data && response.results.result.data.length) {
+                                this.processStrip(strip, this.transformContentsToWidgets(response.results.result.data, strip), 'done', calculateParentStatus, response.viewMoreUrl);
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                this.emptyResponse.emit(true);
+                            }
+                        }
+                        else {
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            this.emptyResponse.emit(true);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_8 = _a.sent();
+                        this.emptyResponse.emit(true);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    ContentStripWithTabsLibComponent.prototype.fetchPlaylistReadData = /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    function (strip, calculateParentStatus) {
+        if (calculateParentStatus === void 0) { calculateParentStatus = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var originalFilters, response, content, error_9;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(strip.request && strip.request.playlistRead && Object.keys(strip.request.playlistRead).length)) return [3 /*break*/, 4];
+                        originalFilters = [];
+                        if (strip.request &&
+                            strip.request.playlistRead &&
+                            strip.request.playlistRead.type) {
+                            strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.playlistRead.type);
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.getRequestMethod(strip, strip.request.playlistRead, strip.request.apiUrl, calculateParentStatus)];
+                    case 2:
+                        response = _a.sent();
+                        console.log('calling  after - response, ', response);
+                        if (response && response.results.result.content) {
+                            content = response.results.result.content;
+                            this.processStrip(strip, this.transformAllContentsToWidgets(content, strip), 'done', calculateParentStatus, response);
+                        }
+                        else {
+                            this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            this.emptyResponse.emit(true);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_9 = _a.sent();
+                        this.emptyResponse.emit(true);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     ContentStripWithTabsLibComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-content-strip-with-tabs',
@@ -6400,7 +6570,8 @@ var SlidersLibModule = /** @class */ (function () {
 /** @type {?} */
 var API_END_POINTS$2 = {
     PROVIDER_INSIGHTS: "/apis/proxies/v8/microsite/read/insights",
-    TRAINING_DETAILS: "apis/proxies/v8/sunbirdigot/search"
+    TRAINING_DETAILS: "apis/proxies/v8/sunbirdigot/search",
+    ANNOUNCEMENTS_DETAILS: "apis/proxies/v8/announcements/v1/search"
 };
 var InsiteDataService = /** @class */ (function () {
     function InsiteDataService(http) {
@@ -6417,6 +6588,17 @@ var InsiteDataService = /** @class */ (function () {
     function (request) {
         return this.http.post(API_END_POINTS$2.PROVIDER_INSIGHTS, request);
     };
+    /**
+     * @param {?} request
+     * @return {?}
+     */
+    InsiteDataService.prototype.fetchAnnouncementsData = /**
+     * @param {?} request
+     * @return {?}
+     */
+    function (request) {
+        return this.http.post(API_END_POINTS$2.ANNOUNCEMENTS_DETAILS, request);
+    };
     /**
      * @param {?} request
      * @return {?}
@@ -6705,7 +6887,6 @@ var CalenderComponent = /** @class */ (function () {
         this.currentMonthAndYear = this.datePipe.transform(this.currentDate, 'MMMM y');
         this.selectedMonth = this.datePipe.transform(this.currentDate, 'LLLL yyyy');
         if (this.fullCalendor) {
-            console.log("this.currentDate ", this.currentDate);
             this.days = this.getDaysInMonth(this.currentDate.getFullYear(), this.currentDate.getMonth());
             this.getMonthsDropdownData();
         }
@@ -8000,11 +8181,13 @@ var CommonStripModule = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var AnnouncementsComponent = /** @class */ (function () {
-    function AnnouncementsComponent() {
+    function AnnouncementsComponent(insightSvc) {
+        this.insightSvc = insightSvc;
         this.mobileHeight = false;
+        this.fetchDataFromApi = false;
         this.openDialog = new EventEmitter();
         this.isLoading = false;
-        this.isLoading = true;
+        this.announcements = [];
     }
     /**
      * @return {?}
@@ -8012,14 +8195,67 @@ var AnnouncementsComponent = /** @class */ (function () {
     AnnouncementsComponent.prototype.ngOnInit = /**
      * @return {?}
      */
+    function () {
+        if (this.fetchDataFromApi) {
+            this.isLoading = true;
+            this.fetchData();
+        }
+    };
+    /**
+     * @return {?}
+     */
+    AnnouncementsComponent.prototype.fetchData = /**
+     * @return {?}
+     */
     function () {
         var _this = this;
-        setTimeout((/**
+        /** @type {?} */
+        var request = {
+            filterCriteriaMap: {
+                channel: [this.channelId],
+            },
+            requestedFields: [
+                "name",
+                "description",
+                "createdOn",
+                "updatedOn",
+                "category"
+            ],
+            orderBy: "createdOn",
+            orderDirection: "ASC",
+            facets: [
+                "channel"
+            ],
+            pageSize: this.objectData.pageSize
+        };
+        this.insightSvc.fetchAnnouncementsData(request).subscribe((/**
+         * @param {?} res
          * @return {?}
          */
-        function () {
+        function (res) {
+            if (res && res.result && res.result.data) {
+                res.result.data.forEach((/**
+                 * @param {?} resp
+                 * @return {?}
+                 */
+                function (resp) {
+                    _this.announcements.push({
+                        value: resp.description,
+                        expanded: false
+                    });
+                }));
+            }
+            _this.objectData.list = _this.announcements;
+            _this.isLoading = false;
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        function (error) {
+            console.log(error);
+            _this.objectData.list = [];
             _this.isLoading = false;
-        }), 10000);
+        }));
     };
     /**
      * @param {?} item
@@ -8046,16 +8282,20 @@ var AnnouncementsComponent = /** @class */ (function () {
     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        <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}}"]
+                    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'}}\" *ngIf=\"objectData?.list?.length\">\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 class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" *ngIf=\"!objectData?.list?.length\">\n            <div class=\"text-center\">No announcements yet!</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{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}}"]
                 }] }
     ];
     /** @nocollapse */
-    AnnouncementsComponent.ctorParameters = function () { return []; };
+    AnnouncementsComponent.ctorParameters = function () { return [
+        { type: InsiteDataService }
+    ]; };
     AnnouncementsComponent.propDecorators = {
         objectData: [{ type: Input }],
         layoutType: [{ type: Input }],
         mobileHeight: [{ type: Input }],
+        fetchDataFromApi: [{ type: Input }],
+        channelId: [{ type: Input }],
         openDialog: [{ type: Output }]
     };
     return AnnouncementsComponent;
@@ -8068,9 +8308,17 @@ if (false) {
     /** @type {?} */
     AnnouncementsComponent.prototype.mobileHeight;
     /** @type {?} */
+    AnnouncementsComponent.prototype.fetchDataFromApi;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.channelId;
+    /** @type {?} */
     AnnouncementsComponent.prototype.openDialog;
     /** @type {?} */
     AnnouncementsComponent.prototype.isLoading;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.announcements;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.insightSvc;
 }
 
 /**
@@ -8214,6 +8462,7 @@ var CardsComponent = /** @class */ (function (_super) {
         _this.configSvc = configSvc;
         _this.contSvc = contSvc;
         _this.router = router;
+        _this.triggerTelemetry = new EventEmitter();
         _this.isIntranetAllowedSettings = false;
         return _this;
     }
@@ -8310,10 +8559,21 @@ var CardsComponent = /** @class */ (function (_super) {
             clearInterval(this.cbPlanInterval);
         }
     };
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    CardsComponent.prototype.raiseCardClick = /**
+     * @param {?} data
+     * @return {?}
+     */
+    function (data) {
+        this.triggerTelemetry.emit(data);
+    };
     CardsComponent.decorators = [
         { type: 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 *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>",
+                    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 *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></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\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [isCardLoading]=\"false\">\n  </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\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </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>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>",
                     styles: [""]
                 }] }
     ];
@@ -8325,7 +8585,8 @@ var CardsComponent = /** @class */ (function (_super) {
         { type: Router }
     ]; };
     CardsComponent.propDecorators = {
-        widgetData: [{ type: Input }]
+        widgetData: [{ type: Input }],
+        triggerTelemetry: [{ type: Output }]
     };
     return CardsComponent;
 }(WidgetBaseComponent));
@@ -8333,6 +8594,8 @@ if (false) {
     /** @type {?} */
     CardsComponent.prototype.widgetData;
     /** @type {?} */
+    CardsComponent.prototype.triggerTelemetry;
+    /** @type {?} */
     CardsComponent.prototype.isIntranetAllowedSettings;
     /** @type {?} */
     CardsComponent.prototype.cbPlanMapData;
@@ -8476,8 +8739,8 @@ var CardPortraitComponent = /** @class */ (function () {
     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)=\"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}"]
+                    template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer  {{widgetData?.cardCustomeClass}}\" [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:245px;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}.width-238{width:238px!important}"]
                 }] }
     ];
     /** @nocollapse */
@@ -9076,6 +9339,7 @@ var CardLandscapeComponent = /** @class */ (function () {
         this.configSvc = configSvc;
         this.isCardLoading = false;
         this.contentData = new EventEmitter();
+        this.triggerTelemetry = new EventEmitter();
         this.isCardFlipped = false;
         this.acbpConstants = NsCardContent$1.ACBPConst;
         this.showFlip = false;
@@ -9145,29 +9409,15 @@ var CardLandscapeComponent = /** @class */ (function () {
         this.contentData.emit(contentData);
     };
     /**
+     * @param {?} content
      * @return {?}
      */
     CardLandscapeComponent.prototype.raiseTelemetry = /**
+     * @param {?} content
      * @return {?}
      */
-    function () {
-        // 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),
-        });
+    function (content) {
+        this.triggerTelemetry.emit(content);
     };
     /**
      * @return {?}
@@ -9198,7 +9448,7 @@ var CardLandscapeComponent = /** @class */ (function () {
     CardLandscapeComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-card-landscape',
-                    template: "<ng-container *ngIf=\"!isCardLoading\">\n    <a class=\"cursor-pointer\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n  role=\"link\" i18n-aria-label>\n  <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n     <div class=\"course_widget portrait_widget flex  margin-bottom-xs\">\n        <div class=\"flex flex-end flex-middle course_port\">\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           </sb-uic-display-content-type>\n        </div>\n     </div>\n     <div class=\"flex\">\n        <div class=\"margin-right-s\">\n           <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n              <div class=\" img-block-portrait position-relative\">\n                 <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                 [alt]=\"widgetData.content.name\" />\n                 <div class=\"duration-box right-corner-portrait\" *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-portrait\" *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                <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>\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-image 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-image ws-mat-primary-lite-background margin-remove\"\n                 [alt]=\"widgetData?.content?.name\" />\n              </ng-template>\n           </ng-container>\n        </div>\n        <div class=\"width-1-1\">\n           <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n              class=\"portrait-subheading mat-subheading-2 title-text\">\n              {{ widgetData?.content?.name }}\n           </div>\n           <div class=\"flex w-full  flex-middle\">\n              <div class=\"portrait_course_logo_box margin-right-xs\">\n                 <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\"  loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                 [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n              </div>\n              <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n           </div>\n\n           <div class=\"flex flex-middle rating-session margin-top-xs\">\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            <!-- <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</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\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n            </ng-container> -->\n          </div>\n        </div>\n     </div>\n  </mat-card>\n  </a>\n</ng-container>\n\n<ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n\n<ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n        <div class=\"flex\">\n          <div class=\"margin-right-s\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"width-1-1\">\n            <div class=\"portrait-subheading title-text\">\n                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\"  [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n                <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"portrait_widget flex margin-top-xs\">\n              <div class=\"flex flex-end flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n</ng-container>",
+                    template: "<ng-container *ngIf=\"!isCardLoading\">\n    <a class=\"cursor-pointer\" (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n  role=\"link\" i18n-aria-label>\n  <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n     <div class=\"course_widget portrait_widget flex  margin-bottom-xs\">\n        <div class=\"flex flex-end flex-middle course_port\">\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           </sb-uic-display-content-type>\n        </div>\n     </div>\n     <div class=\"flex\">\n        <div class=\"margin-right-s\">\n           <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n              <div class=\" img-block-portrait position-relative\">\n                 <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                 [alt]=\"widgetData.content.name\" />\n                 <div class=\"duration-box right-corner-portrait\" *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-portrait\" *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                <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>\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-image 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-image ws-mat-primary-lite-background margin-remove\"\n                 [alt]=\"widgetData?.content?.name\" />\n              </ng-template>\n           </ng-container>\n        </div>\n        <div class=\"width-1-1\">\n           <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n              class=\"portrait-subheading mat-subheading-2 title-text\">\n              {{ widgetData?.content?.name }}\n           </div>\n           <div class=\"flex w-full  flex-middle\">\n              <div class=\"portrait_course_logo_box margin-right-xs\">\n                 <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\"  loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                 [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n              </div>\n              <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n           </div>\n\n           <div class=\"flex flex-middle rating-session margin-top-xs\">\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            <!-- <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</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\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n            </ng-container> -->\n          </div>\n        </div>\n     </div>\n  </mat-card>\n  </a>\n</ng-container>\n\n<ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n\n<ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n        <div class=\"flex\">\n          <div class=\"margin-right-s\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"width-1-1\">\n            <div class=\"portrait-subheading title-text\">\n                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\"  [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n                <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"portrait_widget flex margin-top-xs\">\n              <div class=\"flex flex-end flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n</ng-container>",
                     styles: [".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:350px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable{min-height:146px!important}.card-portrait-clickable .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable:hover{transform:scale(1.02)}.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}.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}@media only screen and (max-width:768px){.card-portrait{width:calc(100vw - 66px)}.card-wide-v2{min-height:356px}.card-wide-v2 .imageholder img{border-radius:12px 12px 0 0!important}.cbpwidth{width:calc(100vw - 100px)}}"]
                 }] }
     ];
@@ -9216,7 +9466,8 @@ var CardLandscapeComponent = /** @class */ (function () {
         showIntranetContent: [{ type: Input }],
         isIntranetAllowedSettings: [{ type: Input }],
         isCardLoading: [{ type: Input }],
-        contentData: [{ type: Output }]
+        contentData: [{ type: Output }],
+        triggerTelemetry: [{ type: Output }]
     };
     return CardLandscapeComponent;
 }());
@@ -9234,6 +9485,8 @@ if (false) {
     /** @type {?} */
     CardLandscapeComponent.prototype.contentData;
     /** @type {?} */
+    CardLandscapeComponent.prototype.triggerTelemetry;
+    /** @type {?} */
     CardLandscapeComponent.prototype.isCardFlipped;
     /** @type {?} */
     CardLandscapeComponent.prototype.defaultThumbnail;
@@ -9449,14 +9702,17 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CardMDOChannelComponent = /** @class */ (function () {
-    function CardMDOChannelComponent(events, translate, langtranslations, configSvc) {
+    function CardMDOChannelComponent(events, translate, langtranslations, configSvc, contSvc, router) {
         var _this = this;
         this.events = events;
         this.translate = translate;
         this.langtranslations = langtranslations;
         this.configSvc = configSvc;
-        this.userData = new EventEmitter();
-        this.widgetType = '';
+        this.contSvc = contSvc;
+        this.router = router;
+        this.channelData = new EventEmitter();
+        this.emitTelemetry = new EventEmitter();
+        this.widgetType = '';
         this.widgetSubType = '';
         this.langtranslations.languageSelectedObservable.subscribe((/**
          * @return {?}
@@ -9490,34 +9746,47 @@ var CardMDOChannelComponent = /** @class */ (function () {
         }
     };
     /**
+     * @param {?} contentData
      * @return {?}
      */
     CardMDOChannelComponent.prototype.raiseTelemetry = /**
+     * @param {?} contentData
      * @return {?}
      */
-    function () {
-        // 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'),
-        });
+    function (contentData) {
+        this.emitTelemetry.emit(contentData);
+        if (this.widgetData) {
+            contentData['typeOfTelemetry'] = 'mdo-channel';
+        }
+        this.contSvc.changeTelemetryData(contentData);
+    };
+    /**
+     * @param {?} channeldata
+     * @return {?}
+     */
+    CardMDOChannelComponent.prototype.channelClick = /**
+     * @param {?} channeldata
+     * @return {?}
+     */
+    function (channeldata) {
+        this.channelData.emit(channeldata);
+    };
+    /**
+     * @param {?} content
+     * @return {?}
+     */
+    CardMDOChannelComponent.prototype.redirectTo = /**
+     * @param {?} content
+     * @return {?}
+     */
+    function (content) {
+        this.router.navigate(["/app/learn/mdo-channels/" + content.orgName + "/" + content.identifier + "/micro-sites"]);
     };
     CardMDOChannelComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-card-mdo-channel',
-                    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/mdo-channels/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-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData.content.name }}\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:156px;height:156px;max-height:156px;margin:0 8px;background:#7faeff!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:86px;max-height:86px;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:2;-webkit-box-orient:vertical;min-height:48px}"]
+                    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(widgetData.content); redirectTo(widgetData.content); $event.stopPropagation()\"\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.imgUrl; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.imgUrl | 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-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData?.content?.orgName }}\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:156px;height:156px;max-height:156px;margin:0 8px;background:#7faeff!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:86px;max-height:86px;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:2;-webkit-box-orient:vertical;min-height:48px}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]
                 }] }
     ];
     /** @nocollapse */
@@ -9525,11 +9794,14 @@ var CardMDOChannelComponent = /** @class */ (function () {
         { type: EventService },
         { type: TranslateService },
         { type: MultilingualTranslationsService$1 },
-        { type: ConfigurationsService$1 }
+        { type: ConfigurationsService$1 },
+        { type: WidgetContentService },
+        { type: Router }
     ]; };
     CardMDOChannelComponent.propDecorators = {
         widgetData: [{ type: Input }],
-        userData: [{ type: Output }]
+        channelData: [{ type: Output }],
+        emitTelemetry: [{ type: Output }]
     };
     return CardMDOChannelComponent;
 }());
@@ -9537,7 +9809,9 @@ if (false) {
     /** @type {?} */
     CardMDOChannelComponent.prototype.widgetData;
     /** @type {?} */
-    CardMDOChannelComponent.prototype.userData;
+    CardMDOChannelComponent.prototype.channelData;
+    /** @type {?} */
+    CardMDOChannelComponent.prototype.emitTelemetry;
     /** @type {?} */
     CardMDOChannelComponent.prototype.defaultThumbnail;
     /** @type {?} */
@@ -9568,6 +9842,13 @@ if (false) {
      * @private
      */
     CardMDOChannelComponent.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMDOChannelComponent.prototype.contSvc;
+    /** @type {?} */
+    CardMDOChannelComponent.prototype.router;
 }
 
 /**
@@ -9584,6 +9865,7 @@ var CardWideV2Component = /** @class */ (function () {
         this.configSvc = configSvc;
         this.isCardLoading = false;
         this.contentData = new EventEmitter();
+        this.triggerTelemetry = new EventEmitter();
         this.isCardFlipped = false;
         this.acbpConstants = NsCardContent$1.ACBPConst;
         this.showFlip = false;
@@ -9646,35 +9928,21 @@ var CardWideV2Component = /** @class */ (function () {
         this.contentData.emit(contentData);
     };
     /**
+     * @param {?} contentData
      * @return {?}
      */
     CardWideV2Component.prototype.raiseTelemetry = /**
+     * @param {?} contentData
      * @return {?}
      */
-    function () {
-        // 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),
-        });
+    function (contentData) {
+        this.triggerTelemetry.emit(contentData);
     };
     CardWideV2Component.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-card-wide-v2',
-                    template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"imageholder \">\n        <img mat-card-image class=\"margin-remove\"\n        [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n        [alt]=\"widgetData?.content?.name\">\n        <div class=\"source-div\" [hidden]=\"true\">\n          <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n        </div>\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\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n        </div>\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>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex flex-between margin-remove\">\n          <div class=\"flex flex-end course_v2\">\n            <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <span class=\"ws-mat-black60-text font-normal mat-caption \">\n                {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n                <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n              </span>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"flex main_title_box\">\n          <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n            <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n              {{widgetData?.content?.name}}\n            </a>\n        </p>\n        </div>\n\n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle provider\">\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\">By&nbsp;\n              <!-- {{'cardcontentv2.by' | translate}}  -->\n              {{widgetData?.content?.organisation[0] }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon>star</mat-icon>\n              <span class=\"rating-number\">{{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\">{{ 'cardcontentv2.mostEnrolled' | translate }}</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\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n  </mat-card>\n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n</ng-container>\n\n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"\">\n        <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex margin-remove\">\n          <div class=\"flex flex-end \">\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n  \n        <div class=\"flex main_title_box\">\n          <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n            <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        <!-- </p> -->\n        </div>\n  \n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n      </mat-card-content>\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}.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}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;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-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
+                    template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n      <div class=\"imageholder \">\n        <img mat-card-image class=\"margin-remove\"\n        [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n        [alt]=\"widgetData?.content?.name\">\n        <div class=\"source-div\" [hidden]=\"true\">\n          <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n        </div>\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\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n        </div>\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>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex flex-between margin-remove\">\n          <div class=\"flex flex-end course_v2\">\n            <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <span class=\"ws-mat-black60-text font-normal mat-caption \">\n                {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n                <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n              </span>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"flex main_title_box\">\n          <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n            <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n              {{widgetData?.content?.name}}\n            </a>\n        </p>\n        </div>\n\n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle provider\">\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\">By&nbsp;\n              <!-- {{'cardcontentv2.by' | translate}}  -->\n              {{widgetData?.content?.organisation[0] }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon>star</mat-icon>\n              <span class=\"rating-number\">{{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\">{{ 'cardcontentv2.mostEnrolled' | translate }}</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\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n  </mat-card>\n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n</ng-container>\n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"\">\n        <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex margin-remove\">\n          <div class=\"flex flex-end \">\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n  \n        <div class=\"flex main_title_box\">\n          <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n            <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        <!-- </p> -->\n        </div>\n  \n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n      </mat-card-content>\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}.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}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;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-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}"]
                 }] }
     ];
     /** @nocollapse */
@@ -9692,7 +9960,8 @@ var CardWideV2Component = /** @class */ (function () {
         isIntranetAllowedSettings: [{ type: Input }],
         cbPlanMapData: [{ type: Input }],
         isCardLoading: [{ type: Input }],
-        contentData: [{ type: Output }]
+        contentData: [{ type: Output }],
+        triggerTelemetry: [{ type: Output }]
     };
     return CardWideV2Component;
 }());
@@ -9712,6 +9981,8 @@ if (false) {
     /** @type {?} */
     CardWideV2Component.prototype.contentData;
     /** @type {?} */
+    CardWideV2Component.prototype.triggerTelemetry;
+    /** @type {?} */
     CardWideV2Component.prototype.isCardFlipped;
     /** @type {?} */
     CardWideV2Component.prototype.acbpConstants;
@@ -9759,12 +10030,14 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CardKarmaProgramsComponent = /** @class */ (function () {
-    function CardKarmaProgramsComponent(events, translate, langtranslations, configSvc) {
+    function CardKarmaProgramsComponent(events, translate, langtranslations, configSvc, contSvc, router) {
         var _this = this;
         this.events = events;
         this.translate = translate;
         this.langtranslations = langtranslations;
         this.configSvc = configSvc;
+        this.contSvc = contSvc;
+        this.router = router;
         this.randomColorApply = false;
         this.userData = new EventEmitter();
         this.widgetType = '';
@@ -9827,31 +10100,6 @@ var CardKarmaProgramsComponent = /** @class */ (function () {
                 this.widgetData.content['bgColor'] = '#1a4ca1';
             }
         }
-        console.log(this.widgetData.content, this.randomColorApply);
-    };
-    /**
-     * @return {?}
-     */
-    CardKarmaProgramsComponent.prototype.raiseTelemetry = /**
-     * @return {?}
-     */
-    function () {
-        // 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'),
-        });
     };
     Object.defineProperty(CardKarmaProgramsComponent.prototype, "getRandomColors", {
         get: /**
@@ -9865,10 +10113,25 @@ var CardKarmaProgramsComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    CardKarmaProgramsComponent.prototype.redirectTo = /**
+     * @param {?} data
+     * @return {?}
+     */
+    function (data) {
+        if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
+            data['typeOfTelemetry'] = 'karma-programs';
+        }
+        this.contSvc.changeTelemetryData(data);
+        this.router.navigate(["/app/learn/karma-programs/" + data.title + "/" + data.playListKey + "/" + data.orgId + "/micro-sites"]);
+    };
     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\" [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 margin-remove  margin-top-xxs 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>",
+                    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)=\"redirectTo(widgetData?.content);$event.stopPropagation();\">\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.title\" />\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?.title\" />\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?.title\" />\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?.title }}\n                                    </div>\n                                </div>\n                                <div class=\"flex  px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                        class=\"flex-1 text-start margin-remove  margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.children?.length}} 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:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:0 8px;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:139px;max-height:139px;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}"]
                 }] }
     ];
@@ -9877,7 +10140,9 @@ var CardKarmaProgramsComponent = /** @class */ (function () {
         { type: EventService },
         { type: TranslateService },
         { type: MultilingualTranslationsService$1 },
-        { type: ConfigurationsService$1 }
+        { type: ConfigurationsService$1 },
+        { type: WidgetContentService },
+        { type: Router }
     ]; };
     CardKarmaProgramsComponent.propDecorators = {
         widgetData: [{ type: Input }],
@@ -9925,6 +10190,188 @@ if (false) {
      * @private
      */
     CardKarmaProgramsComponent.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.contSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CardKarmaProgramsV2Component = /** @class */ (function () {
+    function CardKarmaProgramsV2Component(events, translate, langtranslations, configSvc, router) {
+        var _this = this;
+        this.events = events;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.router = router;
+        this.randomColorApply = false;
+        this.userData = new EventEmitter();
+        this.raiseTemeletry = new EventEmitter();
+        this.widgetType = '';
+        this.widgetSubType = '';
+        this.randomColors = [
+            '#EF941D',
+            '#F97440',
+            '#35B5B0',
+            '#9988FF',
+            '#254092',
+            '#926525',
+            '#4F72DF'
+        ];
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        function () {
+            if (localStorage.getItem('websiteLanguage')) {
+                _this.translate.setDefaultLang('en');
+                /** @type {?} */
+                var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                _this.translate.use(lang);
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    CardKarmaProgramsV2Component.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var 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';
+        }
+        this.setRandomColor();
+    };
+    /**
+     * @return {?}
+     */
+    CardKarmaProgramsV2Component.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';
+            }
+        }
+    };
+    /**
+     * @param {?} content
+     * @return {?}
+     */
+    CardKarmaProgramsV2Component.prototype.redirectTo = /**
+     * @param {?} content
+     * @return {?}
+     */
+    function (content) {
+        this.raiseTemeletry.emit(content);
+        //this.router.navigate([`/app/learn/karma-programs/${content.identifier}/${content.identifier}/micro-sites`])
+        this.router.navigate(['/app/learn/karma-programs/India%20post/0132593267437813768program/0132593267437813768/micro-sites']);
+    };
+    Object.defineProperty(CardKarmaProgramsV2Component.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
+    });
+    CardKarmaProgramsV2Component.decorators = [
+        { type: Component, args: [{
+                    selector: 'sb-uic-card-karma-programs-v2',
+                    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)=\"redirectTo(widgetData?.content);$event.stopPropagation()\">\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-row md: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.title\" />\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.title\" />\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.title\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex items-center\">\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?.title }}\n                                        </div>\n                                    </div>\n                                    <div class=\"flex  px-2\">\n                                        <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                            class=\"flex-1 text-start margin-remove  margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n                                            {{ widgetData?.content?.children?.length}} Programs\n                                        </div>\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:233px;height:233px;max-height:233px;margin:0 8px;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:156px;max-height:156px;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}@media screen and (max-width:768px){.card-channels-container{width:100%;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:unset;height:unset;max-height:unset;margin:0;padding:8px!important}.image-container{background-color:#fff;width:190px;height:106px;max-height:106px;border-radius:12px}}"]
+                }] }
+    ];
+    /** @nocollapse */
+    CardKarmaProgramsV2Component.ctorParameters = function () { return [
+        { type: EventService },
+        { type: TranslateService },
+        { type: MultilingualTranslationsService$1 },
+        { type: ConfigurationsService$1 },
+        { type: Router }
+    ]; };
+    CardKarmaProgramsV2Component.propDecorators = {
+        widgetData: [{ type: Input }],
+        randomColorApply: [{ type: Input }],
+        userData: [{ type: Output }],
+        raiseTemeletry: [{ type: Output }]
+    };
+    return CardKarmaProgramsV2Component;
+}());
+if (false) {
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.widgetData;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.randomColorApply;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.userData;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.raiseTemeletry;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.defaultThumbnail;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.sourceLogos;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.defaultSLogo;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.widgetType;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.widgetSubType;
+    /** @type {?} */
+    CardKarmaProgramsV2Component.prototype.randomColors;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsV2Component.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsV2Component.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsV2Component.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsV2Component.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsV2Component.prototype.router;
 }
 
 /**
@@ -9944,7 +10391,8 @@ var CardsModule = /** @class */ (function () {
                         CardWideComponent,
                         CardMDOChannelComponent,
                         CardWideV2Component,
-                        CardKarmaProgramsComponent
+                        CardKarmaProgramsComponent,
+                        CardKarmaProgramsV2Component
                     ],
                     imports: [
                         CommonModule,
@@ -9969,7 +10417,8 @@ var CardsModule = /** @class */ (function () {
                         CardWideComponent,
                         CardMDOChannelComponent,
                         CardWideV2Component,
-                        CardKarmaProgramsComponent
+                        CardKarmaProgramsComponent,
+                        CardKarmaProgramsV2Component
                     ],
                 },] }
     ];
@@ -11601,5 +12050,5 @@ var UserContentRatingLibModule = /** @class */ (function () {
  * @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, 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 };
+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, CardKarmaProgramsV2Component as ɵbc, PipePublicURLModule as ɵbd, PipePublicURL as ɵbe, DisplayContentTypeLibModule as ɵbf, DisplayContentTypeLibComponent as ɵbg, DefaultThumbnailModule as ɵbh, DefaultThumbnailDirective as ɵbi, PipeDurationTransformModule as ɵbj, PipeDurationTransformPipe as ɵbk, CompetencyPassbookComponent as ɵbl, CompetencyPassbookService as ɵbm, PillsModule as ɵbn, PillsComponent as ɵbo, UserContentRatingLibComponent as ɵbp, ScrollableItemDirective as ɵbq, RatingService as ɵbr, UserContentRatingLibService as ɵbs, AvatarPhotoLibModule as ɵbt, AvatarPhotoLibComponent as ɵbu, MyHammerConfig$1 as ɵbv, SlidersNgContentLibModule as ɵbw, SlidersNgContentLibComponent as ɵbx, ScrollableItemModule as ɵby, 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