@sunbird-cb/toc 0.0.35 → 0.35.2
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/content-toc.component.mjs +5 -2
- package/esm2022/lib/_collection/_common/content-toc/karma-points/karma-points.component.mjs +15 -13
- package/esm2022/lib/_collection/sliders-dynamic/sliders-dynamic.component.mjs +6 -3
- package/esm2022/lib/components/app-toc-cios-home/app-toc-cios-home.component.mjs +1 -1
- package/esm2022/lib/components/app-toc-home-v2/app-toc-home-v2.component.mjs +3 -3
- package/esm2022/lib/services/app-toc.service.mjs +3 -3
- package/fesm2022/sunbird-cb-toc.mjs +28 -20
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/lib/_collection/_common/content-toc/content-toc.component.d.ts.map +1 -1
- package/lib/_collection/_common/content-toc/karma-points/karma-points.component.d.ts.map +1 -1
- package/lib/_collection/sliders-dynamic/sliders-dynamic.component.d.ts +2 -1
- package/lib/_collection/sliders-dynamic/sliders-dynamic.component.d.ts.map +1 -1
- package/lib/services/app-toc.service.d.ts +2 -2
- package/lib/services/app-toc.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ import * as i1 from '@angular/common/http';
|
|
|
24
24
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
|
25
25
|
import * as i7 from '@angular/material/legacy-snack-bar';
|
|
26
26
|
import { MatLegacySnackBarModule } from '@angular/material/legacy-snack-bar';
|
|
27
|
-
import { BehaviorSubject, of, EMPTY, Subject, throwError, interval,
|
|
27
|
+
import { BehaviorSubject, of, EMPTY, Subject, ReplaySubject, throwError, interval, fromEvent, noop, from } from 'rxjs';
|
|
28
28
|
import * as _ from 'lodash';
|
|
29
29
|
import ___default from 'lodash';
|
|
30
30
|
import * as i5 from '@sunbird-cb/consumption';
|
|
@@ -1292,7 +1292,7 @@ class AppTocService {
|
|
|
1292
1292
|
this.transriptionActiveLanguageDataObject = new BehaviorSubject(null);
|
|
1293
1293
|
this.transriptionActiveLanguageDataObject$ = this.transriptionActiveLanguageDataObject.asObservable();
|
|
1294
1294
|
this.transriptionIdentifier = new Subject(); // Start with null
|
|
1295
|
-
this.changeTranscriptionLanguageEvent = new
|
|
1295
|
+
this.changeTranscriptionLanguageEvent = new ReplaySubject(1);
|
|
1296
1296
|
this.playTranscriptionVideo = new Subject();
|
|
1297
1297
|
// this resume data subscription is for on load
|
|
1298
1298
|
this.resumeDataSubscription = this.resumeData.subscribe((_dataResult) => {
|
|
@@ -3599,6 +3599,7 @@ class SlidersDynamicComponent {
|
|
|
3599
3599
|
}
|
|
3600
3600
|
}
|
|
3601
3601
|
ngOnInit() {
|
|
3602
|
+
console.log('widgetData', this.widgetData, this?.baseContentReadData);
|
|
3602
3603
|
this.reInitiateSlideInterval();
|
|
3603
3604
|
}
|
|
3604
3605
|
reInitiateSlideInterval() {
|
|
@@ -3674,13 +3675,15 @@ class SlidersDynamicComponent {
|
|
|
3674
3675
|
return this.langTranslations.translateLabelWithoutspace(label, type, '');
|
|
3675
3676
|
}
|
|
3676
3677
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, deps: [{ token: i2$1.EventService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: { widgetData: "widgetData" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'data'\">\n <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m \">\n {{ widgetData.sliderData[currentIndex].title }}\n </div>\n <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m\">\n {{i + 1}}. {{ slide }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\"\n [hidden]=\"i !== currentIndex\">\n <img [src]=\"slide?.displayButton === 'Quick Learner Badge'\n ? '/assets/icons/badges/Medal.svg'\n : '/assets/icons/home/karma-badge.svg'\" width=\"28px\" alt=\"karma-points image\" />\n <div class=\"text-xs\">\n <span *ngIf=\"slide?.textBeforeIcon\">\n {{\n slide?.displayButton === 'Quick Learner Badge'\n ? slide?.textBeforeIcon\n : translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel')\n }}\n </span> \n <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n 'appKarmapointsPanel') }}</span> \n <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n </div>\n <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n *ngIf=\"slide?.toolTipText\">info_outline</mat-icon>\n </div>\n </ng-container>\n\n <ng-container>\n <div class=\"banner-meta\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n {{ widgetData.sliderData[currentIndex].title }}\n </a>\n </ng-container>\n\n <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.iconsDisplay\">\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{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.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: "directive", type: i2$1.ImageResponsiveDirective, selector: "[wsUtilsImageResponsive]", inputs: ["src"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
3678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: { widgetData: "widgetData", baseContentReadData: "baseContentReadData" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'data'\">\n <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m \">\n {{ widgetData.sliderData[currentIndex].title }}\n </div>\n <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m\">\n {{i + 1}}. {{ slide }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\"\n [hidden]=\"i !== currentIndex\">\n <img [src]=\"slide?.displayButton === 'Quick Learner Badge'\n ? '/assets/icons/badges/Medal.svg'\n : '/assets/icons/home/karma-badge.svg'\" width=\"28px\" alt=\"karma-points image\" />\n <div class=\"text-xs\">\n <span *ngIf=\"slide?.textBeforeIcon\">\n {{\n slide?.displayButton === 'Quick Learner Badge'\n ? slide?.textBeforeIcon\n : translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel')\n }}\n </span> \n <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n 'appKarmapointsPanel') }}</span> \n <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n </div>\n <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n *ngIf=\"slide?.toolTipText && slide?.displayButton !== 'Quick Learner Badge'\">info_outline</mat-icon>\n </div>\n </ng-container>\n\n <ng-container>\n <div class=\"banner-meta\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n {{ widgetData.sliderData[currentIndex].title }}\n </a>\n </ng-container>\n\n <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.iconsDisplay\">\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{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.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: "directive", type: i2$1.ImageResponsiveDirective, selector: "[wsUtilsImageResponsive]", inputs: ["src"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
3678
3679
|
}
|
|
3679
3680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, decorators: [{
|
|
3680
3681
|
type: Component,
|
|
3681
|
-
args: [{ selector: 'ws-widget-sliders-dynamic', template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'data'\">\n <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m \">\n {{ widgetData.sliderData[currentIndex].title }}\n </div>\n <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m\">\n {{i + 1}}. {{ slide }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\"\n [hidden]=\"i !== currentIndex\">\n <img [src]=\"slide?.displayButton === 'Quick Learner Badge'\n ? '/assets/icons/badges/Medal.svg'\n : '/assets/icons/home/karma-badge.svg'\" width=\"28px\" alt=\"karma-points image\" />\n <div class=\"text-xs\">\n <span *ngIf=\"slide?.textBeforeIcon\">\n {{\n slide?.displayButton === 'Quick Learner Badge'\n ? slide?.textBeforeIcon\n : translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel')\n }}\n </span> \n <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n 'appKarmapointsPanel') }}</span> \n <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n </div>\n <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n *ngIf=\"slide?.toolTipText\">info_outline</mat-icon>\n </div>\n </ng-container>\n\n <ng-container>\n <div class=\"banner-meta\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n {{ widgetData.sliderData[currentIndex].title }}\n </a>\n </ng-container>\n\n <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.iconsDisplay\">\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}\n"] }]
|
|
3682
|
+
args: [{ selector: 'ws-widget-sliders-dynamic', template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'data'\">\n <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m \">\n {{ widgetData.sliderData[currentIndex].title }}\n </div>\n <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n <div class=\"banner-data flex margin-right-m\">\n {{i + 1}}. {{ slide }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\"\n [hidden]=\"i !== currentIndex\">\n <img [src]=\"slide?.displayButton === 'Quick Learner Badge'\n ? '/assets/icons/badges/Medal.svg'\n : '/assets/icons/home/karma-badge.svg'\" width=\"28px\" alt=\"karma-points image\" />\n <div class=\"text-xs\">\n <span *ngIf=\"slide?.textBeforeIcon\">\n {{\n slide?.displayButton === 'Quick Learner Badge'\n ? slide?.textBeforeIcon\n : translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel')\n }}\n </span> \n <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n 'appKarmapointsPanel') }}</span> \n <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n </div>\n <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n *ngIf=\"slide?.toolTipText && slide?.displayButton !== 'Quick Learner Badge'\">info_outline</mat-icon>\n </div>\n </ng-container>\n\n <ng-container>\n <div class=\"banner-meta\">\n <ng-container *ngIf=\"widgetData.type === 'image'\">\n <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n {{ widgetData.sliderData[currentIndex].title }}\n </a>\n </ng-container>\n\n <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"widgetData.iconsDisplay\">\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}\n"] }]
|
|
3682
3683
|
}], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }]; }, propDecorators: { widgetData: [{
|
|
3683
3684
|
type: Input
|
|
3685
|
+
}], baseContentReadData: [{
|
|
3686
|
+
type: Input
|
|
3684
3687
|
}], id: [{
|
|
3685
3688
|
type: HostBinding,
|
|
3686
3689
|
args: ['id']
|
|
@@ -3858,29 +3861,31 @@ class KarmaPointsComponent {
|
|
|
3858
3861
|
timeZone: 'Asia/Kolkata',
|
|
3859
3862
|
});
|
|
3860
3863
|
console.log('Badge IST Time:', badgeDateIST);
|
|
3864
|
+
const isEligibleslide = this?.content?.completionPercentage == undefined || this?.content?.completionPercentage < 100;
|
|
3861
3865
|
const badgeSlide = {
|
|
3862
3866
|
displayButton: 'Quick Learner Badge',
|
|
3863
|
-
textBeforeIcon: 'By completing this course earn Quick learner Badge',
|
|
3867
|
+
textBeforeIcon: this.content.courseCategory == "Curated Program" ? badge?.criteria == "partialRandomCompletion" ? `By partially completing this program, earn Quick learner Badge (Any ${badge?.requiredCourseCompletions} course needed)` : 'By completing this course earn Quick learner Badge' : 'By completing this course earn Quick learner Badge',
|
|
3864
3868
|
points: '',
|
|
3865
3869
|
textAfterPoints: '',
|
|
3866
3870
|
toolTipText: 'quickLearnerBadgeTip',
|
|
3867
3871
|
};
|
|
3868
3872
|
const badgeExists = this.kpArray.find((item) => item.displayButton === 'Quick Learner Badge');
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3873
|
+
if (isEligibleslide) {
|
|
3874
|
+
if (badge?.badgeEarningDateEnabled === true) {
|
|
3875
|
+
if (badgeTime > currentTime) {
|
|
3876
|
+
if (!badgeExists) {
|
|
3877
|
+
this.kpArray.push(badgeSlide);
|
|
3878
|
+
this.constructNudgeData();
|
|
3879
|
+
}
|
|
3880
|
+
}
|
|
3881
|
+
}
|
|
3882
|
+
else {
|
|
3872
3883
|
if (!badgeExists) {
|
|
3873
3884
|
this.kpArray.push(badgeSlide);
|
|
3874
3885
|
this.constructNudgeData();
|
|
3875
3886
|
}
|
|
3876
3887
|
}
|
|
3877
3888
|
}
|
|
3878
|
-
else {
|
|
3879
|
-
if (!badgeExists) {
|
|
3880
|
-
this.kpArray.push(badgeSlide);
|
|
3881
|
-
this.constructNudgeData();
|
|
3882
|
-
}
|
|
3883
|
-
}
|
|
3884
3889
|
}
|
|
3885
3890
|
onClickOfClaim() {
|
|
3886
3891
|
this.clickClaimKarmaPoints.emit('claim');
|
|
@@ -3912,11 +3917,11 @@ class KarmaPointsComponent {
|
|
|
3912
3917
|
return this.langTranslations.translateLabelWithoutspace(label, type, '');
|
|
3913
3918
|
}
|
|
3914
3919
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KarmaPointsComponent, deps: [{ token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3915
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: { content: "content", data: "data", pCategory: "pCategory", condition: "condition", baseContentReadData: "baseContentReadData", btnCategory: "btnCategory" }, outputs: { clickClaimKarmaPoints: "clickClaimKarmaPoints" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!disableKarmaPoints\">\n <ws-widget-sliders-dynamic [widgetData]=\"karmaPointsSlider\"></ws-widget-sliders-dynamic>\n\n <ng-container *ngIf=\"btnCategory === 'claim'\">\n <button class=\"flex flex-wrap gap-1 claim-button\" (click)=\"onClickOfClaim()\" >\n <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" class=\"mr-2\" alt=\"karma-points image\" />\n <div *ngIf=\"btnKPData?.textBeforeIcon\">{{ btnKPData.textBeforeIcon }}</div>\n <div *ngIf=\"btnKPData.points\">{{ btnKPData.points }} {{ translateLabels(btnKPData.textAfterPoints, 'appKarmapointsPanel') }}</div>\n <div *ngIf=\"btnKPData?.textAfterIcon\">{{ translateLabels(btnKPData.textAfterIcon, 'appKarmapointsPanel') }}</div>\n </button>\n </ng-container> \n</ng-container>", styles: [".claim-button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;text-align:center;color:#fff!important;border-radius:64px;padding:8px 0;background-color:#ef951e;cursor:pointer;border:none;font-weight:700;width:100%;font-size:14px;margin:16px auto 0;max-width:344px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData"] }] }); }
|
|
3920
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: { content: "content", data: "data", pCategory: "pCategory", condition: "condition", baseContentReadData: "baseContentReadData", btnCategory: "btnCategory" }, outputs: { clickClaimKarmaPoints: "clickClaimKarmaPoints" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!disableKarmaPoints\">\n <ws-widget-sliders-dynamic [widgetData]=\"karmaPointsSlider\" [baseContentReadData] = \"baseContentReadData\"></ws-widget-sliders-dynamic>\n\n <ng-container *ngIf=\"btnCategory === 'claim'\">\n <button class=\"flex flex-wrap gap-1 claim-button\" (click)=\"onClickOfClaim()\" >\n <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" class=\"mr-2\" alt=\"karma-points image\" />\n <div *ngIf=\"btnKPData?.textBeforeIcon\">{{ btnKPData.textBeforeIcon }}</div>\n <div *ngIf=\"btnKPData.points\">{{ btnKPData.points }} {{ translateLabels(btnKPData.textAfterPoints, 'appKarmapointsPanel') }}</div>\n <div *ngIf=\"btnKPData?.textAfterIcon\">{{ translateLabels(btnKPData.textAfterIcon, 'appKarmapointsPanel') }}</div>\n </button>\n </ng-container> \n</ng-container>", styles: [".claim-button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;text-align:center;color:#fff!important;border-radius:64px;padding:8px 0;background-color:#ef951e;cursor:pointer;border:none;font-weight:700;width:100%;font-size:14px;margin:16px auto 0;max-width:344px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData", "baseContentReadData"] }] }); }
|
|
3916
3921
|
}
|
|
3917
3922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KarmaPointsComponent, decorators: [{
|
|
3918
3923
|
type: Component,
|
|
3919
|
-
args: [{ selector: 'ws-widget-karma-points', template: "<ng-container *ngIf=\"!disableKarmaPoints\">\n <ws-widget-sliders-dynamic [widgetData]=\"karmaPointsSlider\"></ws-widget-sliders-dynamic>\n\n <ng-container *ngIf=\"btnCategory === 'claim'\">\n <button class=\"flex flex-wrap gap-1 claim-button\" (click)=\"onClickOfClaim()\" >\n <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" class=\"mr-2\" alt=\"karma-points image\" />\n <div *ngIf=\"btnKPData?.textBeforeIcon\">{{ btnKPData.textBeforeIcon }}</div>\n <div *ngIf=\"btnKPData.points\">{{ btnKPData.points }} {{ translateLabels(btnKPData.textAfterPoints, 'appKarmapointsPanel') }}</div>\n <div *ngIf=\"btnKPData?.textAfterIcon\">{{ translateLabels(btnKPData.textAfterIcon, 'appKarmapointsPanel') }}</div>\n </button>\n </ng-container> \n</ng-container>", styles: [".claim-button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;text-align:center;color:#fff!important;border-radius:64px;padding:8px 0;background-color:#ef951e;cursor:pointer;border:none;font-weight:700;width:100%;font-size:14px;margin:16px auto 0;max-width:344px}\n"] }]
|
|
3924
|
+
args: [{ selector: 'ws-widget-karma-points', template: "<ng-container *ngIf=\"!disableKarmaPoints\">\n <ws-widget-sliders-dynamic [widgetData]=\"karmaPointsSlider\" [baseContentReadData] = \"baseContentReadData\"></ws-widget-sliders-dynamic>\n\n <ng-container *ngIf=\"btnCategory === 'claim'\">\n <button class=\"flex flex-wrap gap-1 claim-button\" (click)=\"onClickOfClaim()\" >\n <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" class=\"mr-2\" alt=\"karma-points image\" />\n <div *ngIf=\"btnKPData?.textBeforeIcon\">{{ btnKPData.textBeforeIcon }}</div>\n <div *ngIf=\"btnKPData.points\">{{ btnKPData.points }} {{ translateLabels(btnKPData.textAfterPoints, 'appKarmapointsPanel') }}</div>\n <div *ngIf=\"btnKPData?.textAfterIcon\">{{ translateLabels(btnKPData.textAfterIcon, 'appKarmapointsPanel') }}</div>\n </button>\n </ng-container> \n</ng-container>", styles: [".claim-button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;text-align:center;color:#fff!important;border-radius:64px;padding:8px 0;background-color:#ef951e;cursor:pointer;border:none;font-weight:700;width:100%;font-size:14px;margin:16px auto 0;max-width:344px}\n"] }]
|
|
3920
3925
|
}], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }]; }, propDecorators: { content: [{
|
|
3921
3926
|
type: Input
|
|
3922
3927
|
}], data: [{
|
|
@@ -12404,7 +12409,10 @@ class ContentTocComponent {
|
|
|
12404
12409
|
}
|
|
12405
12410
|
if (changes && changes['playResourceId']) {
|
|
12406
12411
|
if (changes?.playResourceId?.previousValue !== changes?.playResourceId?.currentValue) {
|
|
12407
|
-
if (this.viewerPage && this.
|
|
12412
|
+
if (this.viewerPage && this.enableTranscriptionFlag) {
|
|
12413
|
+
this.resourceIdentifier = this.playResourceId || this.viewerDataSvc?.resourceId;
|
|
12414
|
+
this.subTitles = [];
|
|
12415
|
+
this.vttLangArr = [];
|
|
12408
12416
|
this.parseVTT();
|
|
12409
12417
|
}
|
|
12410
12418
|
}
|
|
@@ -24032,11 +24040,11 @@ class AppTocHomeV2Component {
|
|
|
24032
24040
|
this.location.back();
|
|
24033
24041
|
}
|
|
24034
24042
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: WidgetContentService }, { token: AppTocService }, { token: i2$1.LoggerService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.UtilityService }, { token: i5.ContentLanguageService }, { token: ActionService }, { token: ViewerUtilService }, { token: RatingService }, { token: i2$1.TelemetryService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.EventService }, { token: LoadCheckService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: TimerService }, { token: i2$1.WidgetEnrollService }, { token: i5.WidgetContentLibService }, { token: i2$1.DataTransferService }, { token: i6$2.MatSnackBar }, { token: i5.WidgetUserServiceLib }, { token: NetCoreService }, { token: AppTocV2Service }, { token: i2.Location }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24035
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n<div class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n</div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate", "fromMDO"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "baseContentReadData", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24043
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n <div *ngIf=\"baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate\" class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n </div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate", "fromMDO"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "baseContentReadData", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24036
24044
|
}
|
|
24037
24045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, decorators: [{
|
|
24038
24046
|
type: Component,
|
|
24039
|
-
args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n<div class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n</div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"] }]
|
|
24047
|
+
args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container6\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n <div *ngIf=\"baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate\" class=\"knowledge-level-container badgediv\">\n <span class=\"custom-badge\">\n <img class=\"badge-img bg-transparent\" src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n </span>\n </div>\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [baseContentReadData]=\"baseContentReadData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\n"] }]
|
|
24040
24048
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: WidgetContentService }, { type: AppTocService }, { type: i2$1.LoggerService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i7.MatLegacySnackBar }, { type: i1$3.MatLegacyDialog }, { type: MobileAppsService }, { type: i2$1.UtilityService }, { type: i5.ContentLanguageService }, { type: ActionService }, { type: ViewerUtilService }, { type: RatingService }, { type: i2$1.TelemetryService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.EventService }, { type: LoadCheckService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: TimerService }, { type: i2$1.WidgetEnrollService }, { type: i5.WidgetContentLibService }, { type: i2$1.DataTransferService }, { type: i6$2.MatSnackBar }, { type: i5.WidgetUserServiceLib }, { type: NetCoreService }, { type: AppTocV2Service }, { type: i2.Location }, { type: undefined, decorators: [{
|
|
24041
24049
|
type: Inject,
|
|
24042
24050
|
args: ['environment']
|
|
@@ -26410,7 +26418,7 @@ class AppTocCiosHomeComponent {
|
|
|
26410
26418
|
_.get(this.extContentReadData, 'contentPartner.isActive', false);
|
|
26411
26419
|
}
|
|
26412
26420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i5.CommonMethodsService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.WidgetContentService }, { token: CertificateService }, { token: LoaderService }, { token: i5$4.MatDialog }, { token: i7.MatLegacySnackBar }, { token: NetCoreService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\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=\"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\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"extContentReadData?.topic\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n </ng-container>\n </div>\n </div> -->\n </ng-container>\n\n <div class=\"flex items-center text-white mob-share\">\n <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- Knowledge level block -->\n <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n class=\"knowledge-level-container\">\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n 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 {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n 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 {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n 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 {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n </div>\n </ng-container>\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\">{{\n handleCapitalize(extContentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n </span>\n <ng-template #contentPartnerName>\n {{extContentReadData?.contentPartner?.contentPartnerName }}\n </ng-template>\n </span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n 'common.karmayogiBharat' | translate }}</span>\n </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\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon>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 }}</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' | translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | 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 && extContentReadData?.lastUpdatedOn\">\n <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!forPreview\">\n\n <div *ngIf=\"isMobile\">\n <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <ng-container *ngIf=\"showEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"showRedirect\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n\n <div class=\"block md:hidden\">\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n </div>\n <div>\n <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n <mat-tab-group>\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\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 <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n [baseContentReadData]=\"extContentReadData\"\n [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0 && userExtCourseEnroll?.progress === 100\"\n [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n [skeletonLoader]=\"skeletonLoader\"\n [fromMDO]=\"fromMDO\">\n </ws-widget-app-toc-about>\n </ng-container>\n </div>\n </ng-template>\n </mat-tab>\n\n <ng-container *ngIf=\"config?.commentsTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n <!-- <ng-template matTabContent> -->\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n <ng-container *ngIf=\"!commentId\">\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n </ng-container>\n <ng-container *ngIf=\"commentId\">\n <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n Back to all comments\n </div>\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n [skeletonLoader]></d-v2-widget-comment>\n </ng-container>\n\n </div>\n <!-- </ng-template> -->\n </mat-tab>\n </ng-container>\n </mat-tab-group>\n\n </div>\n <div class=\"right-container\">\n <div class=\"right-content\" #rightContainer>\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(' + extContentReadData?.appIcon + ')', '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-end\">\n <div (click)=\"onClickOfShare()\"\n class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n <mat-icon>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 text-scrol-custom\">{{\n handleCapitalize(extContentReadData?.name) }}\n </div>\n <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n </div> -->\n </div>\n </div>\n\n\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"!forPreview\">\n <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n\n <ng-container *ngIf=\"showEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"showRedirect\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\"\n (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">\n {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\">\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n <ng-container *ngIf=\"showProviderTips\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.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}.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;word-wrap:break-word}.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}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.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{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;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 .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:#000000de;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}.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}.text-scrol-custom{height:200px;overflow-y:auto}@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}.rate-button{color:#000000de!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{min-width:320px;max-width:400px;margin:auto}@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}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.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}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right: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}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate", "fromMDO"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
26421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\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=\"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\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"extContentReadData?.topic\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n </ng-container>\n </div>\n </div> -->\n </ng-container>\n\n <div class=\"flex items-center text-white mob-share\">\n <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- Knowledge level block -->\n <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n class=\"knowledge-level-container\">\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n 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 {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n 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 {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n 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 {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n </div>\n </ng-container>\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\">{{\n handleCapitalize(extContentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n </span>\n <ng-template #contentPartnerName>\n {{extContentReadData?.contentPartner?.contentPartnerName }}\n </ng-template>\n </span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n 'common.karmayogiBharat' | translate }}</span>\n </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\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon>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 }}</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' | translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | 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 && extContentReadData?.lastUpdatedOn\">\n <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!forPreview\">\n\n <div *ngIf=\"isMobile\">\n <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <ng-container *ngIf=\"showEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"showRedirect\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n\n <div class=\"block md:hidden\">\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n </div>\n <div>\n <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n <mat-tab-group>\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\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 <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n [baseContentReadData]=\"extContentReadData\"\n [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0 && userExtCourseEnroll?.progress === 100\"\n [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n [skeletonLoader]=\"skeletonLoader\"\n [fromMDO]=\"fromMDO\">\n </ws-widget-app-toc-about>\n </ng-container>\n </div>\n </ng-template>\n </mat-tab>\n\n <ng-container *ngIf=\"config?.commentsTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n <!-- <ng-template matTabContent> -->\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n <ng-container *ngIf=\"!commentId\">\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n </ng-container>\n <ng-container *ngIf=\"commentId\">\n <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n Back to all comments\n </div>\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n [skeletonLoader]></d-v2-widget-comment>\n </ng-container>\n\n </div>\n <!-- </ng-template> -->\n </mat-tab>\n </ng-container>\n </mat-tab-group>\n\n </div>\n <div class=\"right-container\">\n <div class=\"right-content\" #rightContainer>\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(' + extContentReadData?.appIcon + ')', '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-end\">\n <div (click)=\"onClickOfShare()\"\n class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n <mat-icon>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 text-scrol-custom\">{{\n handleCapitalize(extContentReadData?.name) }}\n </div>\n <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n </div> -->\n </div>\n </div>\n\n\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"!forPreview\">\n <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n\n <ng-container *ngIf=\"showEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"showRedirect\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\"\n (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">\n {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\">\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n <ng-container *ngIf=\"showProviderTips\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.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}.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;word-wrap:break-word}.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}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.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{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;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 .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:#000000de;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}.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}.text-scrol-custom{height:200px;overflow-y:auto}@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}.rate-button{color:#000000de!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{min-width:320px;max-width:400px;margin:auto}@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}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.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}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right: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}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate", "fromMDO"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData", "baseContentReadData"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
26414
26422
|
}
|
|
26415
26423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, decorators: [{
|
|
26416
26424
|
type: Component,
|