@sunbird-cb/consumption 0.0.60 → 0.0.62

package/fesm5/sunbird-cb-consumption.js

@@ -1,7 +1,7 @@
 import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChildren, Pipe } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { Router, RouterModule, ActivatedRoute } from '@angular/router';
-import { fromEvent, timer, BehaviorSubject, Subject, of, EMPTY, ReplaySubject, throwError, interval } from 'rxjs';
+import { fromEvent, timer, BehaviorSubject, Subject, of, EMPTY, ReplaySubject, throwError, Observable, interval } from 'rxjs';
 import { debounceTime, throttleTime, shareReplay, retry, map, catchError, filter, distinctUntilChanged } from 'rxjs/operators';
 import { ValueService, ConfigurationsService as ConfigurationsService$1, WsEvents, LoggerService, EventService, UtilityService, MultilingualTranslationsService as MultilingualTranslationsService$1, PipeSafeSanitizerModule } from '@sunbird-cb/utils-v2';
 import { MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatToolbarModule, MatTooltipModule, MatListModule, MatSidenavModule, MatCardModule, MatExpansionModule, MatRadioModule, MatChipsModule, MatInputModule, MatFormFieldModule, MatDialogModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatTableModule, MatCheckboxModule, MatButtonToggleModule, MatTabsModule, MatAutocompleteModule, MatSnackBar, MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatProgressBarModule, MatMenuModule, MatRippleModule } from '@angular/material';
@@ -12,6 +12,7 @@ import { get, uniqBy, orderBy, camelCase, kebabCase } from 'lodash';
 import * as moment$2 from 'moment';
 import { duration, utc } from 'moment';
 import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import 'rxjs/add/observable/of';
 import * as dayjs_ from 'dayjs';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -3269,11 +3270,32 @@ var WidgetUserService = /** @class */ (function () {
              * @return {?}
              */
             function (data) {
-                localStorage.setItem('enrollmentData', JSON.stringify(data.result));
+                /** @type {?} */
+                var coursesData = [];
+                if (data && data.result && data.result.courses) {
+                    data.result.courses.forEach((/**
+                     * @param {?} content
+                     * @return {?}
+                     */
+                    function (content) {
+                        if (content.contentStatus) {
+                            delete content.contentStatus;
+                        }
+                        coursesData.push(content);
+                    }));
+                    _this.storeUserEnrollmentInfo(data.result.userCourseEnrolmentInfo, data.result.courses.length);
+                    data.result.courses = coursesData;
+                    if (data.result.courses.length < 200) {
+                        localStorage.removeItem('enrollmentData');
+                        _this.setTime('enrollmentService');
+                        localStorage.setItem('enrollmentData', JSON.stringify(data.result));
+                        _this.mapEnrollmentData(data.result);
+                        return data.result;
+                    }
+                }
                 _this.mapEnrollmentData(data.result);
                 return data.result;
             })));
-            this.setTime('enrollmentService');
             return result;
         }
         return this.getData('enrollmentData');
@@ -3370,7 +3392,7 @@ var WidgetUserService = /** @class */ (function () {
      * @return {?}
      */
     function (key) {
-        return of(JSON.parse(localStorage.getItem(key) || '{}'));
+        return Observable.of(JSON.parse(localStorage.getItem(key) || '{}'));
     };
     /**
      * @param {?} key
@@ -3498,11 +3520,11 @@ var WidgetUserService = /** @class */ (function () {
                             var endDate = dayjs(c.endDate).format('YYYY-MM-DD');
                             /** @type {?} */
                             var daysCount = dayjs(endDate).diff(todayDate, 'day');
-                            childData.planDuration = daysCount < 0 ? NsCardContent.ACBPConst.OVERDUE : daysCount > 29
+                            childData['planDuration'] = daysCount < 0 ? NsCardContent.ACBPConst.OVERDUE : daysCount > 29
                                 ? NsCardContent.ACBPConst.SUCCESS : NsCardContent.ACBPConst.UPCOMING;
-                            childData.endDate = c.endDate;
-                            childData.parentId = c.id;
-                            childData.planType = 'cbPlan';
+                            childData['endDate'] = c.endDate;
+                            childData['parentId'] = c.id;
+                            childData['planType'] = 'cbPlan';
                             if (childData.status !== NsCardContent.IGOTConst.RETIRED) {
                                 contentNew.push(childData);
                             }
@@ -3525,9 +3547,9 @@ var WidgetUserService = /** @class */ (function () {
                             var competencyThemeId = [];
                             /** @type {?} */
                             var competencySubThemeId = [];
-                            childData.contentStatus = 0;
+                            childData['contentStatus'] = 0;
                             if (childEnrollData) {
-                                childData.contentStatus = childEnrollData.status;
+                                childData['contentStatus'] = childEnrollData.status;
                             }
                             if (childData.competencies_v5) {
                                 childData.competencies_v5.forEach((/**
@@ -3552,13 +3574,13 @@ var WidgetUserService = /** @class */ (function () {
                                     }
                                 }));
                             }
-                            childData.competencyArea = competencyArea;
-                            childData.competencyTheme = competencyTheme;
-                            childData.competencyThemeType = competencyThemeType;
-                            childData.competencySubTheme = competencySubTheme;
-                            childData.competencyAreaId = competencyAreaId;
-                            childData.competencyThemeId = competencyThemeId;
-                            childData.competencySubThemeId = competencySubThemeId;
+                            childData['competencyArea'] = competencyArea;
+                            childData['competencyTheme'] = competencyTheme;
+                            childData['competencyThemeType'] = competencyThemeType;
+                            childData['competencySubTheme'] = competencySubTheme;
+                            childData['competencyAreaId'] = competencyAreaId;
+                            childData['competencyThemeId'] = competencyThemeId;
+                            childData['competencySubThemeId'] = competencySubThemeId;
                         }));
                     }));
                     if (contentNew.length > 1) {
@@ -3608,8 +3630,28 @@ var WidgetUserService = /** @class */ (function () {
                 enrollData[data.collectionId] = data;
             }));
         }
+        localStorage.removeItem('enrollmentMapData');
         localStorage.setItem('enrollmentMapData', JSON.stringify(enrollData));
     };
+    /**
+     * @param {?} enrollmentData
+     * @param {?} enrolledCourseCount
+     * @return {?}
+     */
+    WidgetUserService.prototype.storeUserEnrollmentInfo = /**
+     * @param {?} enrollmentData
+     * @param {?} enrolledCourseCount
+     * @return {?}
+     */
+    function (enrollmentData, enrolledCourseCount) {
+        /** @type {?} */
+        var userData = {
+            enrolledCourseCount: enrolledCourseCount,
+            userCourseEnrolmentInfo: enrollmentData,
+        };
+        localStorage.removeItem('userEnrollmentCount');
+        localStorage.setItem('userEnrollmentCount', JSON.stringify(userData));
+    };
     WidgetUserService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root',
@@ -11934,7 +11976,7 @@ var CardPortraitExtComponent = /** @class */ (function () {
     CardPortraitExtComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-card-portrait-ext',
-                    template: "<ng-container *ngIf=\"!isCardLoading\">\n    <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer  {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n      greyOut:\n        widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n    <div class=\"display-contents\" [ngClass]=\"{\n        disableClick:\n          widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n            ? true\n            : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n      }\">\n      <ng-container *ngIf=\"widgetData?.content\">\n        <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n            role=\"link\" i18n-aria-label>\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n          matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n          matTooltip=\"Available only in Company's network\"\n          *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n        <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n          (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n          <mat-icon>flip_to_back</mat-icon>\n        </button>\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n              <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-container *ngIf=\"!widgetData.content.posterImage\">\n              <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                <img mat-card-image [src]=\"widgetData.content.appIcon \" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-container>\n              <ng-template #defaultImg>\n                <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-template>\n            </ng-container>\n            <div class=\"source-div\" style=\"display: none;\">\n              <img [src]=\"widgetData?.content.contentPartner.link\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData.content?.contentId)\" />\n            </div>\n            <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n              <div class=\"cbp-mark\">\n                <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId] &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2 \">\n              <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                cbpData: cbPlanMapData[widgetData?.content?.contentId]\n              }}\"></ng-container>\n            </ng-container>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n              </span>\n            </div>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n              </span>\n            </div>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end course_v2\">\n                <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                <sb-uic-display-content-type [useTranslation]=\"false\" i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.topic\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"'External Course'\">\n  \n                </sb-uic-display-content-type>\n              </div>\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.contentId\"\n              class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\" [matTooltip]=\"widgetData.content.name\">\n              {{ widgetData.content.name }}\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n              <div class=\"course_logo_box\">\n                <img [src]=\"widgetData.content.contentPartner.link  \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.contentId)\" />\n              </div>\n              <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n                <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.contentPartner?.contentPartnerName) ? widgetData?.content?.contentPartner?.contentPartnerName : 'Karmayogi Bharat' }}</span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n                <mat-icon class=\"mr-1\">star</mat-icon>\n                <span>{{widgetData.content.avgRating}}</span>\n              </div>\n              <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n              <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n                <span class=\"most-enrolled-text margin-left-xs\">\n                  <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n              </span>\n              </ng-container>\n              <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n                <span class=\"most-enrolled-text margin-left-xs\">\n                  <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n              </span>\n              </ng-container>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n      <ng-container *ngIf=\"isCardFlipped\">\n        <div class=\"flex items-center\">\n          <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n          <button mat-icon-button (click)=\"isCardFlipped = false\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <p class=\"text-justify mat-body-1\">\n          {{ widgetData.content.reason }}\n        </p>\n      </ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </mat-card>\n  </ng-container>\n  \n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n      <div class=\"display-contents\" >\n        <ng-container *ngIf=\"!isCardFlipped\">\n          <mat-card-content class=\"min-top\">\n            <div style=\"position: relative; z-index: 1;\">\n              <ng-container>\n                <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </ng-container>\n            </div>\n            <div class=\"padding-m\">\n              <div class=\"course_widget flex margin-remove\">\n                <div class=\"flex flex-end\">\n                  <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n                </div>\n              </div>\n              <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n                <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n              </div>\n              <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n                <div class=\"\">\n                  <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n                </div>\n                <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n              </div>\n              <div class=\"flex flex-middle rating-session margin-top-m\">\n                <div class=\"flex flex-middle\">\n                  <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n        </ng-container>\n      </div>\n    </mat-card>\n  </ng-container>\n  \n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>",
+                    template: "<ng-container *ngIf=\"!isCardLoading\">\n    <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer  {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n      greyOut:\n        widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n          ? true\n          : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n    }\" (click)=\"(showIntranetContent || !isLiveOrMarkForDeletion) && showSnackbar()\">\n    <div class=\"display-contents\" [ngClass]=\"{\n        disableClick:\n          widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n            ? true\n            : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n      }\">\n      <ng-container *ngIf=\"widgetData?.content\">\n        <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n            role=\"link\" i18n-aria-label>\n      <ng-container *ngIf=\"!isCardFlipped\">\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n          matTooltip=\"Content may be expired or deleted\" *ngIf=\"!isLiveOrMarkForDeletion\"></div>\n        <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n          matTooltip=\"Available only in Company's network\"\n          *ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n        <button *ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n          (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details | Click to see details\">\n          <mat-icon>flip_to_back</mat-icon>\n        </button>\n        <mat-card-content class=\"min-top\">\n          <div style=\"position: relative; z-index: 1;\">\n            <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n              <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n              class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n              [alt]=\"widgetData.content.name\" />\n            </ng-container>\n            <ng-container *ngIf=\"!widgetData.content.posterImage\">\n              <ng-container *ngIf=\"widgetData.content.appIcon; else defaultImg\">\n                <img mat-card-image [src]=\"widgetData.content.appIcon \" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-container>\n              <ng-template #defaultImg>\n                <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-template>\n            </ng-container>\n            <div class=\"source-div\" style=\"display: none;\">\n              <img [src]=\"widgetData?.content?.contentPartner?.link\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData.content?.contentId)\" />\n            </div>\n            <ng-container *ngIf=\"widgetData?.content?.cbPlanEndDate\">\n              <div class=\"cbp-mark\">\n                <span>{{widgetData?.content?.cbPlanEndDate | date: 'd MMM, y'}}</span>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId] &&  cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2 \">\n              <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n                cbpData: cbPlanMapData[widgetData?.content?.contentId]\n              }}\"></ng-container>\n            </ng-container>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}\n              </span>\n            </div>\n            <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.programDuration > 0\">\n              <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n              <span class=\" ws-mat-white-text duration\">\n                {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n              </span>\n            </div>\n          </div>\n          <div class=\"padding-m\">\n            <div class=\"course_widget flex margin-remove\">\n              <div class=\"flex flex-end course_v2\">\n                <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                <sb-uic-display-content-type [useTranslation]=\"false\" i18n-title title=\"Content Type\" *ngIf=\"widgetData.content?.topic\"\n                  class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"'External Course'\">\n  \n                </sb-uic-display-content-type>\n              </div>\n            </div>\n            <div [id]=\"'m-c-'+ widgetData.content?.contentId\"\n              class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\" [matTooltip]=\"widgetData.content.name\">\n              {{ widgetData.content.name }}\n            </div>\n            <div class=\"flex w-full flex-wrap flex-middle\">\n              <div class=\"course_logo_box\">\n                <img [src]=\"widgetData.content.contentPartner.link  \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.contentId)\" />\n              </div>\n              <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n                <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.contentPartner?.contentPartnerName) ? widgetData?.content?.contentPartner?.contentPartnerName : 'Karmayogi Bharat' }}</span>\n            </div>\n            <div class=\"flex flex-middle rating-session margin-top-m\">\n              <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n                <mat-icon class=\"mr-1\">star</mat-icon>\n                <span>{{widgetData.content.avgRating}}</span>\n              </div>\n              <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n              <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n                <span class=\"most-enrolled-text margin-left-xs\">\n                  <!-- {{ 'cardcontentv2.mostEnrolled' | translate }} -->\n              </span>\n              </ng-container>\n              <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n                <span class=\"most-enrolled-text margin-left-xs\">\n                  <!-- {{ 'cardcontentv2.mostTrending' | translate }} -->\n              </span>\n              </ng-container>\n            </div>\n          </div>\n        </mat-card-content>\n      </ng-container>\n      <ng-container *ngIf=\"isCardFlipped\">\n        <div class=\"flex items-center\">\n          <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' | translate}}</h2> -->\n          <button mat-icon-button (click)=\"isCardFlipped = false\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <p class=\"text-justify mat-body-1\">\n          {{ widgetData.content.reason }}\n        </p>\n      </ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </mat-card>\n  </ng-container>\n  \n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n      <div class=\"display-contents\" >\n        <ng-container *ngIf=\"!isCardFlipped\">\n          <mat-card-content class=\"min-top\">\n            <div style=\"position: relative; z-index: 1;\">\n              <ng-container>\n                <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n              </ng-container>\n            </div>\n            <div class=\"padding-m\">\n              <div class=\"course_widget flex margin-remove\">\n                <div class=\"flex flex-end\">\n                  <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n                </div>\n              </div>\n              <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n                <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n              </div>\n              <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n                <div class=\"\">\n                  <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n                </div>\n                <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n              </div>\n              <div class=\"flex flex-middle rating-session margin-top-m\">\n                <div class=\"flex flex-middle\">\n                  <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n                </div>\n              </div>\n            </div>\n          </mat-card-content>\n        </ng-container>\n      </div>\n    </mat-card>\n  </ng-container>\n  \n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data.cbpData.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>",
                     styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.tooltiptext{visibility:hidden;width:90px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:4px 0;position:absolute;z-index:1;top:25px;left:-32px;font-size:12px}.title-text:hover .tooltiptext{visibility:visible}"]
                 }] }
     ];