@sunbird-cb/consumption 0.0.26 → 0.0.28

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

@@ -452,7 +452,6 @@
          * @return {?}
          */
         function (elem) {
-            debugger;
             this.enablePrev = true;
             this.enableNext = true;
             if (elem.scrollLeft === 0) {
@@ -461,14 +460,29 @@
                 }
                 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;
                     }
@@ -2700,6 +2714,18 @@
             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: core.Injectable, args: [{
                         providedIn: 'root',
@@ -3915,7 +3941,6 @@
                 _this.translate.use(lang);
             }
             _this.environment = environment;
-            console.log('plugin');
             return _this;
         }
         /**
@@ -4327,10 +4352,15 @@
             }
             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;
@@ -4358,7 +4388,9 @@
             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)
@@ -5088,7 +5120,9 @@
                     (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;
@@ -5764,6 +5798,61 @@
                 });
             });
         };
+        /**
+         * @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 {?}
@@ -5779,6 +5868,28 @@
             }
             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
@@ -5804,7 +5915,7 @@
          * @param {?=} calculateParentStatus
          * @return {?}
          */
-        ContentStripWithTabsLibComponent.prototype.fetchAllChannela = /**
+        ContentStripWithTabsLibComponent.prototype.fetchAllBookMarkData = /**
          * @param {?} strip
          * @param {?=} calculateParentStatus
          * @return {?}
@@ -5812,74 +5923,27 @@
         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);
@@ -5925,6 +5989,112 @@
                 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: core.Component, args: [{
                         selector: 'sb-uic-content-strip-with-tabs',
@@ -6606,7 +6776,8 @@
     /** @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) {
@@ -6623,6 +6794,17 @@
         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 {?}
@@ -6911,7 +7093,6 @@
             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();
             }
@@ -8206,11 +8387,13 @@
      * @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 core.EventEmitter();
             this.isLoading = false;
-            this.isLoading = true;
+            this.announcements = [];
         }
         /**
          * @return {?}
@@ -8218,14 +8401,67 @@
         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
@@ -8252,16 +8488,20 @@
         AnnouncementsComponent.decorators = [
             { type: core.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: core.Input }],
             layoutType: [{ type: core.Input }],
             mobileHeight: [{ type: core.Input }],
+            fetchDataFromApi: [{ type: core.Input }],
+            channelId: [{ type: core.Input }],
             openDialog: [{ type: core.Output }]
         };
         return AnnouncementsComponent;
@@ -8274,9 +8514,17 @@
         /** @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;
     }
 
     /**
@@ -8420,6 +8668,7 @@
             _this.configSvc = configSvc;
             _this.contSvc = contSvc;
             _this.router = router;
+            _this.triggerTelemetry = new core.EventEmitter();
             _this.isIntranetAllowedSettings = false;
             return _this;
         }
@@ -8516,10 +8765,21 @@
                 clearInterval(this.cbPlanInterval);
             }
         };
+        /**
+         * @param {?} data
+         * @return {?}
+         */
+        CardsComponent.prototype.raiseCardClick = /**
+         * @param {?} data
+         * @return {?}
+         */
+        function (data) {
+            this.triggerTelemetry.emit(data);
+        };
         CardsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *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: [""]
                     }] }
         ];
@@ -8531,7 +8791,8 @@
             { type: router.Router }
         ]; };
         CardsComponent.propDecorators = {
-            widgetData: [{ type: core.Input }]
+            widgetData: [{ type: core.Input }],
+            triggerTelemetry: [{ type: core.Output }]
         };
         return CardsComponent;
     }(resolverV2.WidgetBaseComponent));
@@ -8539,6 +8800,8 @@
         /** @type {?} */
         CardsComponent.prototype.widgetData;
         /** @type {?} */
+        CardsComponent.prototype.triggerTelemetry;
+        /** @type {?} */
         CardsComponent.prototype.isIntranetAllowedSettings;
         /** @type {?} */
         CardsComponent.prototype.cbPlanMapData;
@@ -8682,8 +8945,8 @@
         CardPortraitComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-card-portrait',
-                        template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"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 */
@@ -9282,6 +9545,7 @@
             this.configSvc = configSvc;
             this.isCardLoading = false;
             this.contentData = new core.EventEmitter();
+            this.triggerTelemetry = new core.EventEmitter();
             this.isCardFlipped = false;
             this.acbpConstants = NsCardContent$1.ACBPConst;
             this.showFlip = false;
@@ -9351,29 +9615,15 @@
             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: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
-            }, {
-                id: this.widgetData.content.identifier,
-                type: this.widgetData.content.primaryCategory,
-                //context: this.widgetData.context,
-                rollup: {},
-                ver: "" + this.widgetData.content.version + '',
-            }, {
-                pageIdExt: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
-                module: lodash.camelCase(this.widgetData.content.primaryCategory),
-            });
+        function (content) {
+            this.triggerTelemetry.emit(content);
         };
         /**
          * @return {?}
@@ -9404,7 +9654,7 @@
         CardLandscapeComponent.decorators = [
             { type: core.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)}}"]
                     }] }
         ];
@@ -9422,7 +9672,8 @@
             showIntranetContent: [{ type: core.Input }],
             isIntranetAllowedSettings: [{ type: core.Input }],
             isCardLoading: [{ type: core.Input }],
-            contentData: [{ type: core.Output }]
+            contentData: [{ type: core.Output }],
+            triggerTelemetry: [{ type: core.Output }]
         };
         return CardLandscapeComponent;
     }());
@@ -9440,6 +9691,8 @@
         /** @type {?} */
         CardLandscapeComponent.prototype.contentData;
         /** @type {?} */
+        CardLandscapeComponent.prototype.triggerTelemetry;
+        /** @type {?} */
         CardLandscapeComponent.prototype.isCardFlipped;
         /** @type {?} */
         CardLandscapeComponent.prototype.defaultThumbnail;
@@ -9655,14 +9908,17 @@
      * @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 core.EventEmitter();
-            this.widgetType = '';
+            this.contSvc = contSvc;
+            this.router = router;
+            this.channelData = new core.EventEmitter();
+            this.emitTelemetry = new core.EventEmitter();
+            this.widgetType = '';
             this.widgetSubType = '';
             this.langtranslations.languageSelectedObservable.subscribe((/**
              * @return {?}
@@ -9696,34 +9952,47 @@
             }
         };
         /**
+         * @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: lodash.camelCase(this.widgetData.content.userId) + "-card",
-            }, {
-                id: this.widgetData.content.userId,
-                // type: this.widgetData.user.primaryCategory,
-                //context: this.widgetData.context,
-                rollup: {},
-            }, {
-                pageIdExt: lodash.camelCase('user') + "-card",
-                module: lodash.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: core.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 */
@@ -9731,11 +10000,14 @@
             { type: utilsV2.EventService },
             { type: core$1.TranslateService },
             { type: utilsV2.MultilingualTranslationsService },
-            { type: utilsV2.ConfigurationsService }
+            { type: utilsV2.ConfigurationsService },
+            { type: WidgetContentService },
+            { type: router.Router }
         ]; };
         CardMDOChannelComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
-            userData: [{ type: core.Output }]
+            channelData: [{ type: core.Output }],
+            emitTelemetry: [{ type: core.Output }]
         };
         return CardMDOChannelComponent;
     }());
@@ -9743,7 +10015,9 @@
         /** @type {?} */
         CardMDOChannelComponent.prototype.widgetData;
         /** @type {?} */
-        CardMDOChannelComponent.prototype.userData;
+        CardMDOChannelComponent.prototype.channelData;
+        /** @type {?} */
+        CardMDOChannelComponent.prototype.emitTelemetry;
         /** @type {?} */
         CardMDOChannelComponent.prototype.defaultThumbnail;
         /** @type {?} */
@@ -9774,6 +10048,13 @@
          * @private
          */
         CardMDOChannelComponent.prototype.configSvc;
+        /**
+         * @type {?}
+         * @private
+         */
+        CardMDOChannelComponent.prototype.contSvc;
+        /** @type {?} */
+        CardMDOChannelComponent.prototype.router;
     }
 
     /**
@@ -9790,6 +10071,7 @@
             this.configSvc = configSvc;
             this.isCardLoading = false;
             this.contentData = new core.EventEmitter();
+            this.triggerTelemetry = new core.EventEmitter();
             this.isCardFlipped = false;
             this.acbpConstants = NsCardContent$1.ACBPConst;
             this.showFlip = false;
@@ -9852,35 +10134,21 @@
             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: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
-            }, {
-                id: this.widgetData.content.identifier,
-                type: this.widgetData.content.primaryCategory,
-                //context: this.widgetData.context,
-                rollup: {},
-                ver: "" + this.widgetData.content.version + '',
-            }, {
-                pageIdExt: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
-                module: lodash.camelCase(this.widgetData.content.primaryCategory),
-            });
+        function (contentData) {
+            this.triggerTelemetry.emit(contentData);
         };
         CardWideV2Component.decorators = [
             { type: core.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 */
@@ -9898,7 +10166,8 @@
             isIntranetAllowedSettings: [{ type: core.Input }],
             cbPlanMapData: [{ type: core.Input }],
             isCardLoading: [{ type: core.Input }],
-            contentData: [{ type: core.Output }]
+            contentData: [{ type: core.Output }],
+            triggerTelemetry: [{ type: core.Output }]
         };
         return CardWideV2Component;
     }());
@@ -9918,6 +10187,8 @@
         /** @type {?} */
         CardWideV2Component.prototype.contentData;
         /** @type {?} */
+        CardWideV2Component.prototype.triggerTelemetry;
+        /** @type {?} */
         CardWideV2Component.prototype.isCardFlipped;
         /** @type {?} */
         CardWideV2Component.prototype.acbpConstants;
@@ -9965,12 +10236,14 @@
      * @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 core.EventEmitter();
             this.widgetType = '';
@@ -10033,31 +10306,6 @@
                     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: lodash.camelCase(this.widgetData.content.userId) + "-card",
-            }, {
-                id: this.widgetData.content.userId,
-                // type: this.widgetData.user.primaryCategory,
-                //context: this.widgetData.context,
-                rollup: {},
-            }, {
-                pageIdExt: lodash.camelCase('user') + "-card",
-                module: lodash.camelCase('user'),
-            });
         };
         Object.defineProperty(CardKarmaProgramsComponent.prototype, "getRandomColors", {
             get: /**
@@ -10071,10 +10319,25 @@
             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: core.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}"]
                     }] }
         ];
@@ -10083,7 +10346,9 @@
             { type: utilsV2.EventService },
             { type: core$1.TranslateService },
             { type: utilsV2.MultilingualTranslationsService },
-            { type: utilsV2.ConfigurationsService }
+            { type: utilsV2.ConfigurationsService },
+            { type: WidgetContentService },
+            { type: router.Router }
         ]; };
         CardKarmaProgramsComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
@@ -10131,6 +10396,188 @@
          * @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 core.EventEmitter();
+            this.raiseTemeletry = new core.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: core.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: utilsV2.EventService },
+            { type: core$1.TranslateService },
+            { type: utilsV2.MultilingualTranslationsService },
+            { type: utilsV2.ConfigurationsService },
+            { type: router.Router }
+        ]; };
+        CardKarmaProgramsV2Component.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            randomColorApply: [{ type: core.Input }],
+            userData: [{ type: core.Output }],
+            raiseTemeletry: [{ type: core.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;
     }
 
     /**
@@ -10150,7 +10597,8 @@
                             CardWideComponent,
                             CardMDOChannelComponent,
                             CardWideV2Component,
-                            CardKarmaProgramsComponent
+                            CardKarmaProgramsComponent,
+                            CardKarmaProgramsV2Component
                         ],
                         imports: [
                             common.CommonModule,
@@ -10175,7 +10623,8 @@
                             CardWideComponent,
                             CardMDOChannelComponent,
                             CardWideV2Component,
-                            CardKarmaProgramsComponent
+                            CardKarmaProgramsComponent,
+                            CardKarmaProgramsV2Component
                         ],
                     },] }
         ];
@@ -11820,28 +12269,29 @@
     exports.ɵb = WidgetUserService;
     exports.ɵba = CardWideV2Component;
     exports.ɵbb = CardKarmaProgramsComponent;
-    exports.ɵbc = PipePublicURLModule;
-    exports.ɵbd = PipePublicURL;
-    exports.ɵbe = DisplayContentTypeLibModule;
-    exports.ɵbf = DisplayContentTypeLibComponent;
-    exports.ɵbg = DefaultThumbnailModule;
-    exports.ɵbh = DefaultThumbnailDirective;
-    exports.ɵbi = PipeDurationTransformModule;
-    exports.ɵbj = PipeDurationTransformPipe;
-    exports.ɵbk = CompetencyPassbookComponent;
-    exports.ɵbl = CompetencyPassbookService;
-    exports.ɵbm = PillsModule;
-    exports.ɵbn = PillsComponent;
-    exports.ɵbo = UserContentRatingLibComponent;
-    exports.ɵbp = ScrollableItemDirective;
-    exports.ɵbq = RatingService;
-    exports.ɵbr = UserContentRatingLibService;
-    exports.ɵbs = AvatarPhotoLibModule;
-    exports.ɵbt = AvatarPhotoLibComponent;
-    exports.ɵbu = MyHammerConfig$1;
-    exports.ɵbv = SlidersNgContentLibModule;
-    exports.ɵbw = SlidersNgContentLibComponent;
-    exports.ɵbx = ScrollableItemModule;
+    exports.ɵbc = CardKarmaProgramsV2Component;
+    exports.ɵbd = PipePublicURLModule;
+    exports.ɵbe = PipePublicURL;
+    exports.ɵbf = DisplayContentTypeLibModule;
+    exports.ɵbg = DisplayContentTypeLibComponent;
+    exports.ɵbh = DefaultThumbnailModule;
+    exports.ɵbi = DefaultThumbnailDirective;
+    exports.ɵbj = PipeDurationTransformModule;
+    exports.ɵbk = PipeDurationTransformPipe;
+    exports.ɵbl = CompetencyPassbookComponent;
+    exports.ɵbm = CompetencyPassbookService;
+    exports.ɵbn = PillsModule;
+    exports.ɵbo = PillsComponent;
+    exports.ɵbp = UserContentRatingLibComponent;
+    exports.ɵbq = ScrollableItemDirective;
+    exports.ɵbr = RatingService;
+    exports.ɵbs = UserContentRatingLibService;
+    exports.ɵbt = AvatarPhotoLibModule;
+    exports.ɵbu = AvatarPhotoLibComponent;
+    exports.ɵbv = MyHammerConfig$1;
+    exports.ɵbw = SlidersNgContentLibModule;
+    exports.ɵbx = SlidersNgContentLibComponent;
+    exports.ɵby = ScrollableItemModule;
     exports.ɵc = MultilingualTranslationsService;
     exports.ɵd = ConfigurationsService;
     exports.ɵe = HorizontalScrollerV2Module;