@sunbird-cb/consumption 0.0.46 → 0.0.48

package/fesm2015/sunbird-cb-consumption.js

@@ -3731,9 +3731,15 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             let tabResults = [];
             /** @type {?} */
             const queryParams = get(strip.request.enrollmentList, 'queryParams');
+            // if (queryParams && queryParams.batchDetails) {
+            //   if (!queryParams.batchDetails.includes('&retiredCoursesEnabled=true')) {
+            //     queryParams.batchDetails += '&retiredCoursesEnabled=true'
+            //   }
+            // }
             if (this.configSvc.userProfile) {
                 userId = this.configSvc.userProfile.userId;
             }
+            // this.userSvc.resetTime('enrollmentService')
             // tslint:disable-next-line: deprecation
             this.userSvc.fetchUserBatchList(userId, queryParams).subscribe((/**
              * @param {?} result
@@ -3861,14 +3867,55 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         /** @type {?} */
         const inprogress = [];
         /** @type {?} */
-        const completed = [];
+        const completed = []
+        // array.forEach((e: any, idx: number, arr: any[]) => (customFilter(e, idx, arr) ? inprogress : completed).push(e))
+        ;
+        // array.forEach((e: any, idx: number, arr: any[]) => (customFilter(e, idx, arr) ? inprogress : completed).push(e))
         array.forEach((/**
          * @param {?} e
          * @param {?} idx
          * @param {?} arr
          * @return {?}
          */
-        (e, idx, arr) => (customFilter(e, idx, arr) ? inprogress : completed).push(e)));
+        (e, idx, arr) => {
+            /** @type {?} */
+            const status = e.status ? ((/** @type {?} */ (e.status))).toLowerCase() : '';
+            /** @type {?} */
+            const statusRetired = status === 'retired';
+            if (customFilter(e, idx, arr)) {
+                if (!statusRetired) {
+                    inprogress.push(e);
+                }
+            }
+            else {
+                completed.push(e);
+            }
+        }));
+        // Sort the completed array with 'Live' status first and 'Retired' status second
+        completed.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (a, b) => {
+            /** @type {?} */
+            const statusA = a.status ? a.status.toLowerCase() : '';
+            /** @type {?} */
+            const statusB = b.status ? b.status.toLowerCase() : '';
+            if (statusA === 'live' && statusB !== 'live') {
+                return -1;
+            }
+            if (statusA !== 'live' && statusB === 'live') {
+                return 1;
+            }
+            if (statusA === 'retired' && statusB !== 'retired') {
+                return 1;
+            }
+            if (statusA !== 'retired' && statusB === 'retired') {
+                return -1;
+            }
+            return 0;
+        }));
         return [
             { value: 'inprogress', widgets: this.transformContentsToWidgets(inprogress, strip) },
             { value: 'completed', widgets: this.transformContentsToWidgets(completed, strip) }
@@ -3967,17 +4014,41 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
             /** @type {?} */
             let filteredArray = [];
+            /** @type {?} */
+            let now = new Date().getTime();
             content.forEach((/**
              * @param {?} data
              * @return {?}
              */
             (data) => {
                 if (this.enrollmentMapData[data.identifier]) {
-                    data['batch'] = this.enrollmentMapData[data.identifier].batch;
-                    data['completionPercentage'] = this.enrollmentMapData[data.identifier].completionPercentage;
-                    filteredArray.push(data);
+                    if (this.enrollmentMapData[data.identifier].batch) {
+                        /** @type {?} */
+                        const enrollData = this.enrollmentMapData[data.identifier].batch;
+                        /** @type {?} */
+                        let endDateTime = new Date(`${(enrollData.endDate)}T${enrollData.endTime}`);
+                        /** @type {?} */
+                        let timeDuration = endDateTime.getTime() - now;
+                        if (timeDuration > 0) {
+                            data['batch'] = this.enrollmentMapData[data.identifier].batch;
+                            data['completionPercentage'] = this.enrollmentMapData[data.identifier].completionPercentage;
+                            filteredArray.push(data);
+                        }
+                    }
                 }
             }));
+            filteredArray = filteredArray.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            (a, b) => {
+                /** @type {?} */
+                const dateA = new Date(a.batch.startDate || 0);
+                /** @type {?} */
+                const dateB = new Date(b.batch.startDate || 0);
+                return dateB - dateA;
+            }));
             this.processStrip(strip, this.transformContentsToWidgets(filteredArray, strip), 'done', calculateParentStatus, viewMoreUrl);
             clearInterval(this.enrollInterval);
         }
@@ -5006,7 +5077,15 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                      */
                     results => {
                         /** @type {?} */
-                        const showViewMore = Boolean(results.result.data && results.result.data.orgList.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                        let showViewMore;
+                        if (results.result.data) {
+                            showViewMore = Boolean(results.result.data && results.result.data.orgList.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                        }
+                        else if (results.result.content) {
+                            /** @type {?} */
+                            let featuredProvider = JSON.parse(results.result.content.featuredProviders || '[]');
+                            showViewMore = Boolean(featuredProvider && featuredProvider.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                        }
                         /** @type {?} */
                         const viewMoreUrl = showViewMore
                             ? {
@@ -5052,6 +5131,9 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
             formedUrl = apiUrl.replace('<playlistKey>', this.providerId + id);
             formedUrl = formedUrl.replace('<orgID>', this.providerId);
         }
+        else if (apiUrl.indexOf('<doId>') >= 0) {
+            formedUrl = apiUrl.replace('<doId>', this.environment.providerDataKey);
+        }
         return formedUrl;
     }
     /**
@@ -5211,7 +5293,14 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                     if (response && response.results.result.content) {
                         /** @type {?} */
                         let content = response.results.result.content;
-                        this.processStrip(strip, this.transformAllContentsToWidgets(content, strip), 'done', calculateParentStatus, response);
+                        if (strip.key === 'providers') {
+                            /** @type {?} */
+                            let featuredProviders = JSON.parse(content.featuredProviders || '[]');
+                            this.processStrip(strip, this.transformAllContentsToWidgets(featuredProviders, strip), 'done', calculateParentStatus, response);
+                        }
+                        else {
+                            this.processStrip(strip, this.transformAllContentsToWidgets(content, strip), 'done', calculateParentStatus, response);
+                        }
                     }
                     else {
                         this.processStrip(strip, [], 'error', calculateParentStatus, null);
@@ -5234,7 +5323,6 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
     fetchCiosContentData(strip, calculateParentStatus = true) {
         return __awaiter(this, void 0, void 0, function* () {
             if (strip.request && strip.request.ciosContent && Object.keys(strip.request.ciosContent).length) {
-                debugger;
                 /** @type {?} */
                 let originalFilters = [];
                 if (strip.request &&
@@ -7698,7 +7786,7 @@ class CardsComponent extends WidgetBaseComponent {
 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-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></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 *ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\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 \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (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\" \n  [cbPlanMapData]=\"cbPlanMapData\" [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    [cbPlanMapData]=\"cbPlanMapData\"\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 #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\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 #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" [enrollmentMapData]=\"enrollmentMapData\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\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>\n<ng-template #cardProvider>\n  <sb-uic-provider-card ></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n",
+                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-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></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 *ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\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 \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (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\" \n  [cbPlanMapData]=\"cbPlanMapData\" [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    [cbPlanMapData]=\"cbPlanMapData\"\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 #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n  <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [isCardLoading]=\"true\"  [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n  <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" [enrollmentMapData]=\"enrollmentMapData\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n  <sb-uic-card-progress-portrait-lib \n  [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\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>\n<ng-template #cardProvider>\n  <sb-uic-provider-card  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n  <sb-uic-provider-card  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n",
                 styles: [""]
             }] }
 ];
@@ -7853,7 +7941,7 @@ 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  {{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>\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>",
+                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]  &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\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>\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>",
                 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}.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}"]
             }] }
 ];
@@ -8547,7 +8635,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(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 \" [useTranslation]=\"false\" [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\">By {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\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 \" [useTranslation]=\"false\" [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] &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\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\">By {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\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)}}.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}"]
             }] }
 ];
@@ -8812,6 +8900,7 @@ class CardMDOChannelComponent {
         this.router = router;
         this.channelData = new EventEmitter();
         this.emitTelemetry = new EventEmitter();
+        this.isCardLoading = false;
         this.widgetType = '';
         this.widgetSubType = '';
         this.langtranslations.languageSelectedObservable.subscribe((/**
@@ -8871,7 +8960,7 @@ class CardMDOChannelComponent {
 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(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?.imgUrl; else defaultImg\">\n                                    <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData?.content?.orgName\" />\n                                </ng-container>\n                                <ng-template #defaultImg>\n                                    <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n                                    </sb-uic-avatar-photo>\n                                </ng-template>\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>",
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n    <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?.imgUrl; else defaultImg\">\n                                        <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n                                        class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                        [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                        <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n                                        </sb-uic-avatar-photo>\n                                    </ng-template>\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>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n        <div class=\"display-contents\">\n            <ng-container >\n                <a 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                                    <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\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>\n</ng-container>",
                 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:20px 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}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]
             }] }
 ];
@@ -8887,7 +8976,8 @@ CardMDOChannelComponent.ctorParameters = () => [
 CardMDOChannelComponent.propDecorators = {
     widgetData: [{ type: Input }],
     channelData: [{ type: Output }],
-    emitTelemetry: [{ type: Output }]
+    emitTelemetry: [{ type: Output }],
+    isCardLoading: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -8897,6 +8987,8 @@ if (false) {
     /** @type {?} */
     CardMDOChannelComponent.prototype.emitTelemetry;
     /** @type {?} */
+    CardMDOChannelComponent.prototype.isCardLoading;
+    /** @type {?} */
     CardMDOChannelComponent.prototype.defaultThumbnail;
     /** @type {?} */
     CardMDOChannelComponent.prototype.sourceLogos;
@@ -9440,134 +9532,13 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class ProviderCardComponent {
-    constructor() {
-        this.providers = [
-            {
-                name: 'Indian Institute of Management Bengaluru (IIMB)',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/IIMB/all-CBP',
-                logo: 'assets/icons/top-providers/ef8a88cf-33cc-42de-bdc3-7deed1ab2418.png'
-            },
-            {
-                name: 'Department for Promotion of Industry and Internal Trade',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Department for Promotion of Industry and Internal Trade/all-CBP',
-                logo: 'assets/icons/top-providers/0d400bdf-4ad8-45bf-914c-be44018c2d07.png'
-            },
-            {
-                name: 'RAKNPA',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/RAKNPA/all-CBP',
-                logo: 'assets/icons/top-providers/1becfffa-956e-48ba-8ffd-77c19cd720c8.jpeg'
-            },
-            {
-                name: 'Lal Bahadur Shastri National Academy of Administration (LBSNAA)',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Ministry of Environment, Forest and Climate Change/all-CBP',
-                logo: 'assets/icons/top-providers/1d76c041-a7c9-437c-94d9-36d997f3804c.jpeg'
-            },
-            {
-                name: 'Ministry of Environment, Forest and Climate Change',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/LBSNAA/all-CBP',
-                logo: 'assets/icons/top-providers/1fb72c3f-1c96-4600-8e22-09871a85e6c4.jpeg'
-            },
-            {
-                name: 'ISTM',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Institute of Secretariat Training and Management/all-CBP',
-                logo: 'assets/icons/top-providers/6f046f76-b778-476a-987b-8669e106b44c.jpeg'
-            },
-            {
-                name: 'Department of Expenditure',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Department%20of%20Expenditure%20/all-CBP',
-                logo: 'assets/icons/top-providers/7f6df809-6930-44f4-abcf-c8297363d3e0.png'
-            },
-            {
-                name: 'Department of Personnel and Training DoPT',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Department%20of%20Personnel%20and%20Training%20DoPT/all-CBP',
-                logo: 'assets/icons/top-providers/dopt.png'
-            },
-            {
-                name: 'Indian Cybercrime Coordination Centre - I4C',
-                link: 'https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Indian%20Cybercrime%20Coordination%20Centre%20-%20I4C/all-CBP',
-                logo: 'assets/icons/top-providers/7f8cab8e-9d22-44ba-a41e-83b907e5a5f0.jpeg'
-            },
-            {
-                "name": "Capacity Building Commission",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Capacity%20Building%20Commission/all-CBP",
-                "logo": "assets/icons/top-providers/33e9c66f-312f-4244-901e-7d7525ae8847.jpeg"
-            },
-            {
-                "name": "Ministry of Railways",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Ministry%20of%20Railways/all-CBP",
-                "logo": "assets/icons/top-providers/36d93700-c43f-499e-ab3c-68ea76388a2a.png"
-            },
-            {
-                "name": "World Bank",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/World%20Bank/all-CBP",
-                "logo": "assets/icons/top-providers/385ff4a0-41af-4114-8015-10d26c1e8af4.jpeg"
-            },
-            {
-                "name": "Sashastra Seema Bal (SSB)",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Sashastra%20Seema%20Bal%20%28SSB%29/all-CBP",
-                "logo": "assets/icons/top-providers/778b56bf-8946-45fe-87d3-358203f2faf4.png"
-            },
-            {
-                "name": "SVPNPA",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/SVPNPA/all-CBP",
-                "logo": "assets/icons/top-providers/2862d2e5-473e-4c55-abaa-8a2f86e5eee4.jpeg"
-            },
-            {
-                "name": "Microsoft",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Microsoft/all-CBP",
-                "logo": "assets/icons/top-providers/53407dd6-d22c-4dba-a394-015fae667636.png"
-            },
-            {
-                "name": "Indian Institute of Public Administration",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Indian%20Institute%20of%20Public%20Administration/all-CBP",
-                "logo": "assets/icons/top-providers/869960d7-2dc7-4205-8c4b-11321d901060.jpeg"
-            },
-            {
-                "name": "Food Corporation of India (FCI)",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Food%20Corporation%20of%20India%20%28FCI%29/all-CBP",
-                "logo": "assets/icons/top-providers/4183673f-9063-4fa9-bf84-1e8856c8e531.jpeg"
-            },
-            {
-                "name": "National Telecommunications Institute for Policy Research, Innovation and Training",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/NTIPRIT/all-CBP",
-                "logo": "assets/icons/top-providers/a976f025-e990-49b0-a52a-9bd0a8e43584.jpeg"
-            },
-            {
-                "name": "The Art of Living",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/The%20Art%20of%20Living/all-CBP",
-                "logo": "assets/icons/top-providers/abbb8f64-84db-4a92-85c9-1b394ffab71c.png"
-            },
-            {
-                "name": "National Institute of Communication Finance",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/National%20Institute%20of%20Communication%20Finance/all-CBP",
-                "logo": "assets/icons/top-providers/b6bf0be6-7e29-4187-a29d-da6db1db7c69.jpeg"
-            },
-            {
-                "name": "Department of Posts",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Department%20of%20Posts/all-CBP",
-                "logo": "assets/icons/top-providers/cf567f4c-d0fa-447f-aba4-cb378ea3c90d.png"
-            },
-            {
-                "name": "Government e Market Place(GeM)",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Government%20e%20Market%20Place%28GeM%29/all-CBP",
-                "logo": "assets/icons/top-providers/f445c11b-ff73-4ca4-9dea-8d8945d92a4a.png"
-            },
-            {
-                "name": "Bharat Sanchar Nigam Limited(BSNL)",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Bharat%20Sanchar%20Nigam%20Limited%28BSNL%29/all-CBP",
-                "logo": "assets/icons/top-providers/fc67226a-4bbc-449a-8c5c-e1b338716545.png"
-            },
-            {
-                "name": "Defence Accounts Department (DAD)",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Defence%20Accounts%20Department%20%28DAD%29/all-CBP",
-                "logo": "assets/icons/top-providers/fccdb487-a389-48d9-bce0-c4d64315b546.png"
-            },
-            {
-                "name": "Morarji Desai National Institute of Yoga (MDNIY)",
-                "link": "https://portal.igotkarmayogi.gov.in/app/learn/browse-by/provider/Morarji%20Desai%20National%20Institute%20of%20Yoga%20%28MDNIY%29/all-CBP",
-                "logo": "assets/icons/top-providers/fcde4c60-7ccd-456e-a5df-260dcfa2d3ee.png"
-            }
-        ];
+    /**
+     * @param {?} router
+     */
+    constructor(router) {
+        this.router = router;
+        this.randomColorApply = true;
+        this.isCardLoading = false;
         this.colors = [
             '#EF941D', '#F97440', '#35B5B0', '#9988FF', '#816FEC',
             '#254092', '#926525', '#4F72DF'
@@ -9577,29 +9548,61 @@ class ProviderCardComponent {
      * @return {?}
      */
     ngOnInit() {
+        this.setRandomColor();
+    }
+    /**
+     * @return {?}
+     */
+    setRandomColor() {
+        if (this.widgetData && this.widgetData.content) {
+            if (this.randomColorApply) {
+                /** @type {?} */
+                const randomIndex1 = Math.floor(Math.random() * Math.floor(this.colors.length));
+                this.widgetData.content['bgColor'] = this.colors[randomIndex1];
+            }
+            else {
+                this.widgetData.content['bgColor'] = '#1a4ca1';
+            }
+        }
     }
     /**
-     * @param {?} provider
+     * @param {?} content
      * @return {?}
      */
-    redirectTo(provider) {
-        window.open(provider.link, '_blank');
+    redirectTo(content) {
+        this.router.navigate([`/app/learn/browse-by/provider/${content.name}/${content.orgId}/micro-sites`]);
     }
 }
 ProviderCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-provider-card',
-                template: "<div class=\"providers-container\">\n    <div class=\"provider-card\" *ngFor=\"let provider of providers; let i = index\" [ngStyle]=\"{'border-top': '72px solid ' + colors[i % colors.length]}\">\n      <div class=\"circle-wrapper\">\n        <div class=\"circle\">\n          <div class=\"background-circle\">\n            <img [src]=\"provider.logo\" alt=\"{{ provider.name }}\">\n          </div>\n        </div>\n      </div>\n      <div class=\"provider-content\">\n        <p>{{ provider.name }}</p>\n        <div class=\"view-provider-button\" (click)=\"redirectTo(provider)\">View Provider ></div>\n      </div>\n    </div>\n  </div>\n  ",
+                template: "<!-- <div class=\"providers-container\">\n    <div class=\"provider-card\" *ngFor=\"let provider of providers; let i = index\" [ngStyle]=\"{'border-top': '72px solid ' + colors[i % colors.length]}\">\n      <div class=\"circle-wrapper\">\n        <div class=\"circle\">\n          <div class=\"background-circle\">\n            <img [src]=\"provider.logo\" alt=\"{{ provider.name }}\">\n          </div>\n        </div>\n      </div>\n      <div class=\"provider-content\">\n        <p>{{ provider.name }}</p>\n        <div class=\"view-provider-button\" (click)=\"redirectTo(provider)\">View Provider ></div>\n      </div>\n    </div>\n  </div> -->\n  <!-- {{widgetData|json}} -->\n\n\n<ng-container *ngIf=\"!isCardLoading\">\n  <ng-container *ngIf=\"widgetData && widgetData?.content\">\n    <div class=\"providers-container\">\n      <div class=\"provider-card\" [ngStyle]=\"{'border-top': '72px solid ' + widgetData?.content?.bgColor || 'transparent'}\">\n        <div class=\"circle-wrapper\">\n          <div class=\"circle\">\n            <div class=\"background-circle\">\n              <ng-container *ngIf=\"widgetData?.content?.logoUrl; else defaultImg\">\n                <img [src]=\"widgetData?.content?.logoUrl\" alt=\"{{  widgetData?.content?.name }}\">\n              </ng-container>\n              <ng-template #defaultImg>\n                <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.name\" [photoUrl]=\"widgetData?.content?.logoUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n              </ng-template>\n              \n            </div>\n          </div>\n        </div>\n        <div class=\"provider-content\">\n          <p>{{ widgetData?.content?.name }}</p>\n          <div class=\"view-provider-button flex items-center\" (click)=\"redirectTo(widgetData.content)\">View Provider \n            <mat-icon class=\"\" color=\"accent\">navigate_next</mat-icon></div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"isCardLoading\">\n    <div class=\"providers-container\">\n      <div class=\"provider-card\" [ngStyle]=\"{'border-top': '72px solid gray'}\">\n        <div class=\"circle-wrapper\">\n          <div class=\"circle\">\n            <div class=\"background-circle\">\n              <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded rounded-full'\"></sb-uic-skeleton-loader>\n            </div>\n          </div>\n        </div>\n        <div class=\"w-full p-4 provider-content\">\n          <p class=\"w-full pl-4\"> <sb-uic-skeleton-loader [width]=\"'200px'\" [height]=\"'12px'\" class=\"w-full h-full\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></p>\n          <div class=\"w-full pl-4 view-provider-button\" (click)=\"redirectTo(widgetData.content)\"><sb-uic-skeleton-loader [width]=\"'200px'\" [height]=\"'12px'\"  class=\"w-full h-full\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></div>\n        </div>\n      </div>\n    </div>\n</ng-container>",
                 styles: [".providers-container{display:flex;justify-content:center}.provider-card{height:168px;width:245px;margin:20px 8px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:#fff;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;z-index:1}.circle-wrapper{position:absolute;display:flex;justify-content:center;top:-50px;z-index:1}.circle{width:90px;height:90px;border-radius:50%;background-color:#f0f0f0;box-shadow:0 4px 8px rgba(0,0,0,.1)}.background-circle{position:relative;display:flex;justify-content:center;align-items:center;height:80px;width:80px;background-color:#fff;border-radius:50%;border:5px solid #fff;margin:0 auto}.background-circle img{width:66px;height:50px;background-size:cover;background-position:center;position:relative}.provider-content{padding:16px;text-align:center;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.provider-content p{font-size:14px;font-weight:700;font-family:Lato,sans-serif;margin-bottom:8px;line-height:16.8px;word-wrap:break-word;white-space:normal;height:51px}.view-provider-button{color:#1b4ca1;font-size:14px;font-family:Lato,sans-serif;cursor:pointer;transition:color .3s}"]
             }] }
 ];
 /** @nocollapse */
-ProviderCardComponent.ctorParameters = () => [];
+ProviderCardComponent.ctorParameters = () => [
+    { type: Router }
+];
+ProviderCardComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    randomColorApply: [{ type: Input }],
+    isCardLoading: [{ type: Input }]
+};
 if (false) {
     /** @type {?} */
-    ProviderCardComponent.prototype.providers;
+    ProviderCardComponent.prototype.widgetData;
+    /** @type {?} */
+    ProviderCardComponent.prototype.randomColorApply;
+    /** @type {?} */
+    ProviderCardComponent.prototype.isCardLoading;
     /** @type {?} */
     ProviderCardComponent.prototype.colors;
+    /**
+     * @type {?}
+     * @private
+     */
+    ProviderCardComponent.prototype.router;
 }
 
 /**
@@ -9683,7 +9686,7 @@ class CardPortraitExtComponent {
 CardPortraitExtComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-portrait-ext',
-                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 \" 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?.contentId)\" />\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=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId]\">\n              <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                cbpData: cbPlanMapData[widgetData?.content?.contentId]\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 [useTranslation]=\"false\" i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.topic\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n                  ?'Module'\n                  :widgetData?.content?.primaryCategory? widgetData?.content?.primaryCategory : 'Course'\">\n  \n                </sb-uic-display-content-type>\n              </div>\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.contentId\"\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.contentId)\" />\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>\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>",
+                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 \" 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?.contentId)\" />\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=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId] &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2 \">\n              <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                cbpData: cbPlanMapData[widgetData?.content?.contentId]\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 [useTranslation]=\"false\" i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.topic\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n                  ?'Module'\n                  :widgetData?.content?.primaryCategory? widgetData?.content?.primaryCategory : 'Course'\">\n  \n                </sb-uic-display-content-type>\n              </div>\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.contentId\"\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.contentId)\" />\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>\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>",
                 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}.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}"]
             }] }
 ];
@@ -9807,52 +9810,46 @@ class CardAssessmentComponent {
      * @return {?}
      */
     startCountdown(data) {
-        this.updateCountdown(data.startDate, data.endDate);
-        // Update the countdown every second
+        /** @type {?} */
+        let startDate = data.startDate;
+        /** @type {?} */
+        let startTime = data.startTime;
+        this.updateCountdown(startDate, startTime);
         this.intervalId = setInterval((/**
          * @return {?}
          */
         () => {
-            this.updateCountdown(data.startDate, data.endDate);
+            this.updateCountdown(startDate, startTime);
         }), 1000);
     }
     // Method to update the countdown values
     /**
      * @param {?} startDate
-     * @param {?} endDate
+     * @param {?} startTime
      * @return {?}
      */
-    updateCountdown(startDate, endDate) {
+    updateCountdown(startDate, startTime) {
         /** @type {?} */
         const now = new Date().getTime();
-        // Current time in milliseconds
-        /** @type {?} */
-        const targetTime = new Date(startDate).getTime();
-        /** @type {?} */
-        const targetEndDate = new Date(endDate).getTime();
         /** @type {?} */
-        const distance = targetTime - now;
-        // Distance in milliseconds
+        const startDateTime = new Date(`${startDate}T${startTime}`);
         /** @type {?} */
-        const endDistance = now - targetEndDate;
+        const distance = startDateTime.getTime() - now;
         if (distance > 0) {
-            this.daysRemaining = Math.ceil(distance / (1000 * 60 * 60 * 24));
             this.daysPending = true;
+            // this.days = Math.ceil(distance / (1000 * 60 * 60 * 24));
+            // this.hours = Math.ceil(distance / (1000 * 60 * 60));
+            // this.minutes = Math.ceil((distance % (1000 * 60 * 60)) / (1000 * 60));
+            this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
         }
         else {
             this.daysRemaining = 0;
             this.daysPending = false;
             this.clearTimer();
         }
-        if (endDistance > 0) {
-            this.daysFinish = true;
-            this.clearTimer();
-        }
-        else {
-            this.daysFinish = false;
-        }
     }
-    // Method to clear the interval
     /**
      * @return {?}
      */
@@ -9882,8 +9879,8 @@ class CardAssessmentComponent {
 CardAssessmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-assessment',
-                template: "\n<ng-container *ngIf=\"!isCardLoading\">\n\t<ng-container *ngIf=\"!daysFinish\">\n\t<mat-card class=\"card-assessment card-scheduled-assessment card-users-container  padding-remove cursor-pointer mr-4\">\n\t<a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n\t\t<div class=\"display-contents\">\n\t\t\t<ng-container *ngIf=\"widgetData\">\n\t\t\t\t<mat-card-content>\n\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t<img mat-card-image class=\"margin-remove assess-img\" [src]=\"widgetData?.content?.posterImage | pipePublicURL\"\n\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\">\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t<ng-template #defaultImg>\n\t\t\t\t\t\t\t\t\t\t<img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"card-wide-img ws-mat-primary-lite-background margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\" />\n\t\t\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"flex title-container flex-col\">\n\t\t\t\t\t\t\t\t<div class=\"flex title-text mat-subheading-1\">\n\t\t\t\t\t\t\t\t\t{{ widgetData?.content?.name }}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-s font-normal mat-caption sub-title-text\">\n\t\t\t\t\t\t\t\t\t<div class=\"course_logo_box\">\n\t\t\t\t\t\t\t\t\t\t<img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\"\n\t\t\t\t\t\t\t\t\t\t\t[wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n\t\t\t\t\t\t\t\t\t\t\t[alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<span class=\"sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t{{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ?\n\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"start-span\">Assessment starts in </span>\n\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer  padding-m\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t<span *ngIf=\"daysPending\"> {{ startCountdown(widgetData?.content?.batch?.startDate) }}<div id=\"demo\"></div> </span>\n\t\t\t\t\t\t\t\t\t<span *ngIf=\"!daysPending\" class=\"start-btn\"> Start Assessment  </span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t<span class=\"time-span flex items-center justify-center\">{{widgetData?.content?.batch?.startDate | date: 'd MMM, y' }}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t</div>\n\t\t\t\t</mat-card-content>\n\t\t\t</ng-container>\n\t\t</div>\n\t</a>\n</mat-card>\n</ng-container>\n</ng-container>\n\n\n\n<ng-container *ngIf=\"isCardLoading\">\n\t<ng-container  [ngTemplateOutlet]=\"skeltonLoader\"></ng-container>\n</ng-container>\n\n<ng-template #skeltonLoader>\n\n\t<mat-card class=\"card-assessment card-scheduled-assessment card-users-container  padding-remove cursor-pointer mr-4\">\n\t\t<a>\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container>\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container>\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'155px'\"\n\t\t\t\t\t\t\t\t\t\t\t></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-l font-normal\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- <span class=\"text-center\"><sb-uic-skeleton-loader [width]=\"'90px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader> </span> -->\n\t\t\t\t\t\t\t<mat-card-footer\n\t\t\t\t\t\t\t\tclass=\"assessment-card-footer col-row padding-l\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-template>\n\n",
-                styles: [".card-assessment{width:100%;min-height:190px;box-sizing:border-box;min-width:340px;margin-top:16px;margin-right:12px;border-radius:12px}.image-container{width:145px;height:120px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}.image-container img{border-radius:8px;opacity:1;background-size:100%;width:145px!important;height:120px!important;display:flex}.title-container{width:155px;margin-left:12px}.title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:48px;font:600 14px/24px Montserrat}.sub-title-text{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;margin-right:4px;box-shadow:0 2px 1px -1px rgb(0 0 0 / 20%),0 1px 1px 0 rgb(0 0 0 / 14%),0 1px 3px 0 rgb(0 0 0 / 12%)}.course_logo_box img.source-icon{height:28px;width:28px;padding:5px;display:inline-block}.mat-card-footer{margin:0!important}.time-span{padding:2px 8px;color:#fff;border-radius:4px;text-align:center;font-size:12px;background-color:green;width:75px}span.start-span{border-radius:50px;border:2px solid rgba(0,0,0,.08);font-size:12px;text-align:center;position:absolute;bottom:0;width:140px;left:50%;margin-left:-70px;background-color:#fff;margin-bottom:62px;margin-right:8px}.assessment-card-footer{background:rgba(239,149,30,.16)!important;text-align:center;box-sizing:border-box;border-radius:0 0 8px 8px}.start-btn{background:#1b4ca1!important;color:#fff;font-size:14px;font-weight:600;border-radius:25px;text-align:center;padding:4px 12px}.dots-container{display:none}"]
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n\t<mat-card class=\"card-assessment card-scheduled-assessment card-users-container  padding-remove cursor-pointer mr-4\">\n\t\t<a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container *ngIf=\"widgetData\">\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t\t<img mat-card-image class=\"margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t[src]=\"widgetData?.content?.posterImage | pipePublicURL\" [alt]=\"widgetData?.content?.name\">\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t\t<ng-template #defaultImg>\n\t\t\t\t\t\t\t\t\t\t\t<img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"card-wide-img ws-mat-primary-lite-background margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\" />\n\t\t\t\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex title-text mat-subheading-1\">\n\t\t\t\t\t\t\t\t\t\t{{ widgetData?.content?.name }}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-s font-normal mat-caption sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"course_logo_box\">\n\t\t\t\t\t\t\t\t\t\t\t<img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t[wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n\t\t\t\t\t\t\t\t\t\t\t\t[alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<span class=\"sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t{{ (widgetData?.content?.organisation &&\n\t\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0]) ?\n\t\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<span class=\"start-span\">Assessment starts in </span>\n\t\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer  padding-m\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t\t<span >{{ startCountdown(widgetData?.content?.batch) }}</span>\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"daysPending\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"big-text\"><b>{{ days }}</b> <span class=\"small-text\">days</span> </span> : <span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"big-text\"><b>{{ hours }} </b><span class=\"small-text\">hours</span>\n\t\t\t\t\t\t\t\t\t\t\t</span> : <span class=\"big-text\"> <b>{{ minutes }}</b> <span class=\"small-text\">minutes</span>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"!daysPending\" class=\"start-btn\"> Start Assessment </span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"time-span flex items-center justify-center\">{{widgetData?.content?.batch?.startDate\n\t\t\t\t\t\t\t\t\t\t\t| date: 'd MMM, y' }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-container>\n\n<ng-container *ngIf=\"isCardLoading\">\n\t<ng-container [ngTemplateOutlet]=\"skeltonLoader\"></ng-container>\n</ng-container>\n\n<ng-template #skeltonLoader>\n\t<mat-card class=\"card-assessment card-scheduled-assessment card-users-container  padding-remove cursor-pointer mr-4\">\n\t\t<a>\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container>\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container>\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'155px'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-l font-normal\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- <span class=\"text-center\"><sb-uic-skeleton-loader [width]=\"'90px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader> </span> -->\n\t\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer col-row padding-l\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-template>",
+                styles: [".card-assessment{width:100%;min-height:190px;box-sizing:border-box;min-width:340px;margin-top:16px;margin-right:12px;border-radius:12px}.image-container{width:145px;height:120px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}.image-container img{border-radius:8px;opacity:1;background-size:100%;width:145px!important;height:120px!important;display:flex}.title-container{width:155px;margin-left:12px}.title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:48px;font:600 14px/24px Montserrat}.sub-title-text{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;margin-right:4px;box-shadow:0 2px 1px -1px rgb(0 0 0 / 20%),0 1px 1px 0 rgb(0 0 0 / 14%),0 1px 3px 0 rgb(0 0 0 / 12%)}.course_logo_box img.source-icon{height:28px;width:28px;padding:5px;display:inline-block}.mat-card-footer{margin:0!important}.time-span{padding:2px 8px;color:#fff;border-radius:4px;text-align:center;font-size:12px;background-color:green;width:75px}span.start-span{border-radius:50px;border:2px solid rgba(0,0,0,.08);font-size:12px;text-align:center;position:absolute;bottom:0;width:140px;left:50%;margin-left:-70px;background-color:#fff;margin-bottom:62px;margin-right:8px}.assessment-card-footer{background:rgba(239,149,30,.16)!important;text-align:center;box-sizing:border-box;border-radius:0 0 8px 8px}.start-btn{background:#1b4ca1!important;color:#fff;font-size:14px;font-weight:600;border-radius:25px;text-align:center;padding:4px 12px}.dots-container{display:none}.big-text{font-size:14px}.small-text{font-size:12px!important;vertical-align:top}"]
             }] }
 ];
 /** @nocollapse */
@@ -9931,6 +9928,12 @@ if (false) {
      * @private
      */
     CardAssessmentComponent.prototype.intervalId;
+    /** @type {?} */
+    CardAssessmentComponent.prototype.days;
+    /** @type {?} */
+    CardAssessmentComponent.prototype.hours;
+    /** @type {?} */
+    CardAssessmentComponent.prototype.minutes;
     /**
      * @type {?}
      * @private
@@ -10372,7 +10375,7 @@ class CardProgressPortraitLibComponent {
 CardProgressPortraitLibComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-progress-portrait-lib',
-                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-portrait card-progress-portrait-lib cursor-pointer\" [ngClass]=\"widgetData?.cardCustomeClass ? widgetData?.cardCustomeClass : ''\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" >\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>\n    </div>\n    <ng-container *ngIf=\"widgetData?.content?.completionPercentage < 100\">\n      <div class=\"flex flex-align-end progress-wrapper flex-between\" >\n        <div class=\"progress-block\" >\n          <div class=\"completed-time\">\n            <mat-icon class=\"mat-icon  schedule margin-right-xs\">schedule</mat-icon>\n            <span>{{widgetData?.content?.completionPercentage}}%</span>\n          </div>\n          <div>\n            <ng-container *ngIf=\"widgetData?.content?.completionStatus < 2\">\n              <sb-uic-content-progress class=\"progress-bar-new\" [customClassName]=\"'course-progress-bar'\" *ngIf=\"widgetData?.content?.identifier\"\n              [contentId]=\"widgetData?.content?.identifier\" [progress]=\"widgetData?.content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </sb-uic-content-progress>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"progress-btn\">\n          <button class=\"resume-btn flex flex-middle flex-between\" [routerLink]=\"['/app/toc/',widgetData?.content?.identifier,'overview']\"\n          [queryParams]=\"{primaryCategory: widgetData?.content?.primaryCategory}\" [state]=\"widgetData?.stateData\" \n          [matTooltipPosition]=\"'below'\"\n          [matTooltipDisabled]=\"(!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')).length < 11\"\n          matTooltip=\"{{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}\">\n            <span class=\"textwrap margin-right-xs\">\n              {{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}</span>\n            <img class=\"stats-icon\" height=\"20\" width=\"20\" src=\"/assets/icons/home/play.svg\">\n          </button>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"widgetData?.content?.completionPercentage === 100\">\n      <div class=\"flex flex-align-end progress-wrapper flex-end mt-1\">\n        <div class=\"progress-btn\">\n          <button class=\"resume-btn flex flex-middle flex-between view-btn\" [ngClass]=\"{'disable-btn': downloadCertificateLoading || widgetData?.content?.issuedCertificates?.length === 0}\" (click)=\"!downloadCertificateLoading && downloadCertificate(widgetData?.content);$event.stopPropagation()\" \n          [matTooltipPosition]=\"'below'\"\n          [matTooltipDisabled]=\"(translateLabels('viewCertificate', 'cardcontentv2')).length < 11\"\n          matTooltip=\"{{'cardcontentv2.viewCertificate' | translate }}\">\n            <span class=\"margin-right-xs textwrap\">{{'cardcontentv2.viewCertificate' | translate }}</span>\n            <img class=\"stats-icon\" *ngIf=\"!downloadCertificateLoading\" height=\"20\" width=\"20\" src=\"/assets/icons/home/eye-white.svg\">\n            <div class=\"center flex flex-middle\"  *ngIf=\"downloadCertificateLoading\">\n              <mat-spinner strokeWidth=\"2\" stroke=\"'red'\" class=\"white-spinner\" [diameter]=\"16\"></mat-spinner>\n            </div>\n          </button>\n        </div>\n      </div>\n    </ng-container>\n  </mat-card>\n</ng-container>\n\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\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n      <div class=\"margin-bottom-xs\">\n        <ng-container>\n          <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'26px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        </ng-container>\n      </div>\n      <div class=\"flex\">\n        <div class=\"margin-right-s\">\n          <ng-container>\n            <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'98px'\" [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            <div class=\" margin-right-xs\">\n              <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <span class=\"\"><sb-uic-skeleton-loader [width]=\"'133px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\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      <div class=\"flex flex-align-end progress-wrapper flex-between\">\n        <div class=\"progress-block\">\n          <div class=\"completed-time\">\n            <sb-uic-skeleton-loader [width]=\"'211px'\" [height]=\"'16px'\"  [bindingClass]=\"'flex rounded margin-top-xs md:w-211'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n        <div class=\"progress-btn\">\n          <sb-uic-skeleton-loader [width]=\"'117px'\" [height]=\"'32px'\"  [bindingClass]=\"'flex rounded margin-top-xs'\"></sb-uic-skeleton-loader>\n        </div>\n      </div>\n    </mat-card>\n</ng-container>",
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-portrait card-progress-portrait-lib cursor-pointer\" [ngClass]=\"widgetData?.cardCustomeClass ? widgetData?.cardCustomeClass : ''\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" >\n    <div class=\"course_widget portrait_widget flex  margin-bottom-xs\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\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\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\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]  &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\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>\n    </div>\n    <ng-container *ngIf=\"widgetData?.content?.completionPercentage < 100\">\n      <div class=\"flex flex-align-end progress-wrapper flex-between\" >\n        <div class=\"progress-block\" >\n          <div class=\"completed-time\">\n            <mat-icon class=\"mat-icon  schedule margin-right-xs\">schedule</mat-icon>\n            <span>{{widgetData?.content?.completionPercentage}}%</span>\n          </div>\n          <div>\n            <ng-container *ngIf=\"widgetData?.content?.completionStatus < 2\">\n              <sb-uic-content-progress class=\"progress-bar-new\" [customClassName]=\"'course-progress-bar'\" *ngIf=\"widgetData?.content?.identifier\"\n              [contentId]=\"widgetData?.content?.identifier\" [progress]=\"widgetData?.content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </sb-uic-content-progress>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"progress-btn\">\n          <button class=\"resume-btn flex flex-middle flex-between\" [routerLink]=\"['/app/toc/',widgetData?.content?.identifier,'overview']\"\n          [queryParams]=\"{primaryCategory: widgetData?.content?.primaryCategory}\" [state]=\"widgetData?.stateData\" \n          [matTooltipPosition]=\"'below'\"\n          [matTooltipDisabled]=\"(!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')).length < 11\"\n          matTooltip=\"{{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}\">\n            <span class=\"textwrap margin-right-xs\">\n              {{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}</span>\n            <img class=\"stats-icon\" height=\"20\" width=\"20\" src=\"/assets/icons/home/play.svg\">\n          </button>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"widgetData?.content?.completionPercentage === 100\">\n      <div class=\"flex flex-align-end progress-wrapper flex-end mt-1\">\n        <div class=\"progress-btn\">\n          <button class=\"resume-btn flex flex-middle flex-between view-btn\" [ngClass]=\"{'disable-btn': downloadCertificateLoading || widgetData?.content?.issuedCertificates?.length === 0}\" (click)=\"!downloadCertificateLoading && downloadCertificate(widgetData?.content);$event.stopPropagation()\" \n          [matTooltipPosition]=\"'below'\"\n          [matTooltipDisabled]=\"(translateLabels('viewCertificate', 'cardcontentv2')).length < 11\"\n          matTooltip=\"{{'cardcontentv2.viewCertificate' | translate }}\">\n            <span class=\"margin-right-xs textwrap\">{{'cardcontentv2.viewCertificate' | translate }}</span>\n            <img class=\"stats-icon\" *ngIf=\"!downloadCertificateLoading\" height=\"20\" width=\"20\" src=\"/assets/icons/home/eye-white.svg\">\n            <div class=\"center flex flex-middle\"  *ngIf=\"downloadCertificateLoading\">\n              <mat-spinner strokeWidth=\"2\" stroke=\"'red'\" class=\"white-spinner\" [diameter]=\"16\"></mat-spinner>\n            </div>\n          </button>\n        </div>\n      </div>\n    </ng-container>\n  </mat-card>\n</ng-container>\n\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\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n      <div class=\"margin-bottom-xs\">\n        <ng-container>\n          <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'26px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        </ng-container>\n      </div>\n      <div class=\"flex\">\n        <div class=\"margin-right-s\">\n          <ng-container>\n            <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'98px'\" [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            <div class=\" margin-right-xs\">\n              <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\"  [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <span class=\"\"><sb-uic-skeleton-loader [width]=\"'133px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\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      <div class=\"flex flex-align-end progress-wrapper flex-between\">\n        <div class=\"progress-block\">\n          <div class=\"completed-time\">\n            <sb-uic-skeleton-loader [width]=\"'211px'\" [height]=\"'16px'\"  [bindingClass]=\"'flex rounded margin-top-xs md:w-211'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n        <div class=\"progress-btn\">\n          <sb-uic-skeleton-loader [width]=\"'117px'\" [height]=\"'32px'\"  [bindingClass]=\"'flex rounded margin-top-xs'\"></sb-uic-skeleton-loader>\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:318px;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}.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}"]
             }] }
 ];
@@ -10633,6 +10636,7 @@ class CardMdoChannelV1Component {
         this.router = router;
         this.channelData = new EventEmitter();
         this.emitTelemetry = new EventEmitter();
+        this.isCardLoading = false;
         this.widgetType = '';
         this.widgetSubType = '';
         this.langtranslations.languageSelectedObservable.subscribe((/**
@@ -10692,7 +10696,7 @@ class CardMdoChannelV1Component {
 CardMdoChannelV1Component.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-mdo-channel-v1',
-                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?.imgUrl; else defaultImg\">\n                                    <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData?.content?.orgName\" />\n                                </ng-container>\n                                <ng-template #defaultImg>\n                                    <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n                                    </sb-uic-avatar-photo>\n                                </ng-template>\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>",
+                template: "\n<ng-container *ngIf=\"!isCardLoading\">\n    <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?.imgUrl; else defaultImg\">\n                                        <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n                                        class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                        [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                        <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n                                        </sb-uic-avatar-photo>\n                                    </ng-template>\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>\n</ng-container>\n\n\n<ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n        <div class=\"display-contents\">\n            <ng-container >\n                <a 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                                    <sb-uic-skeleton-loader class=\"w-full\" [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex  title-container px-2\">\n                                    <div class=\"flex-1 text-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                        <sb-uic-skeleton-loader  [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded mb-2'\"></sb-uic-skeleton-loader>\n                                        <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                </div>\n                            </div>\n                        </mat-card-content>\n                    </ng-container>\n                </a>\n            </ng-container>\n        </div>\n    </mat-card>\n</ng-container>",
                 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:156px;height:156px;max-height:156px;margin:20px 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}"]
             }] }
 ];
@@ -10708,7 +10712,8 @@ CardMdoChannelV1Component.ctorParameters = () => [
 CardMdoChannelV1Component.propDecorators = {
     widgetData: [{ type: Input }],
     channelData: [{ type: Output }],
-    emitTelemetry: [{ type: Output }]
+    emitTelemetry: [{ type: Output }],
+    isCardLoading: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -10718,6 +10723,8 @@ if (false) {
     /** @type {?} */
     CardMdoChannelV1Component.prototype.emitTelemetry;
     /** @type {?} */
+    CardMdoChannelV1Component.prototype.isCardLoading;
+    /** @type {?} */
     CardMdoChannelV1Component.prototype.defaultThumbnail;
     /** @type {?} */
     CardMdoChannelV1Component.prototype.sourceLogos;
@@ -11488,15 +11495,7 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
         // setting initial values
         strip.loaderWidgets = this.transformSkeletonToWidgets(strip);
         this.processStrip(strip, [], 'fetching', false, null);
-        this.fetchFromEnrollmentList(strip, calculateParentStatus);
         this.fetchFromSearchV6(strip, calculateParentStatus);
-        this.fetchFromTrendingContent(strip, calculateParentStatus);
-        this.fetchAllTopContent(strip, calculateParentStatus);
-        this.fetchAllFeaturedContent(strip, calculateParentStatus);
-        this.fetchAllBookMarkData(strip, calculateParentStatus);
-        this.fetchAllPlaylistSearch(strip, calculateParentStatus);
-        this.fetchPlaylistReadData(strip, calculateParentStatus);
-        this.fetchCiosContentData(strip, calculateParentStatus);
         this.fetchForYouData(strip, calculateParentStatus);
         this.fetchAllCbpPlans(strip, calculateParentStatus);
         // this.enrollInterval = setInterval(() => {
@@ -11504,468 +11503,32 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
         // },                                1000)
     }
     /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
+     * @param {?} data
      * @return {?}
      */
-    fetchFromEnrollmentList(strip, calculateParentStatus = true) {
-        if (strip.request && strip.request.enrollmentList && Object.keys(strip.request.enrollmentList).length) {
-            /** @type {?} */
-            let userId = '';
-            /** @type {?} */
-            let content;
-            /** @type {?} */
-            let contentNew;
-            /** @type {?} */
-            let tabResults = [];
-            /** @type {?} */
-            const queryParams = get(strip.request.enrollmentList, 'queryParams');
-            if (this.configSvc.userProfile) {
-                userId = this.configSvc.userProfile.userId;
+    toggleInfo(data) {
+        /** @type {?} */
+        const stripInfo = this.stripsResultDataMap[data.key].stripInfo;
+        if (stripInfo) {
+            if (stripInfo.mode !== 'below') {
+                this.loggerSvc.warn(`strip info mode: ${stripInfo.mode} not implemented yet`);
+                stripInfo.mode = 'below';
+            }
+            if (stripInfo.mode === 'below') {
+                this.stripsResultDataMap[data.key].stripInfo = Object.assign({}, stripInfo, { visibilityMode: stripInfo.visibilityMode === 'hidden' ? 'visible' : 'hidden' });
             }
-            // tslint:disable-next-line: deprecation
-            this.userSvc.fetchUserBatchList(userId, queryParams).subscribe((/**
-             * @param {?} result
-             * @return {?}
-             */
-            (result) => {
-                /** @type {?} */
-                const courses = result && result.courses;
-                /** @type {?} */
-                const showViewMore = Boolean(courses.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
-                /** @type {?} */
-                const viewMoreUrl = showViewMore
-                    ? {
-                        path: (strip.viewMoreUrl && strip.viewMoreUrl.path) || '',
-                        queryParams: {
-                            q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
-                            f: strip.request && strip.request.searchV6 && strip.request.searchV6.filters
-                                ? JSON.stringify(
-                                // this.searchServSvc.transformSearchV6Filters(
-                                strip.request.searchV6.filters
-                                // ),
-                                )
-                                : {},
-                        },
-                    }
-                    : null;
-                if (courses && courses.length) {
-                    content = courses.map((/**
-                     * @param {?} c
-                     * @return {?}
-                     */
-                    (c) => {
-                        /** @type {?} */
-                        const contentTemp = c.content;
-                        contentTemp.completionPercentage = c.completionPercentage || c.progress || 0;
-                        contentTemp.completionStatus = c.completionStatus || c.status || 0;
-                        contentTemp.enrolledDate = c.enrolledDate || '';
-                        contentTemp.lastContentAccessTime = c.lastContentAccessTime || '';
-                        contentTemp.lastReadContentStatus = c.lastReadContentStatus || '';
-                        contentTemp.lastReadContentId = c.lastReadContentId || '';
-                        contentTemp.lrcProgressDetails = c.lrcProgressDetails || '';
-                        contentTemp.issuedCertificates = c.issuedCertificates || [];
-                        contentTemp.batchId = c.batchId || '';
-                        return contentTemp;
-                    }));
-                }
-                // To filter content with completionPercentage > 0,
-                // so that only those content will show in home page
-                // continue learing strip
-                // if (content && content.length) {
-                //   contentNew = content.filter((c: any) => {
-                //     /** commented as both are 0 after enrolll */
-                //     if (c.completionPercentage && c.completionPercentage > 0) {
-                //       return c
-                //     }
-                //   })
-                // }
-                // To sort in descending order of the enrolled date
-                contentNew = (content || []).sort((/**
-                 * @param {?} a
-                 * @param {?} b
-                 * @return {?}
-                 */
-                (a, b) => {
-                    /** @type {?} */
-                    const dateA = new Date(a.lastContentAccessTime || 0);
-                    /** @type {?} */
-                    const dateB = new Date(b.lastContentAccessTime || 0);
-                    return dateB - dateA;
-                }));
-                if (strip.tabs && strip.tabs.length) {
-                    tabResults = this.splitEnrollmentTabsData(contentNew, strip);
-                    this.processStrip(strip, this.transformContentsToWidgets(contentNew, strip), 'done', calculateParentStatus, viewMoreUrl, tabResults);
-                }
-                else {
-                    this.processStrip(strip, this.transformContentsToWidgets(contentNew, strip), 'done', calculateParentStatus, viewMoreUrl);
-                }
-            }), (/**
-             * @return {?}
-             */
-            () => {
-                this.processStrip(strip, [], 'error', calculateParentStatus, null);
-            }));
         }
     }
     /**
-     * @param {?} contentNew
+     * @private
+     * @param {?} contents
      * @param {?} strip
      * @return {?}
      */
-    splitEnrollmentTabsData(contentNew, strip) {
-        /** @type {?} */
-        const tabResults = [];
-        /** @type {?} */
-        const splitData = this.getInprogressAndCompleted(contentNew, (/**
-         * @param {?} e
-         * @return {?}
-         */
-        (e) => e.completionStatus === 1 || e.completionPercentage < 100), strip);
-        if (strip.tabs && strip.tabs.length) {
-            for (let i = 0; i < strip.tabs.length; i += 1) {
-                if (strip.tabs[i]) {
-                    tabResults.push(Object.assign({}, strip.tabs[i], { fetchTabStatus: 'done' }, (splitData.find((/**
-                     * @param {?} itmInner
-                     * @return {?}
-                     */
-                    itmInner => {
-                        if (strip.tabs && strip.tabs[i] && itmInner.value === strip.tabs[i].value) {
-                            return itmInner;
-                        }
-                        return undefined;
-                    })))));
-                }
-            }
-        }
-        return tabResults;
-    }
-    /**
-     * @param {?} array
-     * @param {?} customFilter
-     * @param {?} strip
-     * @return {?}
-     */
-    getInprogressAndCompleted(array, customFilter, strip) {
-        /** @type {?} */
-        const inprogress = [];
-        /** @type {?} */
-        const completed = [];
-        array.forEach((/**
-         * @param {?} e
-         * @param {?} idx
-         * @param {?} arr
-         * @return {?}
-         */
-        (e, idx, arr) => (customFilter(e, idx, arr) ? inprogress : completed).push(e)));
-        return [
-            { value: 'inprogress', widgets: this.transformContentsToWidgets(inprogress, strip) },
-            { value: 'completed', widgets: this.transformContentsToWidgets(completed, strip) }
-        ];
-    }
-    // async fetchFromSearchV6(strip: NsContentStripWithTabs.IContentStripUnit, calculateParentStatus = true) {
-    //   if (strip.request && strip.request.searchV6 && Object.keys(strip.request.searchV6).length) {
-    //     // if (!(strip.request.searchV6.locale && strip.request.searchV6.locale.length > 0)) {
-    //     //   if (this.configSvc.activeLocale) {
-    //     //     strip.request.searchV6.locale = [this.configSvc.activeLocale.locals[0]]
-    //     //   } else {
-    //     //     strip.request.searchV6.locale = ['en']
-    //     //   }
-    //     // }
-    //     let originalFilters: any = [];
-    //     // tslint:disable:no-console
-    //     console.log(originalFilters);
-    //     if (strip.request &&
-    //       strip.request.searchV6 &&
-    //       strip.request.searchV6.request &&
-    //       strip.request.searchV6.request.filters) {
-    //       originalFilters = strip.request.searchV6.request.filters;
-    //       strip.request.searchV6.request.filters = this.checkForDateFilters(strip.request.searchV6.request.filters);
-    //       strip.request.searchV6.request.filters = this.getFiltersFromArray(
-    //         strip.request.searchV6.request.filters,
-    //       );
-    //     }
-    //     if (strip.tabs && strip.tabs.length) {
-    //       // TODO: Have to extract requestRequired to outer level of tabs config
-    //       const firstTab = strip.tabs[0];
-    //       if (firstTab.requestRequired) {
-    //         if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
-    //           const allTabs = this.stripsResultDataMap[strip.key].tabs;
-    //           const currentTabFromMap = (allTabs && allTabs.length && allTabs[0]) as NsContentStripWithTabs.IContentStripTab;
-    //           this.getTabDataByNewReqSearchV6(strip, 0, currentTabFromMap, calculateParentStatus);
-    //         }
-    //       }
-    //     } else {
-    //       try {
-    //         const response = await this.searchV6Request(strip, strip.request, calculateParentStatus);
-    //         // console.log('calling  after - response, ', response)
-    //         if (response && response.results) {
-    //           // console.log('calling  after-- ')
-    //           if (response.results.result.content) {
-    //             if(strip.key === 'scheduledAssessment') {
-    //               this.enrollInterval = setInterval(() => {
-    //                 this.checkInvitOnlyAssessments(response.results.result.content, strip, calculateParentStatus, response.viewMoreUrl)
-    //               // tslint:disable-next-line
-    //               }, 1000)
-    //             } else {
-    //               this.processStrip(
-    //                 strip,
-    //                 this.transformContentsToWidgets(response.results.result.content, strip),
-    //                 'done',
-    //                 calculateParentStatus,
-    //                 response.viewMoreUrl,
-    //               );
-    //             }
-    //           } else if (response.results.result.Event) {
-    //             this.processStrip(
-    //               strip,
-    //               this.transformEventsToWidgets(response.results.result.Event, strip),
-    //               'done',
-    //               calculateParentStatus,
-    //               response.viewMoreUrl,
-    //             );
-    //           } else {
-    //             this.processStrip(strip, [], 'error', calculateParentStatus, null);
-    //           }
-    //         } else {
-    //           this.processStrip(strip, [], 'error', calculateParentStatus, null);
-    //         }
-    //       } catch (error) {
-    //         // Handle errors
-    //         // console.error('Error:', error);
-    //       }
-    //     }
-    //   }
-    // }
-    /**
-     * @param {?} content
-     * @param {?} strip
-     * @param {?} calculateParentStatus
-     * @param {?} viewMoreUrl
-     * @return {?}
-     */
-    checkInvitOnlyAssessments(content, strip, calculateParentStatus, viewMoreUrl) {
-        if (localStorage.getItem('enrollmentMapData')) {
-            this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
-            /** @type {?} */
-            let filteredArray = [];
-            content.forEach((/**
-             * @param {?} data
-             * @return {?}
-             */
-            (data) => {
-                if (this.enrollmentMapData[data.identifier]) {
-                    data['batch'] = this.enrollmentMapData[data.identifier].batch;
-                    data['completionPercentage'] = this.enrollmentMapData[data.identifier].completionPercentage;
-                    filteredArray.push(data);
-                }
-            }));
-            this.processStrip(strip, this.transformContentsToWidgets(filteredArray, strip), 'done', calculateParentStatus, viewMoreUrl);
-            clearInterval(this.enrollInterval);
-        }
-    }
-    // async searchV6Request(strip: NsContentStripWithTabs.IContentStripUnit,
-    //                       request: NsContentStripWithTabs.IContentStripUnit['request'],
-    //                       calculateParentStatus: boolean
-    // ): Promise<any> {
-    //   const originalFilters: any = [];
-    //   return new Promise<any>((resolve, reject) => {
-    //     if (request && request.searchV6) {
-    //       this.contentSvc.searchV6(request.searchV6).subscribe(results => {
-    //         const showViewMore = Boolean(
-    //           results.result.content && results.result.content.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch,
-    //         );
-    //         const viewMoreUrl = showViewMore
-    //           ? {
-    //             path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
-    //             queryParams: {
-    //               tab: 'Learn',
-    //               q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
-    //               f:
-    //                 request &&
-    //                   request.searchV6 &&
-    //                   request.searchV6.request &&
-    //                   request.searchV6.request.filters
-    //                   ? JSON.stringify(
-    //                     this.transformSearchV6FiltersV2(
-    //                       originalFilters,
-    //                     )
-    //                   )
-    //                   : {},
-    //             },
-    //           }
-    //           : null;
-    //         // if (viewMoreUrl && viewMoreUrl.queryParams) {
-    //         //   viewMoreUrl.queryParams = viewMoreUrl.queryParams
-    //         // }
-    //         resolve({ results, viewMoreUrl });
-    //       },                                                   (error: any) => {
-    //         this.processStrip(strip, [], 'error', calculateParentStatus, null);
-    //         reject(error);
-    //       },
-    //       );
-    //     }
-    //   });
-    // }
-    /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
-     * @return {?}
-     */
-    fetchFromTrendingContent(strip, calculateParentStatus = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (strip.request && strip.request.trendingSearch && Object.keys(strip.request.trendingSearch).length) {
-                // if (!(strip.request.searchV6.locale && strip.request.searchV6.locale.length > 0)) {
-                //   if (this.configSvc.activeLocale) {
-                //     strip.request.searchV6.locale = [this.configSvc.activeLocale.locals[0]]
-                //   } else {
-                //     strip.request.searchV6.locale = ['en']
-                //   }
-                // }
-                /** @type {?} */
-                let originalFilters = [];
-                // tslint:disable:no-console
-                if (strip.request &&
-                    strip.request.trendingSearch &&
-                    strip.request.trendingSearch.request &&
-                    strip.request.trendingSearch.request.filters) {
-                    originalFilters = strip.request.trendingSearch.request.filters;
-                    strip.request.trendingSearch.request.filters = this.checkForDateFilters(strip.request.trendingSearch.request.filters);
-                    strip.request.trendingSearch.request.filters = this.getFiltersFromArray(strip.request.trendingSearch.request.filters);
-                }
-                if (strip.tabs && strip.tabs.length) {
-                    // TODO: Have to extract requestRequired to outer level of tabs config
-                    /** @type {?} */
-                    const firstTab = strip.tabs[0];
-                    if (firstTab.requestRequired) {
-                        if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
-                            /** @type {?} */
-                            const allTabs = this.stripsResultDataMap[strip.key].tabs;
-                            /** @type {?} */
-                            const currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
-                            this.getTabDataByNewReqTrending(strip, 0, 0, currentTabFromMap, calculateParentStatus);
-                        }
-                    }
-                }
-                else {
-                    try {
-                        /** @type {?} */
-                        const response = yield this.trendingSearchRequest(strip, strip.request, calculateParentStatus);
-                        if (response && response.results && response.results.response) {
-                            /** @type {?} */
-                            const content = response.results.response[strip.request.trendingSearch.responseKey] || [];
-                            this.processStrip(strip, this.transformContentsToWidgets(content, strip), 'done', calculateParentStatus, response.viewMoreUrl || '');
-                            if (!content.length) {
-                                this.emptyResponse.emit(true);
-                            }
-                        }
-                        else {
-                            this.emptyResponse.emit(true);
-                            this.processStrip(strip, [], 'done', calculateParentStatus, null);
-                        }
-                    }
-                    catch (error) {
-                        // Handle errors
-                        this.emptyResponse.emit(true);
-                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
-                    }
-                }
-            }
-        });
-    }
-    // async trendingSearchRequest(strip: NsContentStripWithTabs.IContentStripUnit,
-    //                             request: NsContentStripWithTabs.IContentStripUnit['request'],
-    //                             calculateParentStatus: boolean
-    // ): Promise<any> {
-    //   const originalFilters: any = [];
-    //   return new Promise<any>((resolve, reject) => {
-    //     if (request && request.trendingSearch) {
-    //       // check for the request if it has dynamic values]
-    //       if (request.trendingSearch.request.filters.organisation &&
-    //         request.trendingSearch.request.filters.organisation.indexOf('<orgID>') >= 0
-    //       ) {
-    //         let userRootOrgId;
-    //         if (this.configSvc.userProfile) {
-    //           userRootOrgId = this.configSvc.userProfile.rootOrgId;
-    //         }
-    //         request.trendingSearch.request.filters.organisation = userRootOrgId;
-    //       }
-    //       this.contentSvc.trendingContentSearch(request.trendingSearch).subscribe(results => {
-    //         const showViewMore = Boolean(
-    //           results.result &&
-    //           strip.request &&
-    //           results.result[strip.request.trendingSearch.responseKey] &&
-    //           results.result[strip.request.trendingSearch.responseKey].length > 5 &&
-    //           strip.stripConfig && strip.stripConfig.postCardForSearch,
-    //         );
-    //         const viewMoreUrl = showViewMore
-    //           ? {
-    //             path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
-    //             queryParams: {
-    //               tab: 'Learn',
-    //               q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
-    //               f:
-    //                 request &&
-    //                   request.trendingSearch &&
-    //                   request.trendingSearch.request &&
-    //                   request.trendingSearch.request.filters
-    //                   ? JSON.stringify(
-    //                     this.transformSearchV6FiltersV2(
-    //                       originalFilters,
-    //                     )
-    //                   )
-    //                   : {},
-    //             },
-    //           }
-    //           : null;
-    //           let proccesedResult: any = []
-    //           if (results && results.response && results.response.certifications) {
-    //             results.response.certifications.map((result: any) => {
-    //               if (result.source === this.channnelName) {
-    //                 proccesedResult.push(result)
-    //               }
-    //             })
-    //           }
-    //           results = {response: {certifications: proccesedResult}}
-    //         resolve({ results, viewMoreUrl });
-    //       },                                                                      (error: any) => {
-    //         if (error.error && error.error.status === 400) {
-    //           this.processStrip(strip, [], 'done', calculateParentStatus, null);
-    //         }
-    //         // this.processStrip(strip, [], 'done', calculateParentStatus, null)
-    //         reject(error);
-    //       },
-    //       );
-    //     }
-    //   });
-    // }
-    /**
-     * @param {?} data
-     * @return {?}
-     */
-    toggleInfo(data) {
-        /** @type {?} */
-        const stripInfo = this.stripsResultDataMap[data.key].stripInfo;
-        if (stripInfo) {
-            if (stripInfo.mode !== 'below') {
-                this.loggerSvc.warn(`strip info mode: ${stripInfo.mode} not implemented yet`);
-                stripInfo.mode = 'below';
-            }
-            if (stripInfo.mode === 'below') {
-                this.stripsResultDataMap[data.key].stripInfo = Object.assign({}, stripInfo, { visibilityMode: stripInfo.visibilityMode === 'hidden' ? 'visible' : 'hidden' });
-            }
-        }
-    }
-    /**
-     * @private
-     * @param {?} contents
-     * @param {?} strip
-     * @return {?}
-     */
-    transformContentsToWidgets(contents, strip) {
-        return (contents || []).map((/**
-         * @param {?} content
-         * @param {?} idx
+    transformContentsToWidgets(contents, strip) {
+        return (contents || []).map((/**
+         * @param {?} content
+         * @param {?} idx
          * @return {?}
          */
         (content, idx) => (content ? {
@@ -12144,154 +11707,12 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
                 (strip.request.search && Object.keys(strip.request.search).length) ||
                 (strip.request.searchRegionRecommendation &&
                     Object.keys(strip.request.searchRegionRecommendation).length) ||
-                (strip.request.searchV6 && Object.keys(strip.request.searchV6).length) ||
-                (strip.request.enrollmentList && Object.keys(strip.request.enrollmentList).length) ||
                 (strip.request.cbpList && Object.keys(strip.request.cbpList).length) ||
-                (strip.request.trendingSearch && Object.keys(strip.request.trendingSearch).length) ||
-                (strip.request.topContent && Object.keys(strip.request.topContent).length) ||
-                (strip.request.featureContent && Object.keys(strip.request.featureContent).length) ||
-                (strip.request.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) ||
-                (strip.request.ciosContent && Object.keys(strip.request.ciosContent).length) ||
                 (strip && strip.tabs.length))) {
             return true;
         }
         return false;
     }
-    // public tabClicked(tabEvent: MatTabChangeEvent, stripMap: IStripUnitContentData, stripKey: string) {
-    //   if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
-    //     stripMap.tabs[tabEvent.index].fetchTabStatus = 'inprogress';
-    //     stripMap.tabs[tabEvent.index].tabLoading = true;
-    //     stripMap.showOnLoader = true;
-    //   }
-    //   const data: WsEvents.ITelemetryTabData = {
-    //     label: `${tabEvent.tab.textLabel}`,
-    //     index: tabEvent.index,
-    //   };
-    //   this.eventSvc.raiseInteractTelemetry(
-    //     {
-    //       type: WsEvents.EnumInteractTypes.CLICK,
-    //       subType: WsEvents.EnumInteractSubTypes.HOME_PAGE_STRIP_TABS,
-    //       id: `${_.camelCase(data.label)}-tab`,
-    //     },
-    //     {},
-    //     {
-    //       module: WsEvents.EnumTelemetrymodules.HOME,
-    //     }
-    //   );
-    //   const currentTabFromMap: any = stripMap.tabs && stripMap.tabs[tabEvent.index];
-    //   const currentStrip = this.widgetData.strips.find(s => s.key === stripKey);
-    //   if (this.stripsResultDataMap[stripKey] && currentTabFromMap) {
-    //     this.stripsResultDataMap[stripKey].viewMoreUrl.queryParams = {
-    //       ...this.stripsResultDataMap[stripKey].viewMoreUrl.queryParams,
-    //       tabSelected: currentTabFromMap.label,
-    //     };
-    //   }
-    //   if (currentStrip && currentTabFromMap && !currentTabFromMap.computeDataOnClick) {
-    //     if (currentTabFromMap.requestRequired && currentTabFromMap.request) {
-    //       // call API to get tab data and process
-    //       // this.processStrip(currentStrip, [], 'fetching', true, null)
-    //       if (currentTabFromMap.request.searchV6) {
-    //         this.getTabDataByNewReqSearchV6(currentStrip, tabEvent.index, currentTabFromMap, true);
-    //       } else if (currentTabFromMap.request.trendingSearch) {
-    //         this.getTabDataByNewReqTrending(currentStrip, tabEvent.index, 0, currentTabFromMap, true);
-    //       }
-    //       if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
-    //         stripMap.tabs[tabEvent.index].tabLoading = false;
-    //       }
-    //     } else {
-    //       this.getTabDataByfilter(currentStrip, currentTabFromMap, true);
-    //       setTimeout(() => {
-    //         if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
-    //             stripMap.tabs[tabEvent.index].tabLoading = false;
-    //             stripMap.tabs[tabEvent.index].fetchTabStatus = 'done';
-    //             stripMap.showOnLoader = false;
-    //         }
-    //       },         200);
-    //     }
-    //   }
-    // }
-    // async getTabDataByNewReqSearchV6(
-    //   strip: NsContentStripWithTabs.IContentStripUnit,
-    //   tabIndex: number,
-    //   currentTab: NsContentStripWithTabs.IContentStripTab,
-    //   calculateParentStatus: boolean
-    // ) {
-    //   try {
-    //     const response = await this.searchV6Request(strip, currentTab.request, calculateParentStatus);
-    //     if (response && response.results) {
-    //       const widgets = this.transformContentsToWidgets(response.results.result.content, strip);
-    //       let tabResults: any[] = [];
-    //       if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
-    //         const allTabs = this.stripsResultDataMap[strip.key].tabs;
-    //         if (allTabs && allTabs.length && allTabs[tabIndex]) {
-    //           allTabs[tabIndex] = {
-    //             ...allTabs[tabIndex],
-    //             widgets,
-    //             fetchTabStatus: 'done',
-    //           };
-    //           tabResults = allTabs;
-    //         }
-    //       }
-    //       this.processStrip(
-    //         strip,
-    //         widgets,
-    //         'done',
-    //         calculateParentStatus,
-    //         response.viewMoreUrl,
-    //         tabResults // tabResults as widgets
-    //       );
-    //     } else {
-    //       this.processStrip(strip, [], 'error', calculateParentStatus, null);
-    //     }
-    //   } catch (error) {
-    //     // Handle errors
-    //     // console.error('Error:', error);
-    //   }
-    // }
-    // async getTabDataByNewReqTrending(
-    //   strip: NsContentStripWithTabs.IContentStripUnit,
-    //   tabIndex: number,
-    //   currentTab: NsContentStripWithTabs.IContentStripTab,
-    //   calculateParentStatus: boolean
-    // ) {
-    //   try {
-    //     const response = await this.trendingSearchRequest(strip, currentTab.request, calculateParentStatus);
-    //     if (response && response.results && response.results.response) {
-    //       const content = response.results.response[currentTab.value] || [];
-    //       const widgets = this.transformContentsToWidgets(content, strip);
-    //       // console.log('currentTab --- widgets', widgets)
-    //       let tabResults: any[] = [];
-    //       if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
-    //         const allTabs = this.stripsResultDataMap[strip.key].tabs;
-    //         if (allTabs && allTabs.length && allTabs[tabIndex]) {
-    //           allTabs[tabIndex] = {
-    //             ...allTabs[tabIndex],
-    //             widgets,
-    //             fetchTabStatus: 'done',
-    //           };
-    //           tabResults = allTabs;
-    //         }
-    //       }
-    //       // console.log('tabResults -++++***--', tabResults)
-    //       // console.log('calling  after-- ')
-    //       this.processStrip(
-    //         strip,
-    //         widgets,
-    //         'done',
-    //         calculateParentStatus,
-    //         response.viewMoreUrl,
-    //         tabResults // tabResults as widgets
-    //       );
-    //     } else {
-    //       this.processStrip(strip, [], 'done', calculateParentStatus, null);
-    //     }
-    //   } catch (error) {
-    //     // Handle errors
-    //     this.processStrip(strip, [], 'error', calculateParentStatus, null);
-    //   }
-    // }
     /**
      * @param {?} strip
      * @param {?} currentTab
@@ -12300,653 +11721,70 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
      */
     getTabDataByfilter(strip, currentTab, calculateParentStatus) {
         // tslint:disable:no-console
-        console.log('strip -- ', strip);
-        // tslint:disable:no-console
-        console.log('currentTab -- ', currentTab);
-        // tslint:disable:no-console
-        console.log('calculateParentStatus-- ', calculateParentStatus);
-        // TODO: Write logic for individual filter if passed in config
-        // add switch case based on config key passed
-    }
-    // async fetchAllCbpPlans(strip: any, calculateParentStatus = true) {
-    //   if (strip.request && strip.request.cbpList && Object.keys(strip.request.cbpList).length) {
-    //     let courses: NsContent.IContent[];
-    //     let tabResults: any[] = [];
-    //     const response = await this.userSvc.fetchCbpPlanList().toPromise();
-    //     if (response) {
-    //           courses = response;
-    //           if (strip.tabs && strip.tabs.length) {
-    //             tabResults = this.splitCbpTabsData(courses, strip);
-    //             await this.processStrip(
-    //               strip,
-    //               this.transformContentsToWidgets(courses, strip),
-    //               'done',
-    //               calculateParentStatus,
-    //               '',
-    //               tabResults
-    //             );
-    //           } else {
-    //             this.processStrip(
-    //               strip,
-    //               this.transformContentsToWidgets(courses, strip),
-    //               'done',
-    //               calculateParentStatus,
-    //               'viewMoreUrl',
-    //             );
-    //           }
-    //     }
-    //     // this.userSvc.fetchCbpPlanList().subscribe( async  (res: any) => {
-    //     //   if (res) {
-    //     //     console.log(res,'===============================>')
-    //     //     courses = res
-    //     //     if (strip.tabs && strip.tabs.length) {
-    //     //       tabResults = this.splitCbpTabsData(courses, strip)
-    //     //       await this.processStrip(
-    //     //         strip,
-    //     //         this.transformContentsToWidgets(courses, strip),
-    //     //         'done',
-    //     //         calculateParentStatus,
-    //     //         '',
-    //     //         tabResults
-    //     //       )
-    //     //     } else {
-    //     //       this.processStrip(
-    //     //         strip,
-    //     //         this.transformContentsToWidgets(courses, strip),
-    //     //         'done',
-    //     //         calculateParentStatus,
-    //     //         'viewMoreUrl',
-    //     //       )
-    //     //     }
-    //     //   }
-    //     // },                                        (_err: any) => {
-    //     // })
-    //     clearInterval(this.enrollInterval);
-    //   }
-    // }
-    // splitCbpTabsData(contentNew: NsContent.IContent[], strip: NsContentStripWithTabs.IContentStripUnit) {
-    //   const tabResults: any[] = [];
-    //   const splitData = this.getTabsList(
-    //     contentNew,
-    //     strip,
-    //   );
-    //   if (strip.tabs && strip.tabs.length) {
-    //     for (let i = 0; i < strip.tabs.length; i += 1) {
-    //       if (strip.tabs[i]) {
-    //         tabResults.push(
-    //           {
-    //             ...strip.tabs[i],
-    //             fetchTabStatus: 'done',
-    //             ...(splitData.find(itmInner => {
-    //               if (strip.tabs && strip.tabs[i] && itmInner.value === strip.tabs[i].value) {
-    //                 return itmInner;
-    //               }
-    //               return undefined;
-    //             })),
-    //           }
-    //         );
-    //       }
-    //     }
-    //   }
-    //   return tabResults;
-    // }
-    // getTabsList(array: NsContent.IContent[],
-    //             strip: NsContentStripWithTabs.IContentStripUnit) {
-    //   let all: any[] = [];
-    //   let upcoming: any[] = [];
-    //   let overdue: any[] = [];
-    //   array.forEach((e: any) => {
-    //     all.push(e);
-    //     if (e.planDuration === NsCardContent.ACBPConst.OVERDUE) {
-    //       overdue.push(e);
-    //     } else if (e.planDuration === NsCardContent.ACBPConst.UPCOMING) {
-    //       upcoming.push(e);
-    //     }
-    //   });
-    //   const allCompleted = all.filter((allData: any) => allData.contentStatus === 2);
-    //   let allInCompleted = all.filter((allData: any) => allData.contentStatus < 2);
-    //   let allCompletedOverDue = allCompleted.filter((allData: any) => allData.planDuration === NsCardContent.ACBPConst.OVERDUE);
-    //   const allCompletedAll = allCompleted.filter((allData: any) =>  allData.planDuration !== NsCardContent.ACBPConst.OVERDUE);
-    //   allCompletedOverDue = allCompletedOverDue.sort((a: any, b: any): any => {
-    //     if (a.planDuration === NsCardContent.ACBPConst.OVERDUE && b.planDuration === NsCardContent.ACBPConst.OVERDUE) {
-    //       const firstDate: any = new Date(a.endDate);
-    //       const secondDate: any = new Date(b.endDate);
-    //       return  firstDate > secondDate  ? -1 : 1;
-    //     }
-    //   });
-    //   allInCompleted = allInCompleted.sort((a: any, b: any): any => {
-    //     if (a.planDuration === NsCardContent.ACBPConst.OVERDUE && b.planDuration === NsCardContent.ACBPConst.OVERDUE) {
-    //       const firstDate: any = new Date(a.endDate);
-    //       const secondDate: any = new Date(b.endDate);
-    //       return  firstDate > secondDate  ? -1 : 1;
-    //     }
-    //   });
-    //   all = [...allInCompleted, ...allCompletedAll, ...allCompletedOverDue];
-    //   overdue = overdue.filter((data: any): any => {
-    //     return data.contentStatus < 2;
-    //   });
-    //   overdue = overdue.sort((a: any, b: any): any => {
-    //       const firstDate: any = new Date(a.endDate);
-    //       const secondDate: any = new Date(b.endDate);
-    //       return  firstDate > secondDate  ? -1 : 1;
-    //   });
-    //   upcoming = upcoming.filter((data: any): any => {
-    //     return data.contentStatus < 2;
-    //   });
-    //   // this.getSelectedIndex(1)
-    //   return [
-    //   { value: 'all', widgets: this.transformContentsToWidgets(all, strip) },
-    //   { value: 'upcoming', widgets: this.transformContentsToWidgets(upcoming, strip) },
-    //   { value: 'overdue', widgets: this.transformContentsToWidgets(overdue, strip) }];
-    // }
-    /**
-     * @param {?} stripsResultDataMap
-     * @param {?} key
-     * @return {?}
-     */
-    getSelectedIndex(stripsResultDataMap, key) {
-        /** @type {?} */
-        let returnValue = 0;
-        // if (key === 'cbpPlan') {
-        //   if (stripsResultDataMap.tabs.length) {
-        //     const data = stripsResultDataMap.tabs.filter((ele: any) => ele.value === 'upcoming');
-        //     returnValue = data[0].widgets && data[0].widgets.length > 0 ? 1 : 0;
-        //   }
-        // }
-        return returnValue;
-    }
-    /**
-     * @param {?} label
-     * @param {?} type
-     * @return {?}
-     */
-    translateLabels(label, type) {
-        return this.langtranslations.translateLabel(label, type, '');
-    }
-    /**
-     * @param {?} index
-     * @param {?} item
-     * @return {?}
-     */
-    identify(index, item) {
-        if (index >= 0) { }
-        return item;
-    }
-    /**
-     * @param {?} index
-     * @param {?} item
-     * @return {?}
-     */
-    tracker(index, item) {
-        if (index >= 0) { }
-        return get(item, 'widgetData.content.identifier');
-    }
-    /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
-     * @return {?}
-     */
-    fetchAllTopContent(strip, calculateParentStatus = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (strip.request && strip.request.topContent && Object.keys(strip.request.topContent).length) {
-                /** @type {?} */
-                let originalFilters = [];
-                if (strip.request &&
-                    strip.request.topContent &&
-                    strip.request.topContent.request &&
-                    strip.request.topContent.request.filters) {
-                    originalFilters = strip.request.topContent.request.filters;
-                    strip.request.topContent.request.filters = this.postMethodFilters(strip.request.topContent.request.filters);
-                }
-                try {
-                    /** @type {?} */
-                    const response = yield this.postRequestMethod(strip, strip.request.topContent, strip.request.apiUrl, calculateParentStatus);
-                    // console.log('calling  after - response, ', response)
-                    if (response && response.results) {
-                        // console.log('calling  after-- ')
-                        if (response.results.result.content && response.results.result.content.length) {
-                            this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, 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) {
-                    // Handle errors
-                    // console.error('Error:', error);
-                }
-            }
-        });
-    }
-    /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
-     * @return {?}
-     */
-    fetchAllFeaturedContent(strip, calculateParentStatus = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (strip.request && strip.request.featureContent && Object.keys(strip.request.featureContent).length) {
-                /** @type {?} */
-                let originalFilters = [];
-                if (strip.request &&
-                    strip.request.featureContent &&
-                    strip.request.featureContent.request &&
-                    strip.request.featureContent.request.filters) {
-                    originalFilters = strip.request.featureContent.request.filters;
-                    strip.request.featureContent.request.filters = this.postMethodFilters(strip.request.featureContent.request.filters);
-                }
-                try {
-                    /** @type {?} */
-                    const response = yield this.postRequestMethod(strip, strip.request.featureContent, strip.request.apiUrl, calculateParentStatus);
-                    // console.log('calling  after - response, ', response)
-                    if (response && response.results) {
-                        // console.log('calling  after-- ')
-                        if (response.results.result.content && response.results.result.content.length) {
-                            this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, 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 {?} stripData
-     * @return {?}
-     */
-    raiseTelemetry(stripData) {
-        this.telemtryResponse.emit(stripData);
-    }
-    /**
-     * @param {?} strip
-     * @param {?} request
-     * @param {?} apiUrl
-     * @param {?} calculateParentStatus
-     * @return {?}
-     */
-    postRequestMethod(strip, request, apiUrl, calculateParentStatus) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((/**
-             * @param {?} resolve
-             * @param {?} reject
-             * @return {?}
-             */
-            (resolve, reject) => {
-                if (request && request) {
-                    this.contentSvc.postApiMethod(apiUrl, request).subscribe((/**
-                     * @param {?} results
-                     * @return {?}
-                     */
-                    results => {
-                        if (results.result && results.result.content) {
-                            /** @type {?} */
-                            const showViewMore = Boolean(results.result.content && results.result.content.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
-                            /** @type {?} */
-                            const viewMoreUrl = showViewMore
-                                ? {
-                                    path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
-                                    queryParams: {
-                                        tab: 'Learn',
-                                        q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
-                                        f: {},
-                                    },
-                                }
-                                : null;
-                            resolve({ results, viewMoreUrl });
-                        }
-                        else if (results && results.data) {
-                            /** @type {?} */
-                            const showViewMore = Boolean(results.data && results.data.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
-                            /** @type {?} */
-                            const viewMoreUrl = showViewMore ? {
-                                path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
-                                queryParams: {
-                                    tab: 'Learn',
-                                    q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
-                                    f: {},
-                                },
-                            }
-                                : null;
-                            resolve({ results, viewMoreUrl });
-                        }
-                        else if (results.result && results.result.data) {
-                            /** @type {?} */
-                            const showViewMore = Boolean(results.data && results.result.data && results.result.data.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
-                            /** @type {?} */
-                            const viewMoreUrl = showViewMore ? {
-                                path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
-                                queryParams: {
-                                    tab: 'Learn',
-                                    q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
-                                    f: {},
-                                },
-                            }
-                                : null;
-                            resolve({ results, viewMoreUrl });
-                        }
-                    }), (/**
-                     * @param {?} error
-                     * @return {?}
-                     */
-                    (error) => {
-                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
-                        reject(error);
-                    }));
-                }
-            }));
-        });
-    }
-    /**
-     * @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 => {
-                        /** @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 {?}
-     */
-    postMethodFilters(filters) {
-        if (filters.organisation &&
-            filters.organisation.indexOf('<orgID>') >= 0) {
-            filters.organisation = this.providerId;
-        }
-        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
-     * @param {?} queryParamsData
-     * @return {?}
-     */
-    redirectViewAll(stripData, path, queryParamsData) {
-        if (this.emitViewAll) {
-            this.viewAllResponse.emit(stripData);
-        }
-        else {
-            this.router.navigate([path], { queryParams: queryParamsData });
-        }
-    }
-    /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
-     * @return {?}
-     */
-    fetchAllBookMarkData(strip, calculateParentStatus = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (strip.request && strip.request.bookmarkRead && Object.keys(strip.request.bookmarkRead).length) {
-                /** @type {?} */
-                let originalFilters = [];
-                if (strip.request &&
-                    strip.request.bookmarkRead &&
-                    strip.request.bookmarkRead.bookmarkId) {
-                    strip.request.apiUrl = this.getFullUrl(strip.request.apiUrl, strip.request.bookmarkRead.bookmarkId);
-                }
-                try {
-                    /** @type {?} */
-                    const response = yield this.getRequestMethod(strip, strip.request.bookmarkRead, strip.request.apiUrl, calculateParentStatus);
-                    /** @type {?} */
-                    let content = response.results.result.data.orgList;
-                    if (response) {
-                        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);
-                }
-            }
-        });
+        console.log('strip -- ', strip);
+        // tslint:disable:no-console
+        console.log('currentTab -- ', currentTab);
+        // tslint:disable:no-console
+        console.log('calculateParentStatus-- ', calculateParentStatus);
+        // TODO: Write logic for individual filter if passed in config
+        // add switch case based on config key passed
     }
     /**
-     * @private
-     * @param {?} contents
-     * @param {?} strip
+     * @param {?} stripsResultDataMap
+     * @param {?} key
      * @return {?}
      */
-    transformAllContentsToWidgets(contents, strip) {
-        return (contents || []).map((/**
-         * @param {?} content
-         * @param {?} idx
-         * @return {?}
-         */
-        (content, idx) => (content ? {
-            widgetType: 'cardLib',
-            widgetSubType: 'cardContentLib',
-            widgetHostClass: 'mb-2',
-            widgetData: Object.assign({ content }, (content.batch && { batch: content.batch }), { cardSubType: strip.stripConfig && strip.stripConfig.cardSubType, cardCustomeClass: strip.customeClass ? strip.customeClass : '', context: { pageSection: strip.key, position: idx }, intranetMode: strip.stripConfig && strip.stripConfig.intranetMode, deletedMode: strip.stripConfig && strip.stripConfig.deletedMode, contentTags: strip.stripConfig && strip.stripConfig.contentTags }),
-        } : {
-            widgetType: 'card',
-            widgetSubType: 'cardContent',
-            widgetHostClass: 'mb-2',
-            widgetData: {},
-        })));
+    getSelectedIndex(stripsResultDataMap, key) {
+        /** @type {?} */
+        let returnValue = 0;
+        return returnValue;
     }
     /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
+     * @param {?} label
+     * @param {?} type
      * @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) {
-                            /** @type {?} */
-                            let finalPlaylistData = [];
-                            /** @type {?} */
-                            let programData = response.results.result.data;
-                            programData.forEach((/**
-                             * @param {?} prgData
-                             * @return {?}
-                             */
-                            (prgData) => {
-                                if (prgData.children && prgData.children.length) {
-                                    finalPlaylistData.push(prgData);
-                                }
-                            }));
-                            if (finalPlaylistData.length) {
-                                this.processStrip(strip, this.transformContentsToWidgets(finalPlaylistData, strip), 'done', calculateParentStatus, response.viewMoreUrl);
-                            }
-                            else {
-                                this.emptyResponse.emit(true);
-                            }
-                        }
-                        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);
-                }
-            }
-        });
+    translateLabels(label, type) {
+        return this.langtranslations.translateLabel(label, type, '');
     }
     /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
+     * @param {?} index
+     * @param {?} item
      * @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);
-                    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);
-                }
-            }
-        });
+    identify(index, item) {
+        if (index >= 0) { }
+        return item;
     }
     /**
-     * @param {?} strip
-     * @param {?=} calculateParentStatus
+     * @param {?} index
+     * @param {?} item
      * @return {?}
      */
-    fetchCiosContentData(strip, calculateParentStatus = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (strip.request && strip.request.ciosContent && Object.keys(strip.request.ciosContent).length) {
-                /** @type {?} */
-                let originalFilters = [];
-                if (strip.request &&
-                    strip.request.ciosContent &&
-                    strip.request.ciosContent.filterCriteriaMap) {
-                    originalFilters = strip.request.ciosContent.filterCriteriaMap;
-                    strip.request.ciosContent.filterCriteriaMap = this.postMethodFilters(strip.request.ciosContent.filterCriteriaMap);
-                }
-                try {
-                    /** @type {?} */
-                    const response = yield this.postRequestMethod(strip, strip.request.ciosContent, strip.request.apiUrl, calculateParentStatus);
-                    // console.log('calling  after - response, ', response)
-                    if (response && response.results) {
-                        // console.log('calling  after-- ')
-                        if (response.results.data && response.results.data.length) {
-                            /** @type {?} */
-                            let extContentData = response.results.data;
-                            if (extContentData.length) {
-                                this.processStrip(strip, this.transformContentsToWidgets(extContentData, strip), 'done', calculateParentStatus, response.viewMoreUrl);
-                            }
-                            else {
-                                this.emptyResponse.emit(true);
-                            }
-                        }
-                        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);
-                }
-            }
-        });
+    tracker(index, item) {
+        if (index >= 0) { }
+        return get(item, 'widgetData.content.identifier');
+    }
+    /**
+     * @param {?} stripData
+     * @return {?}
+     */
+    raiseTelemetry(stripData) {
+        this.telemtryResponse.emit(stripData);
+    }
+    /**
+     * @param {?} stripData
+     * @param {?} path
+     * @param {?} queryParamsData
+     * @return {?}
+     */
+    redirectViewAll(stripData, path, queryParamsData) {
+        if (this.emitViewAll) {
+            this.viewAllResponse.emit(stripData);
+        }
+        else {
+            this.router.navigate([path], { queryParams: queryParamsData });
+        }
     }
     // new code writting from here====new====
     /**
@@ -13024,18 +11862,7 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
                         if (response && response.results) {
                             // console.log('calling  after-- ')
                             if (response.results.result.content) {
-                                if (strip.key === 'scheduledAssessment') {
-                                    this.enrollInterval = setInterval((/**
-                                     * @return {?}
-                                     */
-                                    () => {
-                                        this.checkInvitOnlyAssessments(response.results.result.content, strip, calculateParentStatus, response.viewMoreUrl);
-                                        // tslint:disable-next-line
-                                    }), 1000);
-                                }
-                                else {
-                                    this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
-                                }
+                                this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
                             }
                             else if (response.results.result.Event) {
                                 this.processStrip(strip, this.transformEventsToWidgets(response.results.result.Event, strip), 'done', calculateParentStatus, response.viewMoreUrl);
@@ -13355,12 +12182,17 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
             }
             else {
                 this.getTabDataByfilter(currentStrip, currentTabFromMap, true);
+                if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+                    stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+                    stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+                    stripMap.showOnLoader = true;
+                }
                 setTimeout((/**
                  * @return {?}
                  */
                 () => {
                     if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
-                        stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+                        stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'done';
                         stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
                         stripMap.showOnLoader = false;
                         this.resetSelectedPill(stripMap.tabs[tabIndex].pillsData);
@@ -13433,22 +12265,13 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
      */
     getSelectedPillIndex(tabdata, tabIndex) {
         if (tabdata.pillsData && tabdata.pillsData.length) {
-            // tabdata.pillsData.forEach((ele: any, index: any) => {
-            //   if(ele.selected) {
-            //     console.log(ele,'---------')
-            //     return index
-            //   }
-            // // })
-            // console.log(tabdata,'==========123')
             /** @type {?} */
             let index = tabdata.pillsData.findIndex((/**
              * @param {?} pill
              * @return {?}
              */
             (pill) => {
-                // if(pill.selected){
                 return pill.selected;
-                // }
             }));
             return index;
         }
@@ -13473,38 +12296,36 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
                     courses = response;
                     if (strip.tabs && strip.tabs.length) {
                         tabResults = this.splitCbpTabsData(courses, strip);
+                        /** @type {?} */
+                        let countOfWidget = true;
+                        if (strip && strip.tabs && strip.tabs.length) {
+                            strip.tabs.forEach((/**
+                             * @param {?} tab
+                             * @return {?}
+                             */
+                            (tab) => {
+                                if (tab.pillsData && tab.pillsData.length) {
+                                    tab.pillsData.forEach((/**
+                                     * @param {?} pill
+                                     * @return {?}
+                                     */
+                                    (pill) => {
+                                        if (pill && pill.widgets && pill.widgets.length) {
+                                            if (countOfWidget) {
+                                                pill.selected = true;
+                                                countOfWidget = false;
+                                            }
+                                        }
+                                    }));
+                                }
+                            }));
+                        }
                         yield this.processStrip(strip, this.transformContentsToWidgets(courses, strip), 'done', calculateParentStatus, '', tabResults);
                     }
                     else {
                         this.processStrip(strip, this.transformContentsToWidgets(courses, strip), 'done', calculateParentStatus, 'viewMoreUrl');
                     }
                 }
-                // this.userSvc.fetchCbpPlanList().subscribe( async  (res: any) => {
-                //   if (res) {
-                //     console.log(res,'===============================>')
-                //     courses = res
-                //     if (strip.tabs && strip.tabs.length) {
-                //       tabResults = this.splitCbpTabsData(courses, strip)
-                //       await this.processStrip(
-                //         strip,
-                //         this.transformContentsToWidgets(courses, strip),
-                //         'done',
-                //         calculateParentStatus,
-                //         '',
-                //         tabResults
-                //       )
-                //     } else {
-                //       this.processStrip(
-                //         strip,
-                //         this.transformContentsToWidgets(courses, strip),
-                //         'done',
-                //         calculateParentStatus,
-                //         'viewMoreUrl',
-                //       )
-                //     }
-                //   }
-                // },                                        (_err: any) => {
-                // })
                 clearInterval(this.enrollInterval);
             }
         });
@@ -13522,11 +12343,17 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
         if (strip.tabs && strip.tabs.length) {
             for (let i = 0; i < strip.tabs.length; i += 1) {
                 if (strip.tabs[i].value === "myIgotPlans") {
+                    /** @type {?} */
+                    let checkWidgetAndActivePill = true;
                     if (strip.tabs[i].pillsData && strip.tabs[i].pillsData.length) {
                         for (let j = 0; j < strip.tabs[i].pillsData.length; j += 1) {
-                            if (j === 0) {
-                                strip.tabs[i].pillsData[j].selected = true;
-                            }
+                            // if(j === 0 ){
+                            // if(strip.tabs[i].pillsData[j].widgets && strip.tabs[i].pillsData[j].widgets.length ) {
+                            //   strip.tabs[i].pillsData[j].selected = true
+                            //   checkWidgetAndActivePill = false
+                            // }
+                            // strip.tabs[i].pillsData[j].selected = true
+                            // }
                             if (strip.tabs[i].pillsData[j]) {
                                 tabResults.push(Object.assign({}, strip.tabs[i].pillsData[j], { fetchTabStatus: 'done' }, (splitData.find((/**
                                  * @param {?} itmInner
@@ -13651,7 +12478,6 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
         (data) => {
             return data.contentStatus < 2;
         }));
-        // this.getSelectedIndex(1)
         return [
             { value: 'all', widgets: this.transformContentsToWidgets(all, strip) },
             { value: 'upcoming', widgets: this.transformContentsToWidgets(upcoming, strip) },
@@ -13678,7 +12504,7 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
 ContentStripWithTabsPillsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-content-strip-with-tabs-pills',
-                template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <!-- <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                    (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div> -->\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n\n                    <div class=\"wfull\" *ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n                      <div class=\"flex justify-between\">\n                        <div>\n                          <ng-container >\n                            <mat-chip-list  class=\"content-pill\" aria-label=\"Fish selection\">\n                                <ng-container *ngFor=\"let pill of tab?.pillsData;let p = index\">\n                                    <mat-chip [selected]=\"pill?.selected\" (click)=\"pillClicked($event, stripsResultDataMap[key], key, p, tabIndex)\">\n                                      <span class=\"pill-name\">{{pill?.label}}</span></mat-chip>\n                                </ng-container>\n                            </mat-chip-list>\n                          </ng-container>\n                        </div>\n                         <!-- viewAll start-->\n                            <!-- <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                              class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                              <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                                (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                                <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                                <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                              </a>\n                            </div> -->\n                          <!-- viewAll end-->\n                      </div>\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                                <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                     <ng-container *ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n                      <div *ngIf=\"((tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done') &&\n                      (!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets || !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                     </ng-container>\n                      <ng-container *ngIf=\"(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done' || tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.tabLoading\">\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n                            *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets| slice:0:(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
+                template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <!-- <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                    (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div> -->\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n\n                    <div class=\"wfull\" *ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n                      <div class=\"flex justify-between\">\n                        <div>\n                          <ng-container >\n                            <mat-chip-list  class=\"content-pill\" aria-label=\"Fish selection\">\n                                <ng-container *ngFor=\"let pill of tab?.pillsData;let p = index\">\n                                    <mat-chip [selected]=\"pill?.selected\" (click)=\"pillClicked($event, stripsResultDataMap[key], key, p, tabIndex)\">\n                                      <span class=\"pill-name\">{{pill?.label}}</span></mat-chip>\n                                </ng-container>\n                            </mat-chip-list>\n                          </ng-container>\n                        </div>\n                         <!-- viewAll start-->\n                            <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                              class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                              <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                                (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                                <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                                <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                              </a>\n                            </div>\n                          <!-- viewAll end-->\n                      </div>\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                                <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                     <ng-container *ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n                      <div *ngIf=\"((tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done') &&\n                      (!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets || !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                     </ng-container>\n                      <ng-container *ngIf=\"(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done' || tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.tabLoading\">\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n                            *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets| slice:0:(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
                 styles: [".view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more .icon{font-size:24px;width:24px;height:24px;border:1px solid;border-radius:50%;padding:8px;margin-bottom:8px}.margin-bottom-custom{margin-bottom:60px}.view-more:hover{background-color:#dcdfe5}::ng-deep.strips-tabgroup .mat-tab-header{border-bottom:2px solid rgba(0,0,0,.12)}::ng-deep.strips-tabgroup .mat-tab-body{padding:20px 0!important;box-sizing:border-box;overflow-y:initial!important}::ng-deep.strips-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep.strips-tabgroup .mat-tab-label{border-bottom:0 solid rgba(0,0,0,.1);margin-right:0;opacity:1}::ng-deep.strips-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:inherit;font:400 14px/20px Lato}::ng-deep.strips-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}.active{background:#1b4ca1!important}.active .pill-name{color:#fff!important}::ng-deep .content-pill .mat-chip-selected{background-color:#1b4ca1!important}::ng-deep .content-pill .mat-chip-selected .pill-name{color:#fff!important}"]
             }] }
 ];