@sunbird-cb/toc 0.0.19 → 0.0.21
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-about/app-toc-about.component.mjs +3 -3
- package/esm2022/lib/_collection/_common/content-toc/app-toc-content/app-toc-content.component.mjs +45 -13
- package/esm2022/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.mjs +64 -9
- package/esm2022/lib/_collection/_common/content-toc/karma-points/karma-points.component.mjs +4 -1
- package/esm2022/lib/_collection/_common/toc-kpi-values/toc-kpi-values.component.mjs +3 -3
- package/esm2022/lib/_services/widget-content.model.mjs +8 -1
- package/esm2022/lib/components/app-toc-home-v2/app-toc-home-v2.component.mjs +67 -31
- package/esm2022/lib/routes/app-toc-home/app-toc-home.component.mjs +1 -1
- package/esm2022/lib/services/app-toc-v2.service.mjs +12 -5
- package/esm2022/lib/services/app-toc.service.mjs +5 -2
- package/fesm2022/sunbird-cb-toc.mjs +203 -60
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/lib/_collection/_common/content-toc/app-toc-content/app-toc-content.component.d.ts.map +1 -1
- package/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.d.ts +8 -1
- package/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.d.ts.map +1 -1
- package/lib/_collection/_common/content-toc/karma-points/karma-points.component.d.ts.map +1 -1
- package/lib/_services/widget-content.model.d.ts +6 -0
- package/lib/_services/widget-content.model.d.ts.map +1 -1
- package/lib/components/app-toc-home-v2/app-toc-home-v2.component.d.ts +2 -1
- package/lib/components/app-toc-home-v2/app-toc-home-v2.component.d.ts.map +1 -1
- package/lib/services/app-toc-v2.service.d.ts.map +1 -1
- package/lib/services/app-toc.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -456,6 +456,13 @@ var NsContent;
|
|
|
456
456
|
(function (EContextLockingType) {
|
|
457
457
|
EContextLockingType["COURSE_ASSESSMENT_ONLY"] = "Course Assessment Only";
|
|
458
458
|
})(EContextLockingType = NsContent.EContextLockingType || (NsContent.EContextLockingType = {}));
|
|
459
|
+
let EAssessmentContextCategory;
|
|
460
|
+
(function (EAssessmentContextCategory) {
|
|
461
|
+
EAssessmentContextCategory["PRELIMINARY_ASSESSMENT"] = "Preliminary Assessment";
|
|
462
|
+
EAssessmentContextCategory["FINAL_MILESTONE_ASSESSMENT"] = "Final Milestone Assessment";
|
|
463
|
+
EAssessmentContextCategory["FINAL_PROGRAM_ASSESSMENT"] = "Final Program Assessment";
|
|
464
|
+
EAssessmentContextCategory["PRE_ENROLMENT_ASSESSMENT"] = "Pre Enrolment Assessment";
|
|
465
|
+
})(EAssessmentContextCategory = NsContent.EAssessmentContextCategory || (NsContent.EAssessmentContextCategory = {}));
|
|
459
466
|
})(NsContent || (NsContent = {}));
|
|
460
467
|
|
|
461
468
|
var NsContentConstants;
|
|
@@ -1535,7 +1542,10 @@ class AppTocService {
|
|
|
1535
1542
|
// }
|
|
1536
1543
|
break;
|
|
1537
1544
|
case NsContent.EMimeTypes.PRACTICE_RESOURCE:
|
|
1538
|
-
if (content.
|
|
1545
|
+
if (content.contextCategory === NsContent.EAssessmentContextCategory.PRELIMINARY_ASSESSMENT) {
|
|
1546
|
+
tocStructure['preEnrollmentAssessment'] += 1;
|
|
1547
|
+
}
|
|
1548
|
+
else if (content.primaryCategory === this.primaryCategory.PRACTICE_RESOURCE) {
|
|
1539
1549
|
tocStructure.practiceTest += 1;
|
|
1540
1550
|
}
|
|
1541
1551
|
else if (content.primaryCategory === this.primaryCategory.FINAL_ASSESSMENT) {
|
|
@@ -3361,11 +3371,11 @@ class TocKpiValuesComponent {
|
|
|
3361
3371
|
ngOnInit() {
|
|
3362
3372
|
}
|
|
3363
3373
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TocKpiValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3364
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: { tocStructure: "tocStructure", content: "content", contentReadData: "contentReadData", isMobile: "isMobile", showInstructorLedMsg: "showInstructorLedMsg", baseContentReadData: "baseContentReadData", languageList: "languageList" }, ngImport: i0, template: "<div class=\"flex gap-2\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"content?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ content?.duration | pipeDurationTransform: 'hms' }}</div>\n </div>\n \n <ng-container *ngIf=\"content?.children?.length\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.course > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.course }} \n <span *ngIf=\"tocStructure?.course === 1\">{{ 'apptochome.course1' | translate }}</span>\n <span *ngIf=\"tocStructure?.course > 1\">{{ 'apptochome.courses1' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.learningModule > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"24px\" alt=\"module image\" />\n <div class=\"text-xs\" >{{ tocStructure?.learningModule }}\n <span *ngIf=\"tocStructure?.learningModule === 1\">{{ 'apptochome.module' | translate }}</span>\n <span *ngIf=\"tocStructure?.learningModule > 1\">{{ 'apptochome.modules' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.video > 0\">\n <img src=\"/assets/icons/toc/video.svg\" width=\"20px\" alt=\"video image\" />\n <div class=\"text-xs\" >{{ tocStructure?.video }} \n <span *ngIf=\"tocStructure?.video === 1\">{{ 'apptochome.video' | translate }}</span>\n <span *ngIf=\"tocStructure?.video > 1\">{{ 'apptochome.videos' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.offlineSession > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"20px\" alt=\"offline session image\" />\n <div class=\"text-xs\" >{{ tocStructure?.offlineSession }} \n <span *ngIf=\"tocStructure?.offlineSession === 1\">{{ 'apptochome.session' | translate }}</span>\n <span *ngIf=\"tocStructure?.offlineSession > 1\">{{ 'apptochome.sessions' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.pdf > 0\">\n <img src=\"/assets/icons/toc/pdf.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.pdf }} \n <span *ngIf=\"tocStructure?.pdf === 1\">{{ 'apptochome.pdf' | translate }}</span>\n <span *ngIf=\"tocStructure?.pdf > 1\">{{ 'apptochome.pdfs' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.podcast > 0\">\n <img src=\"/assets/icons/toc/audio.svg\" width=\"20px\" alt=\"podcast image\" />\n <div class=\"text-xs\" >{{ tocStructure?.podcast }} \n <span *ngIf=\"tocStructure?.podcast === 1\">{{ 'apptochome.audio' | translate }}</span>\n <span *ngIf=\"tocStructure?.podcast > 1\">{{ 'apptochome.audios' | translate }}</span> \n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.webPage > 0\">\n <img src=\"/assets/icons/toc/web.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\" >{{ tocStructure?.webPage }} \n <span *ngIf=\"tocStructure?.webPage === 1\">{{ 'apptochome.webPage' | translate }}</span>\n <span *ngIf=\"tocStructure?.webPage > 1\">{{ 'apptochome.webPages' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.interactivecontent > 0\">\n <img src=\"/assets/icons/toc/link.svg\" width=\"20px\" alt=\"interactive content image\" />\n <div class=\"text-xs\" >{{ tocStructure?.interactivecontent }}\n <span *ngIf=\"tocStructure?.interactivecontent === 1\">{{ 'apptochome.interactiveContent' | translate }}</span>\n <span *ngIf=\"tocStructure?.interactivecontent > 1\">{{ 'apptochome.interactiveContents' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.finalTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n <div class=\"text-xs\" >{{ tocStructure?.finalTest }} \n <span *ngIf=\"tocStructure?.finalTest === 1\">{{ 'apptochome.finalTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.finalTest > 1\">{{ 'apptochome.finalTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.practiceTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"practice test image\" />\n <div class=\"text-xs\" >{{ tocStructure?.practiceTest }} \n <span *ngIf=\"tocStructure?.practiceTest === 1\">{{ 'apptochome.practiceTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.practiceTest > 1\">{{ 'apptochome.practiceTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.other > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"other items image\" />\n <div class=\"text-xs\" >{{ tocStructure?.other }} \n <span *ngIf=\"tocStructure?.other === 1\">{{ 'apptochome.otherItem' | translate }}</span>\n <span *ngIf=\"tocStructure?.other > 1\">{{ 'apptochome.otherItems' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\">\n <img src=\"/assets/icons/toc/free.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" *ngIf=\"!contentReadData?.exclusiveContent\" >{{ 'apptochome.free' | translate }} </div>\n <div class=\"text-xs\" *ngIf=\"contentReadData?.exclusiveContent\" >{{ 'apptochome.paidContent' | translate }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"contentReadData?.learningMode\">\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\" src=\"/assets/icons/toc/self-learning.svg\" width=\"20px\" alt=\"free course image\" />\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\" src=\"/assets/icons/toc/instructor-led.svg\" width=\"20px\" alt=\"instructor led image\" />\n <div class=\"text-xs\" >\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\">{{ 'apptocsinglepage.instructorLed' | translate }}</span>\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\">{{ 'apptocsinglepage.selfLearning' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"baseContentReadData?.license || contentReadData?.license\">\n <img src=\"/assets/icons/toc/key.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" >{{ baseContentReadData?.license || contentReadData?.license }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-icon class=\"icon-img\">translate</mat-icon>\n <div class=\"text-xs\" >{{ languageList.length }} languages available </div>\n </div>\n </ng-container>\n</div>\n", styles: [".horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%}.horizontal-strip::-webkit-scrollbar{display:none}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values mat-icon{color:#000000de;height:20px}.horizontal-strip .kpi-values{min-width:72px;gap:4px}.horizontal-strip .kpi-values div{font-weight:700}.kpi-values img{height:24px;width:24px}.kpi-values .icon-img{height:24px;width:24px;color:#000000de}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: { tocStructure: "tocStructure", content: "content", contentReadData: "contentReadData", isMobile: "isMobile", showInstructorLedMsg: "showInstructorLedMsg", baseContentReadData: "baseContentReadData", languageList: "languageList" }, ngImport: i0, template: "<div class=\"flex gap-2\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"content?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ content?.duration | pipeDurationTransform: 'hms' }}</div>\n </div>\n \n <ng-container *ngIf=\"content?.children?.length\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.course > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.course }} \n <span *ngIf=\"tocStructure?.course === 1\">{{ 'apptochome.course1' | translate }}</span>\n <span *ngIf=\"tocStructure?.course > 1\">{{ 'apptochome.courses1' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.learningModule > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"24px\" alt=\"module image\" />\n <div class=\"text-xs\" >{{ tocStructure?.learningModule }}\n <span *ngIf=\"tocStructure?.learningModule === 1\">{{ 'apptochome.module' | translate }}</span>\n <span *ngIf=\"tocStructure?.learningModule > 1\">{{ 'apptochome.modules' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.video > 0\">\n <img src=\"/assets/icons/toc/video.svg\" width=\"20px\" alt=\"video image\" />\n <div class=\"text-xs\" >{{ tocStructure?.video }} \n <span *ngIf=\"tocStructure?.video === 1\">{{ 'apptochome.video' | translate }}</span>\n <span *ngIf=\"tocStructure?.video > 1\">{{ 'apptochome.videos' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.offlineSession > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"20px\" alt=\"offline session image\" />\n <div class=\"text-xs\" >{{ tocStructure?.offlineSession }} \n <span *ngIf=\"tocStructure?.offlineSession === 1\">{{ 'apptochome.session' | translate }}</span>\n <span *ngIf=\"tocStructure?.offlineSession > 1\">{{ 'apptochome.sessions' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.pdf > 0\">\n <img src=\"/assets/icons/toc/pdf.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.pdf }} \n <span *ngIf=\"tocStructure?.pdf === 1\">{{ 'apptochome.pdf' | translate }}</span>\n <span *ngIf=\"tocStructure?.pdf > 1\">{{ 'apptochome.pdfs' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.podcast > 0\">\n <img src=\"/assets/icons/toc/audio.svg\" width=\"20px\" alt=\"podcast image\" />\n <div class=\"text-xs\" >{{ tocStructure?.podcast }} \n <span *ngIf=\"tocStructure?.podcast === 1\">{{ 'apptochome.audio' | translate }}</span>\n <span *ngIf=\"tocStructure?.podcast > 1\">{{ 'apptochome.audios' | translate }}</span> \n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.webPage > 0\">\n <img src=\"/assets/icons/toc/web.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\" >{{ tocStructure?.webPage }} \n <span *ngIf=\"tocStructure?.webPage === 1\">{{ 'apptochome.webPage' | translate }}</span>\n <span *ngIf=\"tocStructure?.webPage > 1\">{{ 'apptochome.webPages' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.interactivecontent > 0\">\n <img src=\"/assets/icons/toc/link.svg\" width=\"20px\" alt=\"interactive content image\" />\n <div class=\"text-xs\" >{{ tocStructure?.interactivecontent }}\n <span *ngIf=\"tocStructure?.interactivecontent === 1\">{{ 'apptochome.interactiveContent' | translate }}</span>\n <span *ngIf=\"tocStructure?.interactivecontent > 1\">{{ 'apptochome.interactiveContents' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.preEnrollmentAssessment > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n <div class=\"text-xs\" >{{ tocStructure?.preEnrollmentAssessment }} \n <span *ngIf=\"tocStructure?.preEnrollmentAssessment === 1\">{{ 'apptochome.preEnrollmentAssessment' | translate }}</span>\n <span *ngIf=\"tocStructure?.preEnrollmentAssessment > 1\">{{ 'apptochome.preEnrollmentAssessments' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.finalTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n <div class=\"text-xs\" >{{ tocStructure?.finalTest }} \n <span *ngIf=\"tocStructure?.finalTest === 1\">{{ 'apptochome.finalTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.finalTest > 1\">{{ 'apptochome.finalTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.practiceTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"practice test image\" />\n <div class=\"text-xs\" >{{ tocStructure?.practiceTest }} \n <span *ngIf=\"tocStructure?.practiceTest === 1\">{{ 'apptochome.practiceTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.practiceTest > 1\">{{ 'apptochome.practiceTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.other > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"other items image\" />\n <div class=\"text-xs\" >{{ tocStructure?.other }} \n <span *ngIf=\"tocStructure?.other === 1\">{{ 'apptochome.otherItem' | translate }}</span>\n <span *ngIf=\"tocStructure?.other > 1\">{{ 'apptochome.otherItems' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\">\n <img src=\"/assets/icons/toc/free.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" *ngIf=\"!contentReadData?.exclusiveContent\" >{{ 'apptochome.free' | translate }} </div>\n <div class=\"text-xs\" *ngIf=\"contentReadData?.exclusiveContent\" >{{ 'apptochome.paidContent' | translate }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"contentReadData?.learningMode\">\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\" src=\"/assets/icons/toc/self-learning.svg\" width=\"20px\" alt=\"free course image\" />\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\" src=\"/assets/icons/toc/instructor-led.svg\" width=\"20px\" alt=\"instructor led image\" />\n <div class=\"text-xs\" >\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\">{{ 'apptocsinglepage.instructorLed' | translate }}</span>\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\">{{ 'apptocsinglepage.selfLearning' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"baseContentReadData?.license || contentReadData?.license\">\n <img src=\"/assets/icons/toc/key.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" >{{ baseContentReadData?.license || contentReadData?.license }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-icon class=\"icon-img\">translate</mat-icon>\n <div class=\"text-xs\" >{{ languageList.length }} languages available </div>\n </div>\n </ng-container>\n</div>\n", styles: [".horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%}.horizontal-strip::-webkit-scrollbar{display:none}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values mat-icon{color:#000000de;height:20px}.horizontal-strip .kpi-values{min-width:72px;gap:4px}.horizontal-strip .kpi-values div{font-weight:700}.kpi-values img{height:24px;width:24px}.kpi-values .icon-img{height:24px;width:24px;color:#000000de}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3365
3375
|
}
|
|
3366
3376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TocKpiValuesComponent, decorators: [{
|
|
3367
3377
|
type: Component,
|
|
3368
|
-
args: [{ selector: 'ws-widget-toc-kpi-values', template: "<div class=\"flex gap-2\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"content?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ content?.duration | pipeDurationTransform: 'hms' }}</div>\n </div>\n \n <ng-container *ngIf=\"content?.children?.length\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.course > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.course }} \n <span *ngIf=\"tocStructure?.course === 1\">{{ 'apptochome.course1' | translate }}</span>\n <span *ngIf=\"tocStructure?.course > 1\">{{ 'apptochome.courses1' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.learningModule > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"24px\" alt=\"module image\" />\n <div class=\"text-xs\" >{{ tocStructure?.learningModule }}\n <span *ngIf=\"tocStructure?.learningModule === 1\">{{ 'apptochome.module' | translate }}</span>\n <span *ngIf=\"tocStructure?.learningModule > 1\">{{ 'apptochome.modules' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.video > 0\">\n <img src=\"/assets/icons/toc/video.svg\" width=\"20px\" alt=\"video image\" />\n <div class=\"text-xs\" >{{ tocStructure?.video }} \n <span *ngIf=\"tocStructure?.video === 1\">{{ 'apptochome.video' | translate }}</span>\n <span *ngIf=\"tocStructure?.video > 1\">{{ 'apptochome.videos' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.offlineSession > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"20px\" alt=\"offline session image\" />\n <div class=\"text-xs\" >{{ tocStructure?.offlineSession }} \n <span *ngIf=\"tocStructure?.offlineSession === 1\">{{ 'apptochome.session' | translate }}</span>\n <span *ngIf=\"tocStructure?.offlineSession > 1\">{{ 'apptochome.sessions' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.pdf > 0\">\n <img src=\"/assets/icons/toc/pdf.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.pdf }} \n <span *ngIf=\"tocStructure?.pdf === 1\">{{ 'apptochome.pdf' | translate }}</span>\n <span *ngIf=\"tocStructure?.pdf > 1\">{{ 'apptochome.pdfs' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.podcast > 0\">\n <img src=\"/assets/icons/toc/audio.svg\" width=\"20px\" alt=\"podcast image\" />\n <div class=\"text-xs\" >{{ tocStructure?.podcast }} \n <span *ngIf=\"tocStructure?.podcast === 1\">{{ 'apptochome.audio' | translate }}</span>\n <span *ngIf=\"tocStructure?.podcast > 1\">{{ 'apptochome.audios' | translate }}</span> \n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.webPage > 0\">\n <img src=\"/assets/icons/toc/web.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\" >{{ tocStructure?.webPage }} \n <span *ngIf=\"tocStructure?.webPage === 1\">{{ 'apptochome.webPage' | translate }}</span>\n <span *ngIf=\"tocStructure?.webPage > 1\">{{ 'apptochome.webPages' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.interactivecontent > 0\">\n <img src=\"/assets/icons/toc/link.svg\" width=\"20px\" alt=\"interactive content image\" />\n <div class=\"text-xs\" >{{ tocStructure?.interactivecontent }}\n <span *ngIf=\"tocStructure?.interactivecontent === 1\">{{ 'apptochome.interactiveContent' | translate }}</span>\n <span *ngIf=\"tocStructure?.interactivecontent > 1\">{{ 'apptochome.interactiveContents' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.finalTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n <div class=\"text-xs\" >{{ tocStructure?.finalTest }} \n <span *ngIf=\"tocStructure?.finalTest === 1\">{{ 'apptochome.finalTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.finalTest > 1\">{{ 'apptochome.finalTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.practiceTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"practice test image\" />\n <div class=\"text-xs\" >{{ tocStructure?.practiceTest }} \n <span *ngIf=\"tocStructure?.practiceTest === 1\">{{ 'apptochome.practiceTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.practiceTest > 1\">{{ 'apptochome.practiceTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.other > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"other items image\" />\n <div class=\"text-xs\" >{{ tocStructure?.other }} \n <span *ngIf=\"tocStructure?.other === 1\">{{ 'apptochome.otherItem' | translate }}</span>\n <span *ngIf=\"tocStructure?.other > 1\">{{ 'apptochome.otherItems' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\">\n <img src=\"/assets/icons/toc/free.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" *ngIf=\"!contentReadData?.exclusiveContent\" >{{ 'apptochome.free' | translate }} </div>\n <div class=\"text-xs\" *ngIf=\"contentReadData?.exclusiveContent\" >{{ 'apptochome.paidContent' | translate }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"contentReadData?.learningMode\">\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\" src=\"/assets/icons/toc/self-learning.svg\" width=\"20px\" alt=\"free course image\" />\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\" src=\"/assets/icons/toc/instructor-led.svg\" width=\"20px\" alt=\"instructor led image\" />\n <div class=\"text-xs\" >\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\">{{ 'apptocsinglepage.instructorLed' | translate }}</span>\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\">{{ 'apptocsinglepage.selfLearning' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"baseContentReadData?.license || contentReadData?.license\">\n <img src=\"/assets/icons/toc/key.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" >{{ baseContentReadData?.license || contentReadData?.license }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-icon class=\"icon-img\">translate</mat-icon>\n <div class=\"text-xs\" >{{ languageList.length }} languages available </div>\n </div>\n </ng-container>\n</div>\n", styles: [".horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%}.horizontal-strip::-webkit-scrollbar{display:none}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values mat-icon{color:#000000de;height:20px}.horizontal-strip .kpi-values{min-width:72px;gap:4px}.horizontal-strip .kpi-values div{font-weight:700}.kpi-values img{height:24px;width:24px}.kpi-values .icon-img{height:24px;width:24px;color:#000000de}\n"] }]
|
|
3378
|
+
args: [{ selector: 'ws-widget-toc-kpi-values', template: "<div class=\"flex gap-2\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"content?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ content?.duration | pipeDurationTransform: 'hms' }}</div>\n </div>\n \n <ng-container *ngIf=\"content?.children?.length\">\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.course > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.course }} \n <span *ngIf=\"tocStructure?.course === 1\">{{ 'apptochome.course1' | translate }}</span>\n <span *ngIf=\"tocStructure?.course > 1\">{{ 'apptochome.courses1' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.learningModule > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"24px\" alt=\"module image\" />\n <div class=\"text-xs\" >{{ tocStructure?.learningModule }}\n <span *ngIf=\"tocStructure?.learningModule === 1\">{{ 'apptochome.module' | translate }}</span>\n <span *ngIf=\"tocStructure?.learningModule > 1\">{{ 'apptochome.modules' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.video > 0\">\n <img src=\"/assets/icons/toc/video.svg\" width=\"20px\" alt=\"video image\" />\n <div class=\"text-xs\" >{{ tocStructure?.video }} \n <span *ngIf=\"tocStructure?.video === 1\">{{ 'apptochome.video' | translate }}</span>\n <span *ngIf=\"tocStructure?.video > 1\">{{ 'apptochome.videos' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.offlineSession > 0\">\n <img src=\"/assets/icons/toc/module.svg\" width=\"20px\" alt=\"offline session image\" />\n <div class=\"text-xs\" >{{ tocStructure?.offlineSession }} \n <span *ngIf=\"tocStructure?.offlineSession === 1\">{{ 'apptochome.session' | translate }}</span>\n <span *ngIf=\"tocStructure?.offlineSession > 1\">{{ 'apptochome.sessions' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.pdf > 0\">\n <img src=\"/assets/icons/toc/pdf.svg\" width=\"20px\" alt=\"pdf image\" />\n <div class=\"text-xs\" >{{ tocStructure?.pdf }} \n <span *ngIf=\"tocStructure?.pdf === 1\">{{ 'apptochome.pdf' | translate }}</span>\n <span *ngIf=\"tocStructure?.pdf > 1\">{{ 'apptochome.pdfs' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.podcast > 0\">\n <img src=\"/assets/icons/toc/audio.svg\" width=\"20px\" alt=\"podcast image\" />\n <div class=\"text-xs\" >{{ tocStructure?.podcast }} \n <span *ngIf=\"tocStructure?.podcast === 1\">{{ 'apptochome.audio' | translate }}</span>\n <span *ngIf=\"tocStructure?.podcast > 1\">{{ 'apptochome.audios' | translate }}</span> \n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.webPage > 0\">\n <img src=\"/assets/icons/toc/web.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\" >{{ tocStructure?.webPage }} \n <span *ngIf=\"tocStructure?.webPage === 1\">{{ 'apptochome.webPage' | translate }}</span>\n <span *ngIf=\"tocStructure?.webPage > 1\">{{ 'apptochome.webPages' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.interactivecontent > 0\">\n <img src=\"/assets/icons/toc/link.svg\" width=\"20px\" alt=\"interactive content image\" />\n <div class=\"text-xs\" >{{ tocStructure?.interactivecontent }}\n <span *ngIf=\"tocStructure?.interactivecontent === 1\">{{ 'apptochome.interactiveContent' | translate }}</span>\n <span *ngIf=\"tocStructure?.interactivecontent > 1\">{{ 'apptochome.interactiveContents' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.preEnrollmentAssessment > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n <div class=\"text-xs\" >{{ tocStructure?.preEnrollmentAssessment }} \n <span *ngIf=\"tocStructure?.preEnrollmentAssessment === 1\">{{ 'apptochome.preEnrollmentAssessment' | translate }}</span>\n <span *ngIf=\"tocStructure?.preEnrollmentAssessment > 1\">{{ 'apptochome.preEnrollmentAssessments' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.finalTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n <div class=\"text-xs\" >{{ tocStructure?.finalTest }} \n <span *ngIf=\"tocStructure?.finalTest === 1\">{{ 'apptochome.finalTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.finalTest > 1\">{{ 'apptochome.finalTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.practiceTest > 0\">\n <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"practice test image\" />\n <div class=\"text-xs\" >{{ tocStructure?.practiceTest }} \n <span *ngIf=\"tocStructure?.practiceTest === 1\">{{ 'apptochome.practiceTest' | translate }}</span>\n <span *ngIf=\"tocStructure?.practiceTest > 1\">{{ 'apptochome.practiceTests' | translate }}</span>\n </div>\n </div>\n \n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.other > 0\">\n <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"other items image\" />\n <div class=\"text-xs\" >{{ tocStructure?.other }} \n <span *ngIf=\"tocStructure?.other === 1\">{{ 'apptochome.otherItem' | translate }}</span>\n <span *ngIf=\"tocStructure?.other > 1\">{{ 'apptochome.otherItems' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\">\n <img src=\"/assets/icons/toc/free.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" *ngIf=\"!contentReadData?.exclusiveContent\" >{{ 'apptochome.free' | translate }} </div>\n <div class=\"text-xs\" *ngIf=\"contentReadData?.exclusiveContent\" >{{ 'apptochome.paidContent' | translate }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"contentReadData?.learningMode\">\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\" src=\"/assets/icons/toc/self-learning.svg\" width=\"20px\" alt=\"free course image\" />\n <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\" src=\"/assets/icons/toc/instructor-led.svg\" width=\"20px\" alt=\"instructor led image\" />\n <div class=\"text-xs\" >\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\">{{ 'apptocsinglepage.instructorLed' | translate }}</span>\n <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\">{{ 'apptocsinglepage.selfLearning' | translate }}</span>\n </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"baseContentReadData?.license || contentReadData?.license\">\n <img src=\"/assets/icons/toc/key.svg\" width=\"20px\" alt=\"free course image\" />\n <div class=\"text-xs\" >{{ baseContentReadData?.license || contentReadData?.license }} </div>\n </div>\n\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-icon class=\"icon-img\">translate</mat-icon>\n <div class=\"text-xs\" >{{ languageList.length }} languages available </div>\n </div>\n </ng-container>\n</div>\n", styles: [".horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%}.horizontal-strip::-webkit-scrollbar{display:none}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values mat-icon{color:#000000de;height:20px}.horizontal-strip .kpi-values{min-width:72px;gap:4px}.horizontal-strip .kpi-values div{font-weight:700}.kpi-values img{height:24px;width:24px}.kpi-values .icon-img{height:24px;width:24px;color:#000000de}\n"] }]
|
|
3369
3379
|
}], ctorParameters: function () { return []; }, propDecorators: { tocStructure: [{
|
|
3370
3380
|
type: Input
|
|
3371
3381
|
}], content: [{
|
|
@@ -3842,6 +3852,9 @@ class KarmaPointsComponent {
|
|
|
3842
3852
|
if (!this.condition.isAcbpClaim && !this.condition.monthlyCapExceed) {
|
|
3843
3853
|
this.getKPData('Resume');
|
|
3844
3854
|
}
|
|
3855
|
+
else if (this.content.courseCategory === 'Learning Pathway') {
|
|
3856
|
+
this.getKPData('Resume');
|
|
3857
|
+
}
|
|
3845
3858
|
}
|
|
3846
3859
|
}
|
|
3847
3860
|
if (this.condition && !this.condition.isPostAssessment
|
|
@@ -6200,11 +6213,11 @@ class AppTocAboutComponent {
|
|
|
6200
6213
|
}
|
|
6201
6214
|
}
|
|
6202
6215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, deps: [{ token: RatingService }, { token: i2$1.LoggerService }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }, { token: LoadCheckService }, { token: TimerService }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: DiscussUtilsService }, { token: i1$1.Router }, { token: ReviewComponentDataService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: i2$1.WidgetContentService }, { token: i1$1.ActivatedRoute }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </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\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\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\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\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\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 </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\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.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator 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]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.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}.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}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
|
|
6216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </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\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\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\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\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\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 </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\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.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator 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]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.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}.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}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
|
|
6204
6217
|
}
|
|
6205
6218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, decorators: [{
|
|
6206
6219
|
type: Component,
|
|
6207
|
-
args: [{ selector: 'ws-widget-app-toc-about', template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </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\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\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\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\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\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 </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\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.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator 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]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.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}.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}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"] }]
|
|
6220
|
+
args: [{ selector: 'ws-widget-app-toc-about', template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </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\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\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\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\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\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 </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\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.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator 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]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.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}.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}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"] }]
|
|
6208
6221
|
}], ctorParameters: function () { return [{ type: RatingService }, { type: i2$1.LoggerService }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }, { type: LoadCheckService }, { type: TimerService }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: DiscussUtilsService }, { type: i1$1.Router }, { type: ReviewComponentDataService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: i2$1.WidgetContentService }, { type: i1$1.ActivatedRoute }, { type: undefined, decorators: [{
|
|
6209
6222
|
type: Inject,
|
|
6210
6223
|
args: ['environment']
|
|
@@ -7153,6 +7166,64 @@ class AppTocContentCardV2Component {
|
|
|
7153
7166
|
// const item = this.updateChildParentMap(identifier)
|
|
7154
7167
|
return this.hierarchyMapData && this.hierarchyMapData[identifier] && this.hierarchyMapData[identifier].completionStatus;
|
|
7155
7168
|
}
|
|
7169
|
+
/**
|
|
7170
|
+
* Check if milestone is complete based on mandatory content and assessment completion
|
|
7171
|
+
* Returns true only when:
|
|
7172
|
+
* 1. All mandatory content is completed (or no mandatory content exists)
|
|
7173
|
+
* 2. Milestone assessment is completed (or no assessment exists)
|
|
7174
|
+
*/
|
|
7175
|
+
isMilestoneComplete(identifier) {
|
|
7176
|
+
if (!this.hierarchyMapData) {
|
|
7177
|
+
return false;
|
|
7178
|
+
}
|
|
7179
|
+
const milestoneData = this.hierarchyMapData[identifier];
|
|
7180
|
+
if (!milestoneData) {
|
|
7181
|
+
return false;
|
|
7182
|
+
}
|
|
7183
|
+
// Check if all mandatory content AND milestone assessment are completed
|
|
7184
|
+
let hasMandatoryContent = false;
|
|
7185
|
+
let allMandatoryComplete = true;
|
|
7186
|
+
let hasMilestoneAssessment = false;
|
|
7187
|
+
let milestoneAssessmentComplete = false;
|
|
7188
|
+
// Check all direct children of the milestone
|
|
7189
|
+
for (const key of Object.keys(this.hierarchyMapData)) {
|
|
7190
|
+
const item = this.hierarchyMapData[key];
|
|
7191
|
+
// Only check direct children
|
|
7192
|
+
if (item.parent !== identifier)
|
|
7193
|
+
continue;
|
|
7194
|
+
// Check if this is the milestone assessment
|
|
7195
|
+
const isAssessment = item.primaryCategory === 'Course Assessment' ||
|
|
7196
|
+
item.primaryCategory === 'Final Assessment' ||
|
|
7197
|
+
item.primaryCategory === 'Standalone Assessment';
|
|
7198
|
+
if (isAssessment) {
|
|
7199
|
+
hasMilestoneAssessment = true;
|
|
7200
|
+
const isCompleted = item.completionStatus === 2 || item.status === 2 ||
|
|
7201
|
+
item.completionPercentage >= 100 || item.progress >= 100;
|
|
7202
|
+
if (isCompleted) {
|
|
7203
|
+
milestoneAssessmentComplete = true;
|
|
7204
|
+
}
|
|
7205
|
+
continue; // Skip to next item
|
|
7206
|
+
}
|
|
7207
|
+
// Check if this is mandatory content (courses/collections)
|
|
7208
|
+
if (item.primaryCategory === 'Course' || item.isCollection) {
|
|
7209
|
+
const isMandatory = item.isMandatory !== false; // Default is mandatory
|
|
7210
|
+
if (isMandatory) {
|
|
7211
|
+
hasMandatoryContent = true;
|
|
7212
|
+
const isCompleted = item.completionStatus === 2 || item.status === 2 ||
|
|
7213
|
+
item.completionPercentage >= 100 || item.progress >= 100;
|
|
7214
|
+
if (!isCompleted) {
|
|
7215
|
+
allMandatoryComplete = false;
|
|
7216
|
+
}
|
|
7217
|
+
}
|
|
7218
|
+
}
|
|
7219
|
+
}
|
|
7220
|
+
// Milestone is complete when:
|
|
7221
|
+
// 1. All mandatory content is completed (or no mandatory content exists)
|
|
7222
|
+
// 2. Milestone assessment is completed (or no assessment exists)
|
|
7223
|
+
const mandatoryCheck = !hasMandatoryContent || allMandatoryComplete;
|
|
7224
|
+
const assessmentCheck = !hasMilestoneAssessment || milestoneAssessmentComplete;
|
|
7225
|
+
return mandatoryCheck && assessmentCheck;
|
|
7226
|
+
}
|
|
7156
7227
|
openCertificateDialog(certData) {
|
|
7157
7228
|
const cet = certData;
|
|
7158
7229
|
this.dialog.open(CertificateDialogComponent, {
|
|
@@ -7488,7 +7559,7 @@ class AppTocContentCardV2Component {
|
|
|
7488
7559
|
/**
|
|
7489
7560
|
* View milestone achievement - calls the achievement API and shows the result
|
|
7490
7561
|
*/
|
|
7491
|
-
viewMilestoneAchievement(event) {
|
|
7562
|
+
viewMilestoneAchievement(event, mileStoneData) {
|
|
7492
7563
|
if (event) {
|
|
7493
7564
|
event.preventDefault();
|
|
7494
7565
|
event.stopPropagation();
|
|
@@ -7507,10 +7578,7 @@ class AppTocContentCardV2Component {
|
|
|
7507
7578
|
let milestoneId = 'm' + (this.index - 1); // index is typically 1-based, milestones are 0-based
|
|
7508
7579
|
// If content name contains milestone number, extract it
|
|
7509
7580
|
if (this.content.name) {
|
|
7510
|
-
|
|
7511
|
-
if (match) {
|
|
7512
|
-
milestoneId = 'm' + match[1];
|
|
7513
|
-
}
|
|
7581
|
+
milestoneId = mileStoneData?.identifier;
|
|
7514
7582
|
}
|
|
7515
7583
|
const courseId = this.baseContentReadData?.identifier || this.rootId;
|
|
7516
7584
|
this.achievementLoading = true;
|
|
@@ -7525,7 +7593,7 @@ class AppTocContentCardV2Component {
|
|
|
7525
7593
|
width: '1300px',
|
|
7526
7594
|
data: {
|
|
7527
7595
|
cet: response.result.printUri || response.result.svgData,
|
|
7528
|
-
certId: response
|
|
7596
|
+
certId: response?.result?.identifier || milestoneId,
|
|
7529
7597
|
isAchievement: true
|
|
7530
7598
|
},
|
|
7531
7599
|
});
|
|
@@ -7565,7 +7633,7 @@ class AppTocContentCardV2Component {
|
|
|
7565
7633
|
return element.scrollHeight > element.clientHeight;
|
|
7566
7634
|
}
|
|
7567
7635
|
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 }); }
|
|
7568
|
-
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 for completed milestones - Always visible when completed -->\n <ng-container *ngIf=\"getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2\">\n <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event)\">\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\">\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: [
|
|
7636
|
+
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: [
|
|
7569
7637
|
trigger('panelInOut', [
|
|
7570
7638
|
transition('void => *', [
|
|
7571
7639
|
style({ transform: 'translateY(-10%)', opacity: '0' }),
|
|
@@ -7589,7 +7657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7589
7657
|
animate(200, style({ transform: 'translateY(-10%)', opacity: '0' }))
|
|
7590
7658
|
])
|
|
7591
7659
|
])
|
|
7592
|
-
], 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 for completed milestones - Always visible when completed -->\n <ng-container *ngIf=\"getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2\">\n <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event)\">\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\">\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"] }]
|
|
7660
|
+
], 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"] }]
|
|
7593
7661
|
}], 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: [{
|
|
7594
7662
|
type: Input
|
|
7595
7663
|
}], expandAll: [{
|
|
@@ -8019,20 +8087,52 @@ class AppTocContentComponent {
|
|
|
8019
8087
|
if (milestoneData && milestoneData?.primaryCategory === NsContent$1.EPrimaryCategory.FINAL_ASSESSMENT) {
|
|
8020
8088
|
return milestoneData?.completionStatus === 2;
|
|
8021
8089
|
}
|
|
8022
|
-
if (!milestoneData
|
|
8090
|
+
if (!milestoneData) {
|
|
8023
8091
|
return false;
|
|
8024
8092
|
}
|
|
8025
|
-
|
|
8026
|
-
|
|
8027
|
-
|
|
8028
|
-
|
|
8029
|
-
|
|
8093
|
+
// Check if all mandatory content AND milestone assessment are completed
|
|
8094
|
+
let hasMandatoryContent = false;
|
|
8095
|
+
let allMandatoryComplete = true;
|
|
8096
|
+
let hasMilestoneAssessment = false;
|
|
8097
|
+
let milestoneAssessmentComplete = false;
|
|
8098
|
+
// Check all direct children of the milestone
|
|
8099
|
+
for (const key of Object.keys(this.hierarchyMapData)) {
|
|
8100
|
+
const item = this.hierarchyMapData[key];
|
|
8101
|
+
// Only check direct children
|
|
8102
|
+
if (item.parent !== identifier)
|
|
8103
|
+
continue;
|
|
8104
|
+
// Check if this is the milestone assessment
|
|
8105
|
+
const isAssessment = item.primaryCategory === 'Course Assessment' ||
|
|
8106
|
+
item.primaryCategory === 'Final Assessment' ||
|
|
8107
|
+
item.primaryCategory === 'Standalone Assessment';
|
|
8108
|
+
if (isAssessment) {
|
|
8109
|
+
hasMilestoneAssessment = true;
|
|
8110
|
+
const isCompleted = item.completionStatus === 2 || item.status === 2 ||
|
|
8111
|
+
item.completionPercentage >= 100 || item.progress >= 100;
|
|
8112
|
+
if (isCompleted) {
|
|
8113
|
+
milestoneAssessmentComplete = true;
|
|
8114
|
+
}
|
|
8115
|
+
continue; // Skip to next item
|
|
8116
|
+
}
|
|
8117
|
+
// Check if this is mandatory content (courses/collections)
|
|
8118
|
+
if (item.primaryCategory === 'Course' || item.isCollection) {
|
|
8119
|
+
const isMandatory = item.isMandatory !== false; // Default is mandatory
|
|
8120
|
+
if (isMandatory) {
|
|
8121
|
+
hasMandatoryContent = true;
|
|
8122
|
+
const isCompleted = item.completionStatus === 2 || item.status === 2 ||
|
|
8123
|
+
item.completionPercentage >= 100 || item.progress >= 100;
|
|
8124
|
+
if (!isCompleted) {
|
|
8125
|
+
allMandatoryComplete = false;
|
|
8126
|
+
}
|
|
8127
|
+
}
|
|
8030
8128
|
}
|
|
8031
|
-
});
|
|
8032
|
-
if (completedCount === milestoneData?.leafNodes.length) {
|
|
8033
|
-
return true;
|
|
8034
8129
|
}
|
|
8035
|
-
|
|
8130
|
+
// Milestone is complete when:
|
|
8131
|
+
// 1. All mandatory content is completed (or no mandatory content exists)
|
|
8132
|
+
// 2. Milestone assessment is completed (or no assessment exists)
|
|
8133
|
+
const mandatoryCheck = !hasMandatoryContent || allMandatoryComplete;
|
|
8134
|
+
const assessmentCheck = !hasMilestoneAssessment || milestoneAssessmentComplete;
|
|
8135
|
+
return mandatoryCheck && assessmentCheck;
|
|
8036
8136
|
}
|
|
8037
8137
|
/**
|
|
8038
8138
|
* Check if multi-line text is truncated (has ellipsis)
|
|
@@ -8045,11 +8145,11 @@ class AppTocContentComponent {
|
|
|
8045
8145
|
return element.scrollHeight > element.clientHeight;
|
|
8046
8146
|
}
|
|
8047
8147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">\n <p class=\"mb-0 leading-none\">\n <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n </p>\n <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ m?.name }}\n </p>\n </div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [sbUiResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::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: 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: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
|
|
8148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 && !getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">\n <p class=\"mb-0 leading-none\">\n <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n </p>\n <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ m?.name }}\n </p>\n </div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [sbUiResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::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: 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: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
|
|
8049
8149
|
}
|
|
8050
8150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, decorators: [{
|
|
8051
8151
|
type: Component,
|
|
8052
|
-
args: [{ selector: 'ws-widget-app-toc-content', template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">\n <p class=\"mb-0 leading-none\">\n <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n </p>\n <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ m?.name }}\n </p>\n </div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [sbUiResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
|
|
8152
|
+
args: [{ selector: 'ws-widget-app-toc-content', template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 && !getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">\n <p class=\"mb-0 leading-none\">\n <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n </p>\n <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ m?.name }}\n </p>\n </div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [sbUiResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
|
|
8053
8153
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: AppTocService }, { type: i2$1.ConfigurationsService }]; }, propDecorators: { batchId: [{
|
|
8054
8154
|
type: Input
|
|
8055
8155
|
}], content: [{
|
|
@@ -15871,6 +15971,7 @@ class AppTocV2Service {
|
|
|
15871
15971
|
if (contentHeirarchyData && contentHeirarchyData.children) {
|
|
15872
15972
|
let totalLeafNodes = 0;
|
|
15873
15973
|
let totalCompletedLeafNodes = 0;
|
|
15974
|
+
let LPenrollment = this.findEnrollment(enrollmentListData, contentHeirarchyData?.identifier);
|
|
15874
15975
|
// First pass: Update progress for all content
|
|
15875
15976
|
contentHeirarchyData.children.forEach((child) => {
|
|
15876
15977
|
if (child.primaryCategory === 'Milestone') {
|
|
@@ -15891,10 +15992,16 @@ class AppTocV2Service {
|
|
|
15891
15992
|
totalCompletedLeafNodes += isCompleted ? (child.leafNodesCount || 1) : 0;
|
|
15892
15993
|
}
|
|
15893
15994
|
});
|
|
15894
|
-
if (
|
|
15895
|
-
|
|
15896
|
-
contentHeirarchyData.
|
|
15897
|
-
|
|
15995
|
+
if (LPenrollment && LPenrollment.completionPercentage === 100) {
|
|
15996
|
+
contentHeirarchyData.completionPercentage = 100;
|
|
15997
|
+
contentHeirarchyData.completionStatus = 2;
|
|
15998
|
+
}
|
|
15999
|
+
else {
|
|
16000
|
+
if (totalLeafNodes > 0) {
|
|
16001
|
+
const calculatedPercentage = Math.round((Number(totalCompletedLeafNodes) / Number(totalLeafNodes)) * 100);
|
|
16002
|
+
contentHeirarchyData.completionPercentage = isNaN(calculatedPercentage) ? 0 : calculatedPercentage;
|
|
16003
|
+
contentHeirarchyData.completionStatus = Number(contentHeirarchyData.completionPercentage === 100 ? 2 : (contentHeirarchyData.completionPercentage > 0 ? 1 : 0));
|
|
16004
|
+
}
|
|
15898
16005
|
}
|
|
15899
16006
|
// NOTE: Milestone locking is computed AFTER hashmap is built
|
|
15900
16007
|
// See app-toc-home-v2.component.ts -> fetchContentHierarchy() flow:
|
|
@@ -19878,6 +19985,7 @@ class AppTocHomeV2Component {
|
|
|
19878
19985
|
this.sticky = false;
|
|
19879
19986
|
this.isInIframe = false;
|
|
19880
19987
|
this.forPreview = window.location.href.includes('/public/') || window.location.href.includes('/author/');
|
|
19988
|
+
this.displayViewBtn = true;
|
|
19881
19989
|
// forPreview = window.location.href.includes('/author/')
|
|
19882
19990
|
this.analytics = this.route.snapshot.data?.pageData?.data?.analytics;
|
|
19883
19991
|
this.errorWidgetData = {
|
|
@@ -20408,13 +20516,17 @@ class AppTocHomeV2Component {
|
|
|
20408
20516
|
this.navigateToPlayerPage(batchId);
|
|
20409
20517
|
this.enrollBtnLoading = false;
|
|
20410
20518
|
}
|
|
20411
|
-
}, () => {
|
|
20412
|
-
|
|
20519
|
+
}, (err) => {
|
|
20520
|
+
let errMsg = err?.error?.params?.errmsg || err?.params?.errmsg || 'Something went wrong';
|
|
20521
|
+
if (errMsg?.includes('course.') && this.content?.courseCategory) {
|
|
20522
|
+
errMsg = errMsg.replace('course.', this.content?.courseCategory) + '.';
|
|
20523
|
+
}
|
|
20524
|
+
this.snackBar.open(errMsg);
|
|
20413
20525
|
this.enrollBtnLoading = false;
|
|
20414
20526
|
});
|
|
20415
20527
|
}
|
|
20416
20528
|
else {
|
|
20417
|
-
this.snackBar.open('No
|
|
20529
|
+
this.snackBar.open('No batches found');
|
|
20418
20530
|
this.enrollBtnLoading = false;
|
|
20419
20531
|
}
|
|
20420
20532
|
}
|
|
@@ -21113,15 +21225,17 @@ class AppTocHomeV2Component {
|
|
|
21113
21225
|
// this.tocSvc.contentLoader.next(false)
|
|
21114
21226
|
}
|
|
21115
21227
|
else {
|
|
21116
|
-
|
|
21117
|
-
|
|
21118
|
-
|
|
21228
|
+
if (this.contentReadData && this.contentReadData.courseCategory !== NsContent.ECourseCategory.LEARNING_PATHWAY) {
|
|
21229
|
+
let contentLag = this.contentLangSvc.getContentLanguage(this.contentReadData);
|
|
21230
|
+
this.getContinueLearningData(this.baseContentReadData.identifier, enrolledCourse.batchId, contentLag);
|
|
21231
|
+
this.content['completionPercentage'] = enrolledCourse.completionPercentage;
|
|
21232
|
+
this.tocSvc.mapModuleCount(this.content);
|
|
21233
|
+
}
|
|
21119
21234
|
this.enrollBtnLoading = false;
|
|
21120
|
-
this.tocSvc.mapModuleCount(this.content);
|
|
21121
21235
|
// this.tocSvc.contentLoader.next(false)
|
|
21122
21236
|
}
|
|
21123
21237
|
}
|
|
21124
|
-
if (this.baseContentReadData?.courseCategory ===
|
|
21238
|
+
if (this.baseContentReadData?.courseCategory === NsContent.ECourseCategory.LEARNING_PATHWAY) {
|
|
21125
21239
|
this.tocSvc.callHirarchyProgressHashmap(this.content);
|
|
21126
21240
|
this.tocSvc.computeMilestoneLockingStatus(true);
|
|
21127
21241
|
this.syncMilestoneLockStatus();
|
|
@@ -21482,6 +21596,7 @@ class AppTocHomeV2Component {
|
|
|
21482
21596
|
youtube: 0,
|
|
21483
21597
|
interactivecontent: 0,
|
|
21484
21598
|
offlineSession: 0,
|
|
21599
|
+
preEnrollmentAssessment: 0,
|
|
21485
21600
|
};
|
|
21486
21601
|
}
|
|
21487
21602
|
setupBatchControlSubscription() {
|
|
@@ -21587,11 +21702,16 @@ class AppTocHomeV2Component {
|
|
|
21587
21702
|
this.baseContentReadData = initData.content;
|
|
21588
21703
|
// Fetch the multilingual content
|
|
21589
21704
|
try {
|
|
21590
|
-
|
|
21591
|
-
if (!success) {
|
|
21592
|
-
// If multilingual content fetch fails, fall back to the original content
|
|
21705
|
+
if (this.baseContentReadData.identifier === queryParamsDataTemp.MLId) {
|
|
21593
21706
|
this.contentReadData = initData.content;
|
|
21594
|
-
|
|
21707
|
+
}
|
|
21708
|
+
else {
|
|
21709
|
+
const success = await this.fetchContentRead(queryParamsDataTemp.MLId);
|
|
21710
|
+
if (!success) {
|
|
21711
|
+
// If multilingual content fetch fails, fall back to the original content
|
|
21712
|
+
this.contentReadData = initData.content;
|
|
21713
|
+
this.loggerSvc.warn('Failed to load multilingual content, using original content instead');
|
|
21714
|
+
}
|
|
21595
21715
|
}
|
|
21596
21716
|
}
|
|
21597
21717
|
catch (error) {
|
|
@@ -21727,7 +21847,21 @@ class AppTocHomeV2Component {
|
|
|
21727
21847
|
this.tocSvc.subtitleOnBanners = data?.pageData?.data?.subtitleOnBanners || false;
|
|
21728
21848
|
this.tocSvc.showDescription = data?.pageData?.data?.showDescription || false;
|
|
21729
21849
|
this.tocConfig = data?.pageData?.data || {};
|
|
21730
|
-
this.
|
|
21850
|
+
if (this.contentReadData?.courseCategory === NsContent.ECourseCategory.LEARNING_PATHWAY) {
|
|
21851
|
+
this.kparray = this.tocConfig.karmaPointsLP || [
|
|
21852
|
+
{
|
|
21853
|
+
"displayButton": "Resume",
|
|
21854
|
+
"textBeforeIcon": "earn",
|
|
21855
|
+
"points": "25",
|
|
21856
|
+
"textAfterPoints": "karmaPoints",
|
|
21857
|
+
"textAfterIcon": "byCompletingLP",
|
|
21858
|
+
"toolTipText": "lpCompleteTip"
|
|
21859
|
+
}
|
|
21860
|
+
];
|
|
21861
|
+
}
|
|
21862
|
+
else {
|
|
21863
|
+
this.kparray = this.tocConfig.karmaPoints || [];
|
|
21864
|
+
}
|
|
21731
21865
|
}
|
|
21732
21866
|
fetchPostAssessmentStatusIfNeeded() {
|
|
21733
21867
|
if (this.content && this.isPostAssessment) {
|
|
@@ -21824,20 +21958,26 @@ class AppTocHomeV2Component {
|
|
|
21824
21958
|
this.contentViewEventForNetCore('complete');
|
|
21825
21959
|
}
|
|
21826
21960
|
this.dataTransferSvc.setEnrollData(this.userEnrollmentList);
|
|
21827
|
-
|
|
21828
|
-
|
|
21829
|
-
|
|
21830
|
-
|
|
21831
|
-
|
|
21832
|
-
|
|
21833
|
-
|
|
21834
|
-
|
|
21835
|
-
|
|
21836
|
-
|
|
21837
|
-
|
|
21961
|
+
if (this.isMultilingual) {
|
|
21962
|
+
// in case of back from player we need to check recent language and load
|
|
21963
|
+
if (!this.contentLibSvc?.oneStepResumeEnable && this.baseContentReadData?.identifier === this.contentReadData?.identifier) {
|
|
21964
|
+
let lang = this.baseContentReadData?.language?.length ? this.baseContentReadData?.language[0] : '';
|
|
21965
|
+
let baseContentFromEnrollData = this.userEnrollmentList.find((el) => el.collectionId === this.baseContentReadData?.identifier);
|
|
21966
|
+
if (lang && baseContentFromEnrollData && baseContentFromEnrollData?.recent_language?.toLowerCase() !== lang) {
|
|
21967
|
+
let localLang = this.contentLangSvc.getRequiredLanguageDetails(this.baseContentReadData, baseContentFromEnrollData?.recent_language);
|
|
21968
|
+
if (localLang && Object.keys(localLang).length) {
|
|
21969
|
+
this.processLanguageSelection(this.contentLangSvc.getRequiredLanguageDetails(this.baseContentReadData, baseContentFromEnrollData?.recent_language));
|
|
21970
|
+
}
|
|
21971
|
+
else {
|
|
21972
|
+
this.processLanguageSelection(this.contentLangSvc.getSelectedLanguage(this.contentReadData));
|
|
21973
|
+
}
|
|
21838
21974
|
}
|
|
21975
|
+
return of(false);
|
|
21976
|
+
}
|
|
21977
|
+
else {
|
|
21978
|
+
// Always call fetchContentHierarchy first
|
|
21979
|
+
return from(this.fetchContentHierarchy(this.contentReadData?.identifier || ''));
|
|
21839
21980
|
}
|
|
21840
|
-
return of(false);
|
|
21841
21981
|
}
|
|
21842
21982
|
else {
|
|
21843
21983
|
// Always call fetchContentHierarchy first
|
|
@@ -21919,11 +22059,12 @@ class AppTocHomeV2Component {
|
|
|
21919
22059
|
return new Promise((resolve) => {
|
|
21920
22060
|
const content = this.baseContentReadData;
|
|
21921
22061
|
// STEP 1: Construct hierarchy structure
|
|
21922
|
-
|
|
22062
|
+
let contentHeirarchyData = this.appTocV2Svc.constructHeirarchyData(content);
|
|
21923
22063
|
// STEP 2: Update progress with latest enrollment data
|
|
21924
|
-
this.appTocV2Svc.mapContentHierarchyProgressUpdate(
|
|
22064
|
+
this.appTocV2Svc.mapContentHierarchyProgressUpdate(contentHeirarchyData, this.userEnrollmentList);
|
|
21925
22065
|
// STEP 3: Create hashmap from updated hierarchy (this should preserve completion status)
|
|
21926
|
-
this.tocSvc.callHirarchyProgressHashmap(
|
|
22066
|
+
this.tocSvc.callHirarchyProgressHashmap(contentHeirarchyData);
|
|
22067
|
+
this.content = contentHeirarchyData;
|
|
21927
22068
|
// Check if user is enrolled
|
|
21928
22069
|
const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
|
|
21929
22070
|
// STEP 4: Compute milestone locking status with enrollment status and updated progress data
|
|
@@ -22628,11 +22769,11 @@ class AppTocHomeV2Component {
|
|
|
22628
22769
|
this.location.back();
|
|
22629
22770
|
}
|
|
22630
22771
|
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: i19$1.MatSnackBar }, { token: i5.WidgetUserServiceLib }, { token: NetCoreService }, { token: AppTocV2Service }, { token: i2.Location }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22631
|
-
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" }, 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\">\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-container\">\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\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 [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 <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-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%}.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}\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: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$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"], 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", "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: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22772
|
+
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\">\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-container\">\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\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 [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}\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: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$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"], 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", "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: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22632
22773
|
}
|
|
22633
22774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, decorators: [{
|
|
22634
22775
|
type: Component,
|
|
22635
|
-
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\">\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-container\">\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\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 [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 <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-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%}.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}\n"] }]
|
|
22776
|
+
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\">\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-container\">\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\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 [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}\n"] }]
|
|
22636
22777
|
}], 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: i19$1.MatSnackBar }, { type: i5.WidgetUserServiceLib }, { type: NetCoreService }, { type: AppTocV2Service }, { type: i2.Location }, { type: undefined, decorators: [{
|
|
22637
22778
|
type: Inject,
|
|
22638
22779
|
args: ['environment']
|
|
@@ -22640,6 +22781,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
22640
22781
|
type: Input
|
|
22641
22782
|
}], inputContent: [{
|
|
22642
22783
|
type: Input
|
|
22784
|
+
}], displayViewBtn: [{
|
|
22785
|
+
type: Input
|
|
22643
22786
|
}], menuElement: [{
|
|
22644
22787
|
type: ViewChild,
|
|
22645
22788
|
args: ['stickyMenu', { static: true }]
|
|
@@ -22689,7 +22832,7 @@ class AppTocHomeComponent {
|
|
|
22689
22832
|
// this.loadComponent()
|
|
22690
22833
|
}
|
|
22691
22834
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: AppTocHomeService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeComponent, selector: "ws-app-app-toc-home-root", inputs: { forPreview: "forPreview" }, viewQueries: [{ propertyName: "wsAppAppTocHome", first: true, predicate: AppTocHomeDirective, descendants: true, static: true }], ngImport: i0, template: "<!-- <ng-template wsAppAppTocHome></ng-template> -->\n<ws-app-app-toc-home-v2 [forPreview]=\"forPreview\"></ws-app-app-toc-home-v2>\n<!-- {{'apptochome.atGlance' | translate}} -->\n", styles: [""], dependencies: [{ kind: "component", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: ["forPreview", "inputContent"] }] }); }
|
|
22835
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeComponent, selector: "ws-app-app-toc-home-root", inputs: { forPreview: "forPreview" }, viewQueries: [{ propertyName: "wsAppAppTocHome", first: true, predicate: AppTocHomeDirective, descendants: true, static: true }], ngImport: i0, template: "<!-- <ng-template wsAppAppTocHome></ng-template> -->\n<ws-app-app-toc-home-v2 [forPreview]=\"forPreview\"></ws-app-app-toc-home-v2>\n<!-- {{'apptochome.atGlance' | translate}} -->\n", styles: [""], dependencies: [{ kind: "component", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: ["forPreview", "inputContent", "displayViewBtn"] }] }); }
|
|
22693
22836
|
}
|
|
22694
22837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeComponent, decorators: [{
|
|
22695
22838
|
type: Component,
|