@sunbird-cb/toc 0.35.12 → 0.35.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.mjs +3 -3
- package/esm2022/lib/_services/widget-content.service.mjs +8 -8
- package/esm2022/lib/components/app-toc-home-v2/app-toc-home-v2.component.mjs +2 -2
- package/esm2022/lib/services/app-toc.service.mjs +3 -3
- package/esm2022/lib/services/viewer-util.service.mjs +6 -6
- package/fesm2022/sunbird-cb-toc.mjs +18 -18
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/package.json +1 -1
- package/sunbird-cb-toc-0.35.14.tgz +0 -0
|
@@ -710,11 +710,11 @@ class WidgetContentService {
|
|
|
710
710
|
const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
|
|
711
711
|
if (primaryCategory && this.isResource(primaryCategory)) {
|
|
712
712
|
if (!forPreview) {
|
|
713
|
-
url = `/apis/proxies/v8/
|
|
713
|
+
url = `/apis/proxies/v8/content/v2/read/${contentId}`;
|
|
714
714
|
}
|
|
715
715
|
else {
|
|
716
716
|
if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
|
|
717
|
-
url = `/apis/proxies/v8/
|
|
717
|
+
url = `/apis/proxies/v8/content/v2/read/${contentId}`;
|
|
718
718
|
}
|
|
719
719
|
else {
|
|
720
720
|
url = `/api/content/v1/read/${contentId}`;
|
|
@@ -723,12 +723,12 @@ class WidgetContentService {
|
|
|
723
723
|
}
|
|
724
724
|
else {
|
|
725
725
|
if (!forPreview) {
|
|
726
|
-
url = `/apis/proxies/v8/
|
|
726
|
+
url = `/apis/proxies/v8/course/v1/hierarchy/${contentId}?hierarchyType=${hierarchyType}`;
|
|
727
727
|
}
|
|
728
728
|
else {
|
|
729
729
|
const forcreator = window.location.href.includes('editMode=true');
|
|
730
730
|
if (forcreator) {
|
|
731
|
-
url = `apis/proxies/v8/
|
|
731
|
+
url = `apis/proxies/v8/course/v1/hierarchy/${contentId}?mode=edit`;
|
|
732
732
|
}
|
|
733
733
|
else {
|
|
734
734
|
url = `/api/course/v1/hierarchy/${contentId}?hierarchyType=${hierarchyType}`;
|
|
@@ -749,7 +749,7 @@ class WidgetContentService {
|
|
|
749
749
|
const forcreator = window.location.href.includes('editMode=true');
|
|
750
750
|
let url = '';
|
|
751
751
|
if (forcreator) {
|
|
752
|
-
url = `apis/proxies/v8/
|
|
752
|
+
url = `apis/proxies/v8/course/v1/hierarchy/${contentId}?mode=edit`;
|
|
753
753
|
}
|
|
754
754
|
else if (apiType && apiType === 'read') {
|
|
755
755
|
url = `/api/content/v1/read/${contentId}`;
|
|
@@ -1161,12 +1161,12 @@ class WidgetContentService {
|
|
|
1161
1161
|
let url = '';
|
|
1162
1162
|
const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
|
|
1163
1163
|
if (!forPreview) {
|
|
1164
|
-
url = `/apis/proxies/v8/
|
|
1164
|
+
url = `/apis/proxies/v8/course/v1/hierarchy/${contentId}?hierarchyType=${hierarchyType}`;
|
|
1165
1165
|
}
|
|
1166
1166
|
else {
|
|
1167
1167
|
const forcreator = window.location.href.includes('editMode=true');
|
|
1168
1168
|
if (forcreator) {
|
|
1169
|
-
url = `apis/proxies/v8/
|
|
1169
|
+
url = `apis/proxies/v8/course/v1/hierarchy/${contentId}?mode=edit`;
|
|
1170
1170
|
}
|
|
1171
1171
|
else {
|
|
1172
1172
|
url = `/api/course/v1/hierarchy/${contentId}?hierarchyType=${hierarchyType}`;
|
|
@@ -1221,7 +1221,7 @@ const API_END_POINTS$8 = {
|
|
|
1221
1221
|
COHORTS_GROUP_USER: (groupId) => `${PROTECTED_SLAG_V8$1}/cohorts/${groupId}`,
|
|
1222
1222
|
RELATED_RESOURCE: (contentId, contentType) => `${PROTECTED_SLAG_V8$1}/khub/fetchRelatedResources/${contentId}/${contentType}`,
|
|
1223
1223
|
POST_ASSESSMENT: (contentId) => `${PROTECTED_SLAG_V8$1}/user/evaluate/post-assessment/${contentId}`,
|
|
1224
|
-
GET_CONTENT: (contentId) => `${PROXY_SLAG_V8$1}/
|
|
1224
|
+
GET_CONTENT: (contentId) => `${PROXY_SLAG_V8$1}/content/v2/read/${contentId}`,
|
|
1225
1225
|
CERT_DOWNLOAD: (certId) => `${PROTECTED_SLAG_V8$1}/cohorts/course/batch/cert/download/${certId}`,
|
|
1226
1226
|
SERVER_DATE: 'apis/public/v8/systemDate',
|
|
1227
1227
|
SHARE_CONTENT: '/apis/proxies/v8/user/v1/content/recommend',
|
|
@@ -1693,7 +1693,7 @@ class AppTocService {
|
|
|
1693
1693
|
return this.http.get(API_END_POINTS$8.GET_CONTENT(contentId));
|
|
1694
1694
|
}
|
|
1695
1695
|
if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
|
|
1696
|
-
url = `/apis/proxies/v8/
|
|
1696
|
+
url = `/apis/proxies/v8/content/v2/read/${contentId}`;
|
|
1697
1697
|
}
|
|
1698
1698
|
else {
|
|
1699
1699
|
url = `/api/content/v1/read/${contentId}`;
|
|
@@ -9299,7 +9299,7 @@ class AppTocContentCardV2Component {
|
|
|
9299
9299
|
return element.scrollHeight > element.clientHeight;
|
|
9300
9300
|
}
|
|
9301
9301
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardV2Component, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }, { token: i0.Renderer2 }, { token: CertificateService }, { token: AppTocService }, { token: i5.ContentLanguageService }, { token: ResourceDownloadHelperService }, { token: i2$1.ConfigurationsService }, { token: i7.MatLegacySnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9302
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n The content is locked. Complete program or all courses to view this module\n </span>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container> -->\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (2 lines with ellipsis) -->\n <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex flex-col gap-2\">\n <div class=\"flex items-center justify-start gap-4 w-100\">\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of {{content?.leafNodesCount || 0}} completed</span>\n <!-- View Achievement Button - Shown only when all mandatory content AND milestone assessment are completed -->\n <ng-container *ngIf=\"isMilestoneComplete(content?.identifier)\">\n <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event, content)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </ng-container>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\" style=\"white-space: normal; word-wrap: break-word; display: inline-block; max-width: 100%;\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
|
|
9302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n Kindly ensure that you have enrolled in the Comprehensive Assessment Program and completed all the required courses to unlock the Final Assessment.\n </span>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container> -->\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (2 lines with ellipsis) -->\n <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex flex-col gap-2\">\n <div class=\"flex items-center justify-start gap-4 w-100\">\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of {{content?.leafNodesCount || 0}} completed</span>\n <!-- View Achievement Button - Shown only when all mandatory content AND milestone assessment are completed -->\n <ng-container *ngIf=\"isMilestoneComplete(content?.identifier)\">\n <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event, content)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </ng-container>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\" style=\"white-space: normal; word-wrap: break-word; display: inline-block; max-width: 100%;\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
|
|
9303
9303
|
trigger('panelInOut', [
|
|
9304
9304
|
transition('void => *', [
|
|
9305
9305
|
style({ transform: 'translateY(-10%)', opacity: '0' }),
|
|
@@ -9323,7 +9323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9323
9323
|
animate(200, style({ transform: 'translateY(-10%)', opacity: '0' }))
|
|
9324
9324
|
])
|
|
9325
9325
|
])
|
|
9326
|
-
], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n The content is locked. Complete program or all courses to view this module\n </span>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container> -->\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (2 lines with ellipsis) -->\n <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex flex-col gap-2\">\n <div class=\"flex items-center justify-start gap-4 w-100\">\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of {{content?.leafNodesCount || 0}} completed</span>\n <!-- View Achievement Button - Shown only when all mandatory content AND milestone assessment are completed -->\n <ng-container *ngIf=\"isMilestoneComplete(content?.identifier)\">\n <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event, content)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </ng-container>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\" style=\"white-space: normal; word-wrap: break-word; display: inline-block; max-width: 100%;\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
|
|
9326
|
+
], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n Kindly ensure that you have enrolled in the Comprehensive Assessment Program and completed all the required courses to unlock the Final Assessment.\n </span>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container> -->\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (2 lines with ellipsis) -->\n <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex flex-col gap-2\">\n <div class=\"flex items-center justify-start gap-4 w-100\">\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of {{content?.leafNodesCount || 0}} completed</span>\n <!-- View Achievement Button - Shown only when all mandatory content AND milestone assessment are completed -->\n <ng-container *ngIf=\"isMilestoneComplete(content?.identifier)\">\n <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event, content)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </ng-container>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\" style=\"white-space: normal; word-wrap: break-word; display: inline-block; max-width: 100%;\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
|
|
9327
9327
|
}], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$3.MatLegacyDialog }, { type: i0.Renderer2 }, { type: CertificateService }, { type: AppTocService }, { type: i5.ContentLanguageService }, { type: ResourceDownloadHelperService }, { type: i2$1.ConfigurationsService }, { type: i7.MatLegacySnackBar }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
|
|
9328
9328
|
type: Input
|
|
9329
9329
|
}], expandAll: [{
|
|
@@ -13956,13 +13956,13 @@ class ViewerUtilService {
|
|
|
13956
13956
|
}
|
|
13957
13957
|
getContent(contentId) {
|
|
13958
13958
|
const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
|
|
13959
|
-
let url = `/apis/proxies/v8/
|
|
13959
|
+
let url = `/apis/proxies/v8/content/v2/read/${contentId}`;
|
|
13960
13960
|
if (!forPreview) {
|
|
13961
|
-
url = `/apis/proxies/v8/
|
|
13961
|
+
url = `/apis/proxies/v8/content/v2/read/${contentId}`;
|
|
13962
13962
|
}
|
|
13963
13963
|
else {
|
|
13964
13964
|
if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
|
|
13965
|
-
url = `/apis/proxies/v8/
|
|
13965
|
+
url = `/apis/proxies/v8/content/v2/read/${contentId}`;
|
|
13966
13966
|
}
|
|
13967
13967
|
else {
|
|
13968
13968
|
url = `/api/content/v1/read/${contentId}`;
|
|
@@ -14000,14 +14000,14 @@ class ViewerUtilService {
|
|
|
14000
14000
|
// let url = ''
|
|
14001
14001
|
// const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true')
|
|
14002
14002
|
// if (!forPreview) {
|
|
14003
|
-
// url = `/apis/proxies/v8/
|
|
14003
|
+
// url = `/apis/proxies/v8/course/v1/hierarchy/${contentId}?hierarchyType=${hierarchyType}`
|
|
14004
14004
|
// } else {
|
|
14005
14005
|
// url = `/api/course/v1/hierarchy/${contentId}?hierarchyType=${hierarchyType}`
|
|
14006
14006
|
// }
|
|
14007
14007
|
// return this.http.get<NsContent.IContent>(url)
|
|
14008
14008
|
// }
|
|
14009
14009
|
fetchContent(id, type) {
|
|
14010
|
-
return this.http.get(`/apis/proxies/v8/
|
|
14010
|
+
return this.http.get(`/apis/proxies/v8/course/v1/hierarchy/${id}?mode=${type}`);
|
|
14011
14011
|
}
|
|
14012
14012
|
updateContentHashMapForAssesstent(contentId, contentProgress) {
|
|
14013
14013
|
if (this.tocSvc.hashmap[contentId]) {
|
|
@@ -24343,11 +24343,11 @@ class AppTocHomeV2Component {
|
|
|
24343
24343
|
return false;
|
|
24344
24344
|
}
|
|
24345
24345
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: WidgetContentService }, { token: AppTocService }, { token: i2$1.LoggerService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.UtilityService }, { token: i5.ContentLanguageService }, { token: ActionService }, { token: ViewerUtilService }, { token: RatingService }, { token: i2$1.TelemetryService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.EventService }, { token: LoadCheckService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: TimerService }, { token: i2$1.WidgetEnrollService }, { token: i5.WidgetContentLibService }, { token: i2$1.DataTransferService }, { token: i6$2.MatSnackBar }, { token: i5.WidgetUserServiceLib }, { token: NetCoreService }, { token: AppTocV2Service }, { token: i2.Location }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24346
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n <div *ngIf=\"showBadgeIcon(baseContentReadData?.badgeDetails_v1)\" class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n </div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate", "fromMDO"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "baseContentReadData", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n <div *ngIf=\"showBadgeIcon(baseContentReadData?.badgeDetails_v1)\" class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n </div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate", "fromMDO"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "baseContentReadData", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24347
24347
|
}
|
|
24348
24348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, decorators: [{
|
|
24349
24349
|
type: Component,
|
|
24350
|
-
args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n <div *ngIf=\"showBadgeIcon(baseContentReadData?.badgeDetails_v1)\" class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n </div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"] }]
|
|
24350
|
+
args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n <div *ngIf=\"showBadgeIcon(baseContentReadData?.badgeDetails_v1)\" class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n </div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"] }]
|
|
24351
24351
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: WidgetContentService }, { type: AppTocService }, { type: i2$1.LoggerService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i7.MatLegacySnackBar }, { type: i1$3.MatLegacyDialog }, { type: MobileAppsService }, { type: i2$1.UtilityService }, { type: i5.ContentLanguageService }, { type: ActionService }, { type: ViewerUtilService }, { type: RatingService }, { type: i2$1.TelemetryService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.EventService }, { type: LoadCheckService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: TimerService }, { type: i2$1.WidgetEnrollService }, { type: i5.WidgetContentLibService }, { type: i2$1.DataTransferService }, { type: i6$2.MatSnackBar }, { type: i5.WidgetUserServiceLib }, { type: NetCoreService }, { type: AppTocV2Service }, { type: i2.Location }, { type: undefined, decorators: [{
|
|
24352
24352
|
type: Inject,
|
|
24353
24353
|
args: ['environment']
|