@sunbird-cb/consumption 0.0.47 → 0.0.48

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

@@ -4422,9 +4422,15 @@
                 var tabResults_1 = [];
                 /** @type {?} */
                 var queryParams = lodash.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
@@ -4566,14 +4572,55 @@
             /** @type {?} */
             var inprogress = [];
             /** @type {?} */
-            var completed = [];
+            var 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 {?}
              */
-            function (e, idx, arr) { return (customFilter(e, idx, arr) ? inprogress : completed).push(e); }));
+            function (e, idx, arr) {
+                /** @type {?} */
+                var status = e.status ? ((/** @type {?} */ (e.status))).toLowerCase() : '';
+                /** @type {?} */
+                var 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 {?}
+             */
+            function (a, b) {
+                /** @type {?} */
+                var statusA = a.status ? a.status.toLowerCase() : '';
+                /** @type {?} */
+                var 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) }
@@ -4688,17 +4735,41 @@
                 this.enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
                 /** @type {?} */
                 var filteredArray_1 = [];
+                /** @type {?} */
+                var now_1 = new Date().getTime();
                 content.forEach((/**
                  * @param {?} data
                  * @return {?}
                  */
                 function (data) {
                     if (_this.enrollmentMapData[data.identifier]) {
-                        data['batch'] = _this.enrollmentMapData[data.identifier].batch;
-                        data['completionPercentage'] = _this.enrollmentMapData[data.identifier].completionPercentage;
-                        filteredArray_1.push(data);
+                        if (_this.enrollmentMapData[data.identifier].batch) {
+                            /** @type {?} */
+                            var enrollData = _this.enrollmentMapData[data.identifier].batch;
+                            /** @type {?} */
+                            var endDateTime = new Date((enrollData.endDate) + "T" + enrollData.endTime);
+                            /** @type {?} */
+                            var timeDuration = endDateTime.getTime() - now_1;
+                            if (timeDuration > 0) {
+                                data['batch'] = _this.enrollmentMapData[data.identifier].batch;
+                                data['completionPercentage'] = _this.enrollmentMapData[data.identifier].completionPercentage;
+                                filteredArray_1.push(data);
+                            }
+                        }
                     }
                 }));
+                filteredArray_1 = filteredArray_1.sort((/**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */
+                function (a, b) {
+                    /** @type {?} */
+                    var dateA = new Date(a.batch.startDate || 0);
+                    /** @type {?} */
+                    var dateB = new Date(b.batch.startDate || 0);
+                    return dateB - dateA;
+                }));
                 this.processStrip(strip, this.transformContentsToWidgets(filteredArray_1, strip), 'done', calculateParentStatus, viewMoreUrl);
                 clearInterval(this.enrollInterval);
             }
@@ -5926,7 +5997,15 @@
                                  */
                                 function (results) {
                                     /** @type {?} */
-                                    var showViewMore = Boolean(results.result.data && results.result.data.orgList.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                                    var 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 {?} */
+                                        var featuredProvider = JSON.parse(results.result.content.featuredProviders || '[]');
+                                        showViewMore = Boolean(featuredProvider && featuredProvider.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                                    }
                                     /** @type {?} */
                                     var viewMoreUrl = showViewMore
                                         ? {
@@ -5982,6 +6061,9 @@
                 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;
         };
         /**
@@ -6168,7 +6250,7 @@
         function (strip, calculateParentStatus) {
             if (calculateParentStatus === void 0) { calculateParentStatus = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var originalFilters, response, content, error_9;
+                var originalFilters, response, content, featuredProviders, error_9;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6187,7 +6269,13 @@
                             response = _a.sent();
                             if (response && response.results.result.content) {
                                 content = response.results.result.content;
-                                this.processStrip(strip, this.transformAllContentsToWidgets(content, strip), 'done', calculateParentStatus, response);
+                                if (strip.key === 'providers') {
+                                    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);
@@ -6221,7 +6309,6 @@
                     switch (_a.label) {
                         case 0:
                             if (!(strip.request && strip.request.ciosContent && Object.keys(strip.request.ciosContent).length)) return [3 /*break*/, 4];
-                            debugger;
                             originalFilters = [];
                             if (strip.request &&
                                 strip.request.ciosContent &&
@@ -9007,7 +9094,7 @@
         CardsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-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: [""]
                     }] }
         ];
@@ -10229,6 +10316,7 @@
             this.router = router;
             this.channelData = new core.EventEmitter();
             this.emitTelemetry = new core.EventEmitter();
+            this.isCardLoading = false;
             this.widgetType = '';
             this.widgetSubType = '';
             this.langtranslations.languageSelectedObservable.subscribe((/**
@@ -10302,7 +10390,7 @@
         CardMDOChannelComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-card-mdo-channel',
-                        template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData?.content\">\n            <a (click)=\"raiseTelemetry(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}}"]
                     }] }
         ];
@@ -10318,7 +10406,8 @@
         CardMDOChannelComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
             channelData: [{ type: core.Output }],
-            emitTelemetry: [{ type: core.Output }]
+            emitTelemetry: [{ type: core.Output }],
+            isCardLoading: [{ type: core.Input }]
         };
         return CardMDOChannelComponent;
     }());
@@ -10330,6 +10419,8 @@
         /** @type {?} */
         CardMDOChannelComponent.prototype.emitTelemetry;
         /** @type {?} */
+        CardMDOChannelComponent.prototype.isCardLoading;
+        /** @type {?} */
         CardMDOChannelComponent.prototype.defaultThumbnail;
         /** @type {?} */
         CardMDOChannelComponent.prototype.sourceLogos;
@@ -10899,134 +10990,10 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var ProviderCardComponent = /** @class */ (function () {
-        function ProviderCardComponent() {
-            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"
-                }
-            ];
+        function ProviderCardComponent(router) {
+            this.router = router;
+            this.randomColorApply = true;
+            this.isCardLoading = false;
             this.colors = [
                 '#EF941D', '#F97440', '#35B5B0', '#9988FF', '#816FEC',
                 '#254092', '#926525', '#4F72DF'
@@ -11039,34 +11006,69 @@
          * @return {?}
          */
         function () {
+            this.setRandomColor();
         };
         /**
-         * @param {?} provider
+         * @return {?}
+         */
+        ProviderCardComponent.prototype.setRandomColor = /**
+         * @return {?}
+         */
+        function () {
+            if (this.widgetData && this.widgetData.content) {
+                if (this.randomColorApply) {
+                    /** @type {?} */
+                    var 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 {?}
          */
         ProviderCardComponent.prototype.redirectTo = /**
-         * @param {?} provider
+         * @param {?} content
          * @return {?}
          */
-        function (provider) {
-            window.open(provider.link, '_blank');
+        function (content) {
+            this.router.navigate(["/app/learn/browse-by/provider/" + content.name + "/" + content.orgId + "/micro-sites"]);
         };
         ProviderCardComponent.decorators = [
             { type: core.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 = function () { return []; };
+        ProviderCardComponent.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        ProviderCardComponent.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            randomColorApply: [{ type: core.Input }],
+            isCardLoading: [{ type: core.Input }]
+        };
         return ProviderCardComponent;
     }());
     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;
     }
 
     /**
@@ -11289,67 +11291,58 @@
          */
         function (data) {
             var _this = this;
-            this.updateCountdown(data.startDate, data.endDate);
-            // Update the countdown every second
+            /** @type {?} */
+            var startDate = data.startDate;
+            /** @type {?} */
+            var startTime = data.startTime;
+            this.updateCountdown(startDate, startTime);
             this.intervalId = setInterval((/**
              * @return {?}
              */
             function () {
-                _this.updateCountdown(data.startDate, data.endDate);
+                _this.updateCountdown(startDate, startTime);
             }), 1000);
         };
         // Method to update the countdown values
         // Method to update the countdown values
         /**
          * @param {?} startDate
-         * @param {?} endDate
+         * @param {?} startTime
          * @return {?}
          */
         CardAssessmentComponent.prototype.updateCountdown = 
         // Method to update the countdown values
         /**
          * @param {?} startDate
-         * @param {?} endDate
+         * @param {?} startTime
          * @return {?}
          */
-        function (startDate, endDate) {
+        function (startDate, startTime) {
             /** @type {?} */
             var now = new Date().getTime();
-            // Current time in milliseconds
-            /** @type {?} */
-            var targetTime = new Date(startDate).getTime();
             /** @type {?} */
-            var targetEndDate = new Date(endDate).getTime();
+            var startDateTime = new Date(startDate + "T" + startTime);
             /** @type {?} */
-            var distance = targetTime - now;
-            // Distance in milliseconds
-            /** @type {?} */
-            var endDistance = now - targetEndDate;
+            var 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
-        // Method to clear the interval
         /**
          * @return {?}
          */
-        CardAssessmentComponent.prototype.clearTimer = 
-        // Method to clear the interval
-        /**
+        CardAssessmentComponent.prototype.clearTimer = /**
          * @return {?}
          */
         function () {
@@ -11384,8 +11377,8 @@
         CardAssessmentComponent.decorators = [
             { type: core.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 */
@@ -11435,6 +11428,12 @@
          * @private
          */
         CardAssessmentComponent.prototype.intervalId;
+        /** @type {?} */
+        CardAssessmentComponent.prototype.days;
+        /** @type {?} */
+        CardAssessmentComponent.prototype.hours;
+        /** @type {?} */
+        CardAssessmentComponent.prototype.minutes;
         /**
          * @type {?}
          * @private
@@ -11918,7 +11917,7 @@
         CardProgressPortraitLibComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -12184,6 +12183,7 @@
             this.router = router;
             this.channelData = new core.EventEmitter();
             this.emitTelemetry = new core.EventEmitter();
+            this.isCardLoading = false;
             this.widgetType = '';
             this.widgetSubType = '';
             this.langtranslations.languageSelectedObservable.subscribe((/**
@@ -12257,7 +12257,7 @@
         CardMdoChannelV1Component.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -12273,7 +12273,8 @@
         CardMdoChannelV1Component.propDecorators = {
             widgetData: [{ type: core.Input }],
             channelData: [{ type: core.Output }],
-            emitTelemetry: [{ type: core.Output }]
+            emitTelemetry: [{ type: core.Output }],
+            isCardLoading: [{ type: core.Input }]
         };
         return CardMdoChannelV1Component;
     }());
@@ -12285,6 +12286,8 @@
         /** @type {?} */
         CardMdoChannelV1Component.prototype.emitTelemetry;
         /** @type {?} */
+        CardMdoChannelV1Component.prototype.isCardLoading;
+        /** @type {?} */
         CardMdoChannelV1Component.prototype.defaultThumbnail;
         /** @type {?} */
         CardMdoChannelV1Component.prototype.sourceLogos;