@sunbird-cb/consumption 0.0.47 → 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: [""]
             }] }
 ];
@@ -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();
     }
     /**
-     * @param {?} provider
      * @return {?}
      */
-    redirectTo(provider) {
-        window.open(provider.link, '_blank');
+    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 {?} content
+     * @return {?}
+     */
+    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;
 }
 
 /**
@@ -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]  &&  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>",
+                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;