@sunbird-cb/consumption 0.0.26 → 0.0.28

package/fesm2015/sunbird-cb-consumption.js

@@ -224,7 +224,6 @@ class HorizontalScrollerV2Component {
      * @return {?}
      */
     updateNavigationBtnStatus(elem) {
-        debugger;
         this.enablePrev = true;
         this.enableNext = true;
         if (elem.scrollLeft === 0) {
@@ -233,14 +232,29 @@ class HorizontalScrollerV2Component {
             }
             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 {?} */
+        const 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;
                 }
@@ -2208,6 +2222,14 @@ class WidgetContentService {
         req.query = req.query || '';
         return this.http.post(apiUrl, req);
     }
+    /**
+     * @param {?} apiUrl
+     * @return {?}
+     */
+    getApiMethod(apiUrl) {
+        // req.query = req.query || '';
+        return this.http.get(apiUrl);
+    }
 }
 WidgetContentService.decorators = [
     { type: Injectable, args: [{
@@ -3332,7 +3354,6 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             this.translate.use(lang);
         }
         this.environment = environment;
-        console.log('plugin');
     }
     /**
      * @return {?}
@@ -3653,10 +3674,15 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         }
         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;
@@ -3677,7 +3703,9 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         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)
@@ -4311,7 +4339,9 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                 (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;
@@ -4865,6 +4895,51 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             }));
         });
     }
+    /**
+     * @param {?} strip
+     * @param {?} request
+     * @param {?} apiUrl
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    getRequestMethod(strip, request, apiUrl, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const originalFilters = [];
+            return new Promise((/**
+             * @param {?} resolve
+             * @param {?} reject
+             * @return {?}
+             */
+            (resolve, reject) => {
+                if (request && request) {
+                    this.contentSvc.getApiMethod(apiUrl).subscribe((/**
+                     * @param {?} results
+                     * @return {?}
+                     */
+                    results => {
+                        console.log(results, 'results=========');
+                        /** @type {?} */
+                        const showViewMore = Boolean(results.result.data && results.result.data.orgList.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                        /** @type {?} */
+                        const viewMoreUrl = showViewMore
+                            ? {
+                                path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
+                            }
+                            : null;
+                        resolve({ results, viewMoreUrl });
+                    }), (/**
+                     * @param {?} error
+                     * @return {?}
+                     */
+                    (error) => {
+                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        reject(error);
+                    }));
+                }
+            }));
+        });
+    }
     /**
      * @param {?} filters
      * @return {?}
@@ -4876,6 +4951,23 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         }
         return filters;
     }
+    /**
+     * @param {?} apiUrl
+     * @param {?} id
+     * @return {?}
+     */
+    getFullUrl(apiUrl, id) {
+        /** @type {?} */
+        let 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
@@ -4895,71 +4987,24 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
      * @param {?=} calculateParentStatus
      * @return {?}
      */
-    fetchAllChannela(strip, calculateParentStatus = true) {
+    fetchAllBookMarkData(strip, calculateParentStatus = true) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (strip.request && strip.request.channels && Object.keys(strip.request.channels).length) {
+            if (strip.request && strip.request.bookmarkRead && Object.keys(strip.request.bookmarkRead).length) {
                 /** @type {?} */
                 let 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);
                 }
                 try {
                     /** @type {?} */
-                    let 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',
-                        },
-                    ];
+                    const response = yield this.getRequestMethod(strip, strip.request.bookmarkRead, strip.request.apiUrl, calculateParentStatus);
+                    console.log('calling  after - response, ', response);
                     /** @type {?} */
-                    const response = yield data
-                    // console.log('calling  after - response, ', response)
-                    ;
-                    // console.log('calling  after - response, ', response)
+                    let 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);
@@ -4998,6 +5043,87 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             widgetData: {},
         })));
     }
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchAllPlaylistSearch(strip, calculateParentStatus = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (strip.request && strip.request.playlistSearch && Object.keys(strip.request.playlistSearch).length) {
+                /** @type {?} */
+                let 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);
+                }
+                try {
+                    /** @type {?} */
+                    const response = yield this.postRequestMethod(strip, strip.request.playlistSearch.request, strip.request.apiUrl, calculateParentStatus);
+                    // 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);
+                    }
+                }
+                catch (error) {
+                    this.emptyResponse.emit(true);
+                    // Handle errors
+                    // console.error('Error:', error);
+                }
+            }
+        });
+    }
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchPlaylistReadData(strip, calculateParentStatus = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (strip.request && strip.request.playlistRead && Object.keys(strip.request.playlistRead).length) {
+                /** @type {?} */
+                let originalFilters = [];
+                if (strip.request &&
+                    strip.request.playlistRead &&
+                    strip.request.playlistRead.type) {
+                    strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.playlistRead.type);
+                }
+                try {
+                    /** @type {?} */
+                    const response = yield this.getRequestMethod(strip, strip.request.playlistRead, strip.request.apiUrl, calculateParentStatus);
+                    console.log('calling  after - response, ', response);
+                    if (response && response.results.result.content) {
+                        /** @type {?} */
+                        let 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);
+                    }
+                }
+                catch (error) {
+                    this.emptyResponse.emit(true);
+                    // Handle errors
+                    // console.error('Error:', error);
+                }
+            }
+        });
+    }
 }
 ContentStripWithTabsLibComponent.decorators = [
     { type: Component, args: [{
@@ -5614,7 +5740,8 @@ SlidersLibModule.decorators = [
 /** @type {?} */
 const 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`
 };
 class InsiteDataService {
     /**
@@ -5630,6 +5757,13 @@ class InsiteDataService {
     fetchSearchData(request) {
         return this.http.post(API_END_POINTS$2.PROVIDER_INSIGHTS, request);
     }
+    /**
+     * @param {?} request
+     * @return {?}
+     */
+    fetchAnnouncementsData(request) {
+        return this.http.post(API_END_POINTS$2.ANNOUNCEMENTS_DETAILS, request);
+    }
     /**
      * @param {?} request
      * @return {?}
@@ -5895,7 +6029,6 @@ class CalenderComponent {
         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();
         }
@@ -7015,22 +7148,77 @@ CommonStripModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class AnnouncementsComponent {
-    constructor() {
+    /**
+     * @param {?} insightSvc
+     */
+    constructor(insightSvc) {
+        this.insightSvc = insightSvc;
         this.mobileHeight = false;
+        this.fetchDataFromApi = false;
         this.openDialog = new EventEmitter();
         this.isLoading = false;
-        this.isLoading = true;
+        this.announcements = [];
     }
     /**
      * @return {?}
      */
     ngOnInit() {
-        setTimeout((/**
+        if (this.fetchDataFromApi) {
+            this.isLoading = true;
+            this.fetchData();
+        }
+    }
+    /**
+     * @return {?}
+     */
+    fetchData() {
+        /** @type {?} */
+        let 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 {?}
          */
-        () => {
+        (res) => {
+            if (res && res.result && res.result.data) {
+                res.result.data.forEach((/**
+                 * @param {?} resp
+                 * @return {?}
+                 */
+                (resp) => {
+                    this.announcements.push({
+                        value: resp.description,
+                        expanded: false
+                    });
+                }));
+            }
+            this.objectData.list = this.announcements;
             this.isLoading = false;
-        }), 10000);
+        }), (/**
+         * @param {?} error
+         * @return {?}
+         */
+        error => {
+            console.log(error);
+            this.objectData.list = [];
+            this.isLoading = false;
+        }));
     }
     /**
      * @param {?} item
@@ -7051,16 +7239,20 @@ class AnnouncementsComponent {
 AnnouncementsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-announcements',
-                template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web' && !isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo\">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" >\n            <div *ngFor=\"let item of objectData?.list; let i = index\">\n                <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n                    [style.borderColor]=\"objectData?.listItem?.border\"\n                    [style.backgroundColor]=\"objectData?.listItem?.background\">\n                    <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n                    <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n                    </div>\n                </div>\n            </div>                        \n        </div>        \n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n    <div class=\"flex item-center key-logo \">\n        <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            <div class=\"flex key-button gap-3\">\n                <div>\n                    <img [src]=\"objectData?.mobileIcon\">\n                </div>\n                <div>{{objectData?.title}}</div>                \n                <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n            </div>            \n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'web' && isLoading\">\n    <div class=\"flex item-center key-logo\">\n        <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 = () => [];
+AnnouncementsComponent.ctorParameters = () => [
+    { type: InsiteDataService }
+];
 AnnouncementsComponent.propDecorators = {
     objectData: [{ type: Input }],
     layoutType: [{ type: Input }],
     mobileHeight: [{ type: Input }],
+    fetchDataFromApi: [{ type: Input }],
+    channelId: [{ type: Input }],
     openDialog: [{ type: Output }]
 };
 if (false) {
@@ -7071,9 +7263,17 @@ if (false) {
     /** @type {?} */
     AnnouncementsComponent.prototype.mobileHeight;
     /** @type {?} */
+    AnnouncementsComponent.prototype.fetchDataFromApi;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.channelId;
+    /** @type {?} */
     AnnouncementsComponent.prototype.openDialog;
     /** @type {?} */
     AnnouncementsComponent.prototype.isLoading;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.announcements;
+    /** @type {?} */
+    AnnouncementsComponent.prototype.insightSvc;
 }
 
 /**
@@ -7216,6 +7416,7 @@ class CardsComponent extends WidgetBaseComponent {
         this.configSvc = configSvc;
         this.contSvc = contSvc;
         this.router = router;
+        this.triggerTelemetry = new EventEmitter();
         this.isIntranetAllowedSettings = false;
     }
     /**
@@ -7285,11 +7486,18 @@ class CardsComponent extends WidgetBaseComponent {
             clearInterval(this.cbPlanInterval);
         }
     }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    raiseCardClick(data) {
+        this.triggerTelemetry.emit(data);
+    }
 }
 CardsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-cards',
-                template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2 (contentData)=\"getRedirectUrlData($event)\"  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"false\" [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>",
+                template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>",
                 styles: [""]
             }] }
 ];
@@ -7301,12 +7509,15 @@ CardsComponent.ctorParameters = () => [
     { type: Router }
 ];
 CardsComponent.propDecorators = {
-    widgetData: [{ type: Input }]
+    widgetData: [{ type: Input }],
+    triggerTelemetry: [{ type: Output }]
 };
 if (false) {
     /** @type {?} */
     CardsComponent.prototype.widgetData;
     /** @type {?} */
+    CardsComponent.prototype.triggerTelemetry;
+    /** @type {?} */
     CardsComponent.prototype.isIntranetAllowedSettings;
     /** @type {?} */
     CardsComponent.prototype.cbPlanMapData;
@@ -7442,8 +7653,8 @@ class CardPortraitComponent {
 CardPortraitComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-portrait',
-                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n          role=\"link\" i18n-aria-label>\n    <ng-container *ngIf=\"!isCardFlipped\">\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n        matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n        matTooltip=\"Available only in Company's network\"\n        *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n      <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n        (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n        <mat-icon>flip_to_back</mat-icon>\n      </button>\n      <mat-card-content class=\"min-top\">\n        <div style=\"position: relative; z-index: 1;\">\n          <ng-container *ngIf=\"widgetData.content.posterImage\">\n            <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n            class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n            [alt]=\"widgetData.content.name\" />\n          </ng-container>\n          <ng-container *ngIf=\"!widgetData.content.posterImage\">\n            <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n              <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-template #defaultImg>\n              <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-template>\n          </ng-container>\n          <div class=\"source-div\" style=\"display: none;\">\n            <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n          </div>\n          <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n            <div class=\"cbp-mark\">\n              <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n            </div>\n          </ng-container>\n          <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n            <div class=\"cbp-mark\">\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n            </div>\n          </ng-container> -->\n          <!-- <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n            <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n              cbpData: cbPlanMapData[widgetData?.content?.identifier]\n            }}\"></ng-container>\n          </ng-container> -->\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n            </span>\n          </div>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n            </span>\n          </div>\n        </div>\n        <div class=\"padding-m\">\n          <div class=\"course_widget flex margin-remove\">\n            <div class=\"flex flex-end course_v2\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                ?'Module'\n                :widgetData.content?.primaryCategory\">\n\n              </sb-uic-display-content-type>\n            </div>\n          </div>\n          <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n            class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n            {{ widgetData.content.name }}\n          </div>\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n              <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-m\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n            </span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n            </span>\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n    </ng-container>\n    <ng-container *ngIf=\"isCardFlipped\">\n      <div class=\"flex items-center\">\n        <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n        <button mat-icon-button (click)=\"isCardFlipped = false\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <p class=\"text-justify mat-body-1\">\n        {{ widgetData.content.reason }}\n      </p>\n    </ng-container>\n      </a>\n    </ng-container>\n  </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n    <div class=\"display-contents\" >\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n            <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n              <div class=\"\">\n                <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n              <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n    </div>\n  </mat-card>\n</ng-container>",
-                styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:268px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer  {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n    greyOut:\n      widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n        ? true\n        : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n  }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n  <div class=\"display-contents\" [ngClass]=\"{\n      disableClick:\n        widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\">\n    <ng-container *ngIf=\"widgetData.content\">\n      <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n          role=\"link\" i18n-aria-label>\n    <ng-container *ngIf=\"!isCardFlipped\">\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n        matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n      <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n        matTooltip=\"Available only in Company's network\"\n        *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n      <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n        (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n        <mat-icon>flip_to_back</mat-icon>\n      </button>\n      <mat-card-content class=\"min-top\">\n        <div style=\"position: relative; z-index: 1;\">\n          <ng-container *ngIf=\"widgetData.content.posterImage\">\n            <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n            class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n            [alt]=\"widgetData.content.name\" />\n          </ng-container>\n          <ng-container *ngIf=\"!widgetData.content.posterImage\">\n            <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n              <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-template #defaultImg>\n              <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-template>\n          </ng-container>\n          <div class=\"source-div\" style=\"display: none;\">\n            <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n          </div>\n          <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n            <div class=\"cbp-mark\">\n              <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n            </div>\n          </ng-container>\n          <!-- <ng-container *ngIf=\"widgetData?.content?.endDate\">\n            <div class=\"cbp-mark\">\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{widgetData?.content?.endDate | date: 'd MMM, y'}}</p>\n              <p *ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n            </div>\n          </ng-container> -->\n          <!-- <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n            <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n              cbpData: cbPlanMapData[widgetData?.content?.identifier]\n            }}\"></ng-container>\n          </ng-container> -->\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n            </span>\n          </div>\n          <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n            <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n            <span class=\" ws-mat-white-text duration\">\n              {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n            </span>\n          </div>\n        </div>\n        <div class=\"padding-m\">\n          <div class=\"course_widget flex margin-remove\">\n            <div class=\"flex flex-end course_v2\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n                class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n                ?'Module'\n                :widgetData.content?.primaryCategory\">\n\n              </sb-uic-display-content-type>\n            </div>\n          </div>\n          <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n            class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n            {{ widgetData.content.name }}\n          </div>\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData.content.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n            </div>\n            <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n              <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-m\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n            </span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">\n                <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n            </span>\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n    </ng-container>\n    <ng-container *ngIf=\"isCardFlipped\">\n      <div class=\"flex items-center\">\n        <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n        <button mat-icon-button (click)=\"isCardFlipped = false\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <p class=\"text-justify mat-body-1\">\n        {{ widgetData.content.reason }}\n      </p>\n    </ng-container>\n      </a>\n    </ng-container>\n  </div>\n</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n  <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n    <div class=\"display-contents\" >\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n            <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n              <div class=\"\">\n                <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n              <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n    </div>\n  </mat-card>\n</ng-container>",
+                styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}"]
             }] }
 ];
 /** @nocollapse */
@@ -7992,6 +8203,7 @@ class CardLandscapeComponent {
         this.configSvc = configSvc;
         this.isCardLoading = false;
         this.contentData = new EventEmitter();
+        this.triggerTelemetry = new EventEmitter();
         this.isCardFlipped = false;
         this.acbpConstants = NsCardContent$1.ACBPConst;
         this.showFlip = false;
@@ -8050,26 +8262,11 @@ class CardLandscapeComponent {
         this.contentData.emit(contentData);
     }
     /**
+     * @param {?} content
      * @return {?}
      */
-    raiseTelemetry() {
-        // if(this.forPreview){
-        //   return
-        // }
-        this.events.raiseInteractTelemetry({
-            type: 'click',
-            subType: `${this.widgetType}-${this.widgetSubType}`,
-            id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
-        }, {
-            id: this.widgetData.content.identifier,
-            type: this.widgetData.content.primaryCategory,
-            //context: this.widgetData.context,
-            rollup: {},
-            ver: `${this.widgetData.content.version}${''}`,
-        }, {
-            pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
-            module: camelCase(this.widgetData.content.primaryCategory),
-        });
+    raiseTelemetry(content) {
+        this.triggerTelemetry.emit(content);
     }
     /**
      * @return {?}
@@ -8098,7 +8295,7 @@ class CardLandscapeComponent {
 CardLandscapeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-landscape',
-                template: "<ng-container *ngIf=\"!isCardLoading\">\n    <a class=\"cursor-pointer\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n  role=\"link\" i18n-aria-label>\n  <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n     <div class=\"course_widget portrait_widget flex  margin-bottom-xs\">\n        <div class=\"flex flex-end flex-middle course_port\">\n           <mat-icon class=\"mat-icon main_icon  ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n           <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n           class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n           ?'Module'\n           :widgetData.content?.primaryCategory\">\n           </sb-uic-display-content-type>\n        </div>\n     </div>\n     <div class=\"flex\">\n        <div class=\"margin-right-s\">\n           <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n              <div class=\" img-block-portrait position-relative\">\n                 <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                 [alt]=\"widgetData.content.name\" />\n                 <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.duration > 0\">\n                    <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n                    <span class=\" ws-mat-white-text duration\">\n                    {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n                    </span>\n                 </div>\n                 <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n                    <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n                    <span class=\" ws-mat-white-text duration\">\n                    {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n                    </span>\n                 </div>\n                <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n                  <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                    cbpData: cbPlanMapData[widgetData?.content?.identifier]\n                  }}\"></ng-container>\n                </ng-container>\n              </div>\n           </ng-container>\n           <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n              <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n                 <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                 [alt]=\"widgetData.content.name\" />\n              </ng-container>\n              <ng-template #defaultImg>\n                 <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\"\n                 [alt]=\"widgetData?.content?.name\" />\n              </ng-template>\n           </ng-container>\n        </div>\n        <div class=\"width-1-1\">\n           <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n              class=\"portrait-subheading mat-subheading-2 title-text\">\n              {{ widgetData?.content?.name }}\n           </div>\n           <div class=\"flex w-full  flex-middle\">\n              <div class=\"portrait_course_logo_box margin-right-xs\">\n                 <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\"  loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                 [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n              </div>\n              <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n           </div>\n\n           <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n            </ng-container> -->\n          </div>\n        </div>\n     </div>\n  </mat-card>\n  </a>\n</ng-container>\n\n<ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n\n<ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n        <div class=\"flex\">\n          <div class=\"margin-right-s\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"width-1-1\">\n            <div class=\"portrait-subheading title-text\">\n                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\"  [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n                <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"portrait_widget flex margin-top-xs\">\n              <div class=\"flex flex-end flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n</ng-container>",
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n    <a class=\"cursor-pointer\" (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n  role=\"link\" i18n-aria-label>\n  <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n     <div class=\"course_widget portrait_widget flex  margin-bottom-xs\">\n        <div class=\"flex flex-end flex-middle course_port\">\n           <mat-icon class=\"mat-icon main_icon  ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n           <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.primaryCategory\"\n           class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n           ?'Module'\n           :widgetData.content?.primaryCategory\">\n           </sb-uic-display-content-type>\n        </div>\n     </div>\n     <div class=\"flex\">\n        <div class=\"margin-right-s\">\n           <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n              <div class=\" img-block-portrait position-relative\">\n                 <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                 [alt]=\"widgetData.content.name\" />\n                 <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.duration > 0\">\n                    <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n                    <span class=\" ws-mat-white-text duration\">\n                    {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n                    </span>\n                 </div>\n                 <div class=\"duration-box right-corner-portrait\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n                    <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n                    <span class=\" ws-mat-white-text duration\">\n                    {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n                    </span>\n                 </div>\n                <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n                  <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                    cbpData: cbPlanMapData[widgetData?.content?.identifier]\n                  }}\"></ng-container>\n                </ng-container>\n              </div>\n           </ng-container>\n           <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n              <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n                 <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                 [alt]=\"widgetData.content.name\" />\n              </ng-container>\n              <ng-template #defaultImg>\n                 <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                 class=\"card-image ws-mat-primary-lite-background margin-remove\"\n                 [alt]=\"widgetData?.content?.name\" />\n              </ng-template>\n           </ng-container>\n        </div>\n        <div class=\"width-1-1\">\n           <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n              class=\"portrait-subheading mat-subheading-2 title-text\">\n              {{ widgetData?.content?.name }}\n           </div>\n           <div class=\"flex w-full  flex-middle\">\n              <div class=\"portrait_course_logo_box margin-right-xs\">\n                 <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\"  loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                 [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n              </div>\n              <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' | translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n           </div>\n\n           <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon class=\"mr-1\">star</mat-icon>\n              <span>{{widgetData.content.avgRating}}</span>\n            </div>\n            <!-- <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n            </ng-container> -->\n          </div>\n        </div>\n     </div>\n  </mat-card>\n  </a>\n</ng-container>\n\n<ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n\n<ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n        <div class=\"flex\">\n          <div class=\"margin-right-s\">\n            <ng-container>\n              <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </ng-container>\n          </div>\n          <div class=\"width-1-1\">\n            <div class=\"portrait-subheading title-text\">\n                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\"  [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n                <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <div class=\"portrait_widget flex margin-top-xs\">\n              <div class=\"flex flex-end flex-middle\">\n                <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n</ng-container>",
                 styles: [".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:350px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable{min-height:146px!important}.card-portrait-clickable .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable:hover{transform:scale(1.02)}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}@media only screen and (max-width:768px){.card-portrait{width:calc(100vw - 66px)}.card-wide-v2{min-height:356px}.card-wide-v2 .imageholder img{border-radius:12px 12px 0 0!important}.cbpwidth{width:calc(100vw - 100px)}}"]
             }] }
 ];
@@ -8116,7 +8313,8 @@ CardLandscapeComponent.propDecorators = {
     showIntranetContent: [{ type: Input }],
     isIntranetAllowedSettings: [{ type: Input }],
     isCardLoading: [{ type: Input }],
-    contentData: [{ type: Output }]
+    contentData: [{ type: Output }],
+    triggerTelemetry: [{ type: Output }]
 };
 if (false) {
     /** @type {?} */
@@ -8132,6 +8330,8 @@ if (false) {
     /** @type {?} */
     CardLandscapeComponent.prototype.contentData;
     /** @type {?} */
+    CardLandscapeComponent.prototype.triggerTelemetry;
+    /** @type {?} */
     CardLandscapeComponent.prototype.isCardFlipped;
     /** @type {?} */
     CardLandscapeComponent.prototype.defaultThumbnail;
@@ -8347,13 +8547,18 @@ class CardMDOChannelComponent {
      * @param {?} translate
      * @param {?} langtranslations
      * @param {?} configSvc
+     * @param {?} contSvc
+     * @param {?} router
      */
-    constructor(events, translate, langtranslations, configSvc) {
+    constructor(events, translate, langtranslations, configSvc, contSvc, router) {
         this.events = events;
         this.translate = translate;
         this.langtranslations = langtranslations;
         this.configSvc = configSvc;
-        this.userData = new EventEmitter();
+        this.contSvc = contSvc;
+        this.router = router;
+        this.channelData = new EventEmitter();
+        this.emitTelemetry = new EventEmitter();
         this.widgetType = '';
         this.widgetSubType = '';
         this.langtranslations.languageSelectedObservable.subscribe((/**
@@ -8385,32 +8590,36 @@ class CardMDOChannelComponent {
         }
     }
     /**
+     * @param {?} contentData
      * @return {?}
      */
-    raiseTelemetry() {
-        // if(this.forPreview){
-        //   return
-        // }
-        this.events.raiseInteractTelemetry({
-            type: 'click',
-            subType: `${this.widgetType}-${this.widgetSubType}`,
-            id: `${camelCase(this.widgetData.content.userId)}-card`,
-        }, {
-            id: this.widgetData.content.userId,
-            // type: this.widgetData.user.primaryCategory,
-            //context: this.widgetData.context,
-            rollup: {},
-        }, {
-            pageIdExt: `${camelCase('user')}-card`,
-            module: camelCase('user'),
-        });
+    raiseTelemetry(contentData) {
+        this.emitTelemetry.emit(contentData);
+        if (this.widgetData) {
+            contentData['typeOfTelemetry'] = 'mdo-channel';
+        }
+        this.contSvc.changeTelemetryData(contentData);
+    }
+    /**
+     * @param {?} channeldata
+     * @return {?}
+     */
+    channelClick(channeldata) {
+        this.channelData.emit(channeldata);
+    }
+    /**
+     * @param {?} content
+     * @return {?}
+     */
+    redirectTo(content) {
+        this.router.navigate([`/app/learn/mdo-channels/${content.orgName}/${content.identifier}/micro-sites`]);
     }
 }
 CardMDOChannelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-mdo-channel',
-                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" \n                [routerLink]=\"['/app/learn/mdo-channels/asdfghj/123456/micro-sites']\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData.content.name\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData.content.posterImage\">\n                                    <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                    class=\"flex-1 text-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData.content.name }}\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
-                styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:0 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}"]
+                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry(widgetData.content); redirectTo(widgetData.content); $event.stopPropagation()\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData.content.name\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData.content.posterImage\">\n                                    <ng-container *ngIf=\"widgetData.content.imgUrl; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.imgUrl | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                    class=\"flex-1 text-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData?.content?.orgName }}\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:0 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]
             }] }
 ];
 /** @nocollapse */
@@ -8418,17 +8627,22 @@ CardMDOChannelComponent.ctorParameters = () => [
     { type: EventService },
     { type: TranslateService },
     { type: MultilingualTranslationsService$1 },
-    { type: ConfigurationsService$1 }
+    { type: ConfigurationsService$1 },
+    { type: WidgetContentService },
+    { type: Router }
 ];
 CardMDOChannelComponent.propDecorators = {
     widgetData: [{ type: Input }],
-    userData: [{ type: Output }]
+    channelData: [{ type: Output }],
+    emitTelemetry: [{ type: Output }]
 };
 if (false) {
     /** @type {?} */
     CardMDOChannelComponent.prototype.widgetData;
     /** @type {?} */
-    CardMDOChannelComponent.prototype.userData;
+    CardMDOChannelComponent.prototype.channelData;
+    /** @type {?} */
+    CardMDOChannelComponent.prototype.emitTelemetry;
     /** @type {?} */
     CardMDOChannelComponent.prototype.defaultThumbnail;
     /** @type {?} */
@@ -8459,6 +8673,13 @@ if (false) {
      * @private
      */
     CardMDOChannelComponent.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMDOChannelComponent.prototype.contSvc;
+    /** @type {?} */
+    CardMDOChannelComponent.prototype.router;
 }
 
 /**
@@ -8481,6 +8702,7 @@ class CardWideV2Component {
         this.configSvc = configSvc;
         this.isCardLoading = false;
         this.contentData = new EventEmitter();
+        this.triggerTelemetry = new EventEmitter();
         this.isCardFlipped = false;
         this.acbpConstants = NsCardContent$1.ACBPConst;
         this.showFlip = false;
@@ -8533,33 +8755,18 @@ class CardWideV2Component {
         this.contentData.emit(contentData);
     }
     /**
+     * @param {?} contentData
      * @return {?}
      */
-    raiseTelemetry() {
-        // if(this.forPreview){
-        //   return
-        // }
-        this.events.raiseInteractTelemetry({
-            type: 'click',
-            subType: `${this.widgetType}-${this.widgetSubType}`,
-            id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
-        }, {
-            id: this.widgetData.content.identifier,
-            type: this.widgetData.content.primaryCategory,
-            //context: this.widgetData.context,
-            rollup: {},
-            ver: `${this.widgetData.content.version}${''}`,
-        }, {
-            pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
-            module: camelCase(this.widgetData.content.primaryCategory),
-        });
+    raiseTelemetry(contentData) {
+        this.triggerTelemetry.emit(contentData);
     }
 }
 CardWideV2Component.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-wide-v2',
-                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"imageholder \">\n        <img mat-card-image class=\"margin-remove\"\n        [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n        [alt]=\"widgetData?.content?.name\">\n        <div class=\"source-div\" [hidden]=\"true\">\n          <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n        </div>\n        <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n          <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n          <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n        </div>\n        <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n          <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n            cbpData: cbPlanMapData[widgetData?.content?.identifier]\n          }}\"></ng-container>\n        </ng-container>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex flex-between margin-remove\">\n          <div class=\"flex flex-end course_v2\">\n            <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <span class=\"ws-mat-black60-text font-normal mat-caption \">\n                {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n                <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n              </span>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"flex main_title_box\">\n          <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n            <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n              {{widgetData?.content?.name}}\n            </a>\n        </p>\n        </div>\n\n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle provider\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n            </div>\n            <span class=\"org-text\">By&nbsp;\n              <!-- {{'cardcontentv2.by' | translate}}  -->\n              {{widgetData?.content?.organisation[0] }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon>star</mat-icon>\n              <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n  </mat-card>\n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n</ng-container>\n\n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"\">\n        <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex margin-remove\">\n          <div class=\"flex flex-end \">\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n  \n        <div class=\"flex main_title_box\">\n          <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n            <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        <!-- </p> -->\n        </div>\n  \n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>",
-                styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n      <div class=\"imageholder \">\n        <img mat-card-image class=\"margin-remove\"\n        [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n        [alt]=\"widgetData?.content?.name\">\n        <div class=\"source-div\" [hidden]=\"true\">\n          <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n        </div>\n        <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n          <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n          <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n        </div>\n        <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n          <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n            cbpData: cbPlanMapData[widgetData?.content?.identifier]\n          }}\"></ng-container>\n        </ng-container>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex flex-between margin-remove\">\n          <div class=\"flex flex-end course_v2\">\n            <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <span class=\"ws-mat-black60-text font-normal mat-caption \">\n                {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n                <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n              </span>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"flex main_title_box\">\n          <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n            <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n              {{widgetData?.content?.name}}\n            </a>\n        </p>\n        </div>\n\n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle provider\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n            </div>\n            <span class=\"org-text\">By&nbsp;\n              <!-- {{'cardcontentv2.by' | translate}}  -->\n              {{widgetData?.content?.organisation[0] }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon>star</mat-icon>\n              <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n  </mat-card>\n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n</ng-container>\n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"\">\n        <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex margin-remove\">\n          <div class=\"flex flex-end \">\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n  \n        <div class=\"flex main_title_box\">\n          <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n            <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        <!-- </p> -->\n        </div>\n  \n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>",
+                styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}"]
             }] }
 ];
 /** @nocollapse */
@@ -8577,7 +8784,8 @@ CardWideV2Component.propDecorators = {
     isIntranetAllowedSettings: [{ type: Input }],
     cbPlanMapData: [{ type: Input }],
     isCardLoading: [{ type: Input }],
-    contentData: [{ type: Output }]
+    contentData: [{ type: Output }],
+    triggerTelemetry: [{ type: Output }]
 };
 if (false) {
     /** @type {?} */
@@ -8595,6 +8803,8 @@ if (false) {
     /** @type {?} */
     CardWideV2Component.prototype.contentData;
     /** @type {?} */
+    CardWideV2Component.prototype.triggerTelemetry;
+    /** @type {?} */
     CardWideV2Component.prototype.isCardFlipped;
     /** @type {?} */
     CardWideV2Component.prototype.acbpConstants;
@@ -8647,12 +8857,16 @@ class CardKarmaProgramsComponent {
      * @param {?} translate
      * @param {?} langtranslations
      * @param {?} configSvc
+     * @param {?} contSvc
+     * @param {?} router
      */
-    constructor(events, translate, langtranslations, configSvc) {
+    constructor(events, translate, langtranslations, configSvc, contSvc, router) {
         this.events = events;
         this.translate = translate;
         this.langtranslations = langtranslations;
         this.configSvc = configSvc;
+        this.contSvc = contSvc;
+        this.router = router;
         this.randomColorApply = false;
         this.userData = new EventEmitter();
         this.widgetType = '';
@@ -8709,28 +8923,6 @@ class CardKarmaProgramsComponent {
                 this.widgetData.content['bgColor'] = '#1a4ca1';
             }
         }
-        console.log(this.widgetData.content, this.randomColorApply);
-    }
-    /**
-     * @return {?}
-     */
-    raiseTelemetry() {
-        // if(this.forPreview){
-        //   return
-        // }
-        this.events.raiseInteractTelemetry({
-            type: 'click',
-            subType: `${this.widgetType}-${this.widgetSubType}`,
-            id: `${camelCase(this.widgetData.content.userId)}-card`,
-        }, {
-            id: this.widgetData.content.userId,
-            // type: this.widgetData.user.primaryCategory,
-            //context: this.widgetData.context,
-            rollup: {},
-        }, {
-            pageIdExt: `${camelCase('user')}-card`,
-            module: camelCase('user'),
-        });
     }
     /**
      * @return {?}
@@ -8740,11 +8932,22 @@ class CardKarmaProgramsComponent {
         const randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomColors.length));
         return this.randomColors[randomIndex1];
     }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    redirectTo(data) {
+        if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
+            data['typeOfTelemetry'] = 'karma-programs';
+        }
+        this.contSvc.changeTelemetryData(data);
+        this.router.navigate([`/app/learn/karma-programs/${data.title}/${data.playListKey}/${data.orgId}/micro-sites`]);
+    }
 }
 CardKarmaProgramsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-karma-programs',
-                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" \n                [routerLink]=\"['/app/learn/karma-programs/asdfghj/123456/micro-sites']\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData.content.name\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData.content.posterImage\">\n                                    <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"title-container\">\n                                <div class=\"flex   px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                        class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.name }}\n                                    </div>\n                                </div>\n                                <div class=\"flex  px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                        class=\"flex-1 text-start margin-remove  margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.programCount}} Programs\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation();\">\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData.content.title\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData.content.posterImage\">\n                                    <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData?.content?.title\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData?.content?.title\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"title-container\">\n                                <div class=\"flex   px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                        class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.title }}\n                                    </div>\n                                </div>\n                                <div class=\"flex  px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                        class=\"flex-1 text-start margin-remove  margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.children?.length}} Programs\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
                 styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:139px;max-height:139px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]
             }] }
 ];
@@ -8753,7 +8956,9 @@ CardKarmaProgramsComponent.ctorParameters = () => [
     { type: EventService },
     { type: TranslateService },
     { type: MultilingualTranslationsService$1 },
-    { type: ConfigurationsService$1 }
+    { type: ConfigurationsService$1 },
+    { type: WidgetContentService },
+    { type: Router }
 ];
 CardKarmaProgramsComponent.propDecorators = {
     widgetData: [{ type: Input }],
@@ -8799,6 +9004,179 @@ if (false) {
      * @private
      */
     CardKarmaProgramsComponent.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.contSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardKarmaProgramsComponent.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CardKarmaProgramsV2Component {
+    /**
+     * @param {?} events
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} configSvc
+     * @param {?} router
+     */
+    constructor(events, translate, langtranslations, configSvc, router) {
+        this.events = events;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.router = router;
+        this.randomColorApply = false;
+        this.userData = new EventEmitter();
+        this.raiseTemeletry = new EventEmitter();
+        this.widgetType = '';
+        this.widgetSubType = '';
+        this.randomColors = [
+            '#EF941D',
+            '#F97440',
+            '#35B5B0',
+            '#9988FF',
+            '#254092',
+            '#926525',
+            '#4F72DF'
+        ];
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        () => {
+            if (localStorage.getItem('websiteLanguage')) {
+                this.translate.setDefaultLang('en');
+                /** @type {?} */
+                const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                this.translate.use(lang);
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        /** @type {?} */
+        const instanceConfig = this.configSvc.instanceConfig;
+        if (instanceConfig) {
+            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+            this.sourceLogos = instanceConfig.sources;
+            this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
+        }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+        this.setRandomColor();
+    }
+    /**
+     * @return {?}
+     */
+    setRandomColor() {
+        if (this.widgetData && this.widgetData.content) {
+            if (this.randomColorApply) {
+                /** @type {?} */
+                const 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 {?}
+     */
+    redirectTo(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']);
+    }
+    /**
+     * @return {?}
+     */
+    get getRandomColors() {
+        /** @type {?} */
+        const randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomColors.length));
+        return this.randomColors[randomIndex1];
+    }
+}
+CardKarmaProgramsV2Component.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-card-karma-programs-v2',
+                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation()\">\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-row md:flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData.content.title\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData.content.posterImage\">\n                                    <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData.content.appIcon | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData.content.title\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.title\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex items-center\">\n                                <div class=\"title-container\">\n                                    <div class=\"flex   px-2\">\n                                        <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                            class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                            {{ widgetData?.content?.title }}\n                                        </div>\n                                    </div>\n                                    <div class=\"flex  px-2\">\n                                        <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                            class=\"flex-1 text-start margin-remove  margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n                                            {{ widgetData?.content?.children?.length}} Programs\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:233px;height:233px;max-height:233px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:156px;max-height:156px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}@media screen and (max-width:768px){.card-channels-container{width:100%;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:unset;height:unset;max-height:unset;margin:0;padding:8px!important}.image-container{background-color:#fff;width:190px;height:106px;max-height:106px;border-radius:12px}}"]
+            }] }
+];
+/** @nocollapse */
+CardKarmaProgramsV2Component.ctorParameters = () => [
+    { type: EventService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService$1 },
+    { type: ConfigurationsService$1 },
+    { type: Router }
+];
+CardKarmaProgramsV2Component.propDecorators = {
+    widgetData: [{ type: Input }],
+    randomColorApply: [{ type: Input }],
+    userData: [{ type: Output }],
+    raiseTemeletry: [{ type: Output }]
+};
+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;
 }
 
 /**
@@ -8817,7 +9195,8 @@ CardsModule.decorators = [
                     CardWideComponent,
                     CardMDOChannelComponent,
                     CardWideV2Component,
-                    CardKarmaProgramsComponent
+                    CardKarmaProgramsComponent,
+                    CardKarmaProgramsV2Component
                 ],
                 imports: [
                     CommonModule,
@@ -8842,7 +9221,8 @@ CardsModule.decorators = [
                     CardWideComponent,
                     CardMDOChannelComponent,
                     CardWideV2Component,
-                    CardKarmaProgramsComponent
+                    CardKarmaProgramsComponent,
+                    CardKarmaProgramsV2Component
                 ],
             },] }
 ];
@@ -10252,5 +10632,5 @@ UserContentRatingLibModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, CardKarmaProgramsComponent as ɵbb, PipePublicURLModule as ɵbc, PipePublicURL as ɵbd, DisplayContentTypeLibModule as ɵbe, DisplayContentTypeLibComponent as ɵbf, DefaultThumbnailModule as ɵbg, DefaultThumbnailDirective as ɵbh, PipeDurationTransformModule as ɵbi, PipeDurationTransformPipe as ɵbj, CompetencyPassbookComponent as ɵbk, CompetencyPassbookService as ɵbl, PillsModule as ɵbm, PillsComponent as ɵbn, UserContentRatingLibComponent as ɵbo, ScrollableItemDirective as ɵbp, RatingService as ɵbq, UserContentRatingLibService as ɵbr, AvatarPhotoLibModule as ɵbs, AvatarPhotoLibComponent as ɵbt, MyHammerConfig$1 as ɵbu, SlidersNgContentLibModule as ɵbv, SlidersNgContentLibComponent as ɵbw, ScrollableItemModule as ɵbx, MultilingualTranslationsService as ɵc, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
+export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, CardKarmaProgramsComponent as ɵbb, CardKarmaProgramsV2Component as ɵbc, PipePublicURLModule as ɵbd, PipePublicURL as ɵbe, DisplayContentTypeLibModule as ɵbf, DisplayContentTypeLibComponent as ɵbg, DefaultThumbnailModule as ɵbh, DefaultThumbnailDirective as ɵbi, PipeDurationTransformModule as ɵbj, PipeDurationTransformPipe as ɵbk, CompetencyPassbookComponent as ɵbl, CompetencyPassbookService as ɵbm, PillsModule as ɵbn, PillsComponent as ɵbo, UserContentRatingLibComponent as ɵbp, ScrollableItemDirective as ɵbq, RatingService as ɵbr, UserContentRatingLibService as ɵbs, AvatarPhotoLibModule as ɵbt, AvatarPhotoLibComponent as ɵbu, MyHammerConfig$1 as ɵbv, SlidersNgContentLibModule as ɵbw, SlidersNgContentLibComponent as ɵbx, ScrollableItemModule as ɵby, MultilingualTranslationsService as ɵc, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map