@sunbird-cb/toc 0.0.2-mauritius → 0.0.3-2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/_collection/_common/content-toc/app-toc-about/app-toc-about.component.mjs +6 -16
- package/esm2022/lib/_collection/_common/content-toc/content-toc.component.mjs +7 -11
- package/esm2022/lib/_collection/_common/content-toc/karma-points/karma-points.component.mjs +3 -47
- package/esm2022/lib/_collection/sliders-dynamic/sliders-dynamic.component.mjs +3 -6
- package/esm2022/lib/_services/viewer-route-util.mjs +2 -2
- package/esm2022/lib/components/app-toc-cios-home/app-toc-cios-home.component.mjs +3 -4
- package/esm2022/lib/components/app-toc-home/app-toc-home.component.mjs +6 -7
- package/esm2022/lib/components/app-toc-home-v2/app-toc-home-v2.component.mjs +34 -42
- package/esm2022/lib/components/public-survey-form/public-survey-form.component.mjs +3 -5
- package/fesm2022/sunbird-cb-toc.mjs +58 -131
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/lib/_collection/_common/content-toc/app-toc-about/app-toc-about.component.d.ts +3 -5
- package/lib/_collection/_common/content-toc/content-toc.component.d.ts +3 -5
- package/lib/_collection/_common/content-toc/karma-points/karma-points.component.d.ts +1 -3
- package/lib/_collection/sliders-dynamic/sliders-dynamic.component.d.ts +1 -2
- package/lib/components/app-toc-cios-home/app-toc-cios-home.component.d.ts +0 -1
- package/lib/components/app-toc-home/app-toc-home.component.d.ts +2 -3
- package/lib/components/app-toc-home-v2/app-toc-home-v2.component.d.ts +2 -3
- package/lib/components/public-survey-form/public-survey-form.component.d.ts +0 -1
- package/package.json +2 -2
- package/sunbird-cb-toc-0.0.32.1.tgz +0 -0
|
@@ -612,7 +612,7 @@ function viewerRouteGenerator(id, mimeType, collectionId, collectionType, forPre
|
|
|
612
612
|
if (forPreview) {
|
|
613
613
|
queryParams = { ...queryParams, preview: true };
|
|
614
614
|
}
|
|
615
|
-
if (forcreator
|
|
615
|
+
if (forcreator) {
|
|
616
616
|
queryParams = { ...queryParams, editMode: true };
|
|
617
617
|
}
|
|
618
618
|
if (ML && MLId) {
|
|
@@ -3599,7 +3599,6 @@ class SlidersDynamicComponent {
|
|
|
3599
3599
|
}
|
|
3600
3600
|
}
|
|
3601
3601
|
ngOnInit() {
|
|
3602
|
-
console.log('widgetData', this.widgetData, this?.baseContentReadData);
|
|
3603
3602
|
this.reInitiateSlideInterval();
|
|
3604
3603
|
}
|
|
3605
3604
|
reInitiateSlideInterval() {
|
|
@@ -3675,15 +3674,13 @@ class SlidersDynamicComponent {
|
|
|
3675
3674
|
return this.langTranslations.translateLabelWithoutspace(label, type, '');
|
|
3676
3675
|
}
|
|
3677
3676
|
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 }); }
|
|
3678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: { widgetData: "widgetData"
|
|
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\" [hidden]=\"i !== currentIndex\">\n <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" alt=\"karma-points image\" />\n <div class=\"text-xs\">\n <span *ngIf=\"slide?.textBeforeIcon\">{{ translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel') }}</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"] }] }); }
|
|
3679
3678
|
}
|
|
3680
3679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, decorators: [{
|
|
3681
3680
|
type: Component,
|
|
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\"
|
|
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\" [hidden]=\"i !== currentIndex\">\n <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" alt=\"karma-points image\" />\n <div class=\"text-xs\">\n <span *ngIf=\"slide?.textBeforeIcon\">{{ translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel') }}</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"] }]
|
|
3683
3682
|
}], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }]; }, propDecorators: { widgetData: [{
|
|
3684
3683
|
type: Input
|
|
3685
|
-
}], baseContentReadData: [{
|
|
3686
|
-
type: Input
|
|
3687
3684
|
}], id: [{
|
|
3688
3685
|
type: HostBinding,
|
|
3689
3686
|
args: ['id']
|
|
@@ -3831,7 +3828,6 @@ class KarmaPointsComponent {
|
|
|
3831
3828
|
}
|
|
3832
3829
|
}
|
|
3833
3830
|
}
|
|
3834
|
-
this.addBadgeSlide();
|
|
3835
3831
|
}
|
|
3836
3832
|
getKPData(btnType) {
|
|
3837
3833
|
this.data?.forEach((item) => {
|
|
@@ -3846,47 +3842,6 @@ class KarmaPointsComponent {
|
|
|
3846
3842
|
}
|
|
3847
3843
|
});
|
|
3848
3844
|
}
|
|
3849
|
-
addBadgeSlide() {
|
|
3850
|
-
const badgeDetails = this.baseContentReadData?.badgeDetails_v1;
|
|
3851
|
-
if (!badgeDetails || !badgeDetails.length) {
|
|
3852
|
-
return;
|
|
3853
|
-
}
|
|
3854
|
-
const badge = badgeDetails[0];
|
|
3855
|
-
if (!badge.badgeEarningDateEnabled) {
|
|
3856
|
-
return;
|
|
3857
|
-
}
|
|
3858
|
-
const badgeTime = badge.badgeEarningDateTime;
|
|
3859
|
-
const currentTime = Date.now();
|
|
3860
|
-
const badgeDateIST = new Date(badgeTime).toLocaleString('en-IN', {
|
|
3861
|
-
timeZone: 'Asia/Kolkata',
|
|
3862
|
-
});
|
|
3863
|
-
console.log('Badge IST Time:', badgeDateIST);
|
|
3864
|
-
const isEligibleslide = this?.content?.completionPercentage == undefined || this?.content?.completionPercentage < 100;
|
|
3865
|
-
const badgeSlide = {
|
|
3866
|
-
displayButton: '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',
|
|
3868
|
-
points: '',
|
|
3869
|
-
textAfterPoints: '',
|
|
3870
|
-
toolTipText: 'quickLearnerBadgeTip',
|
|
3871
|
-
};
|
|
3872
|
-
const badgeExists = this.kpArray.find((item) => item.displayButton === 'Quick Learner Badge');
|
|
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 {
|
|
3883
|
-
if (!badgeExists) {
|
|
3884
|
-
this.kpArray.push(badgeSlide);
|
|
3885
|
-
this.constructNudgeData();
|
|
3886
|
-
}
|
|
3887
|
-
}
|
|
3888
|
-
}
|
|
3889
|
-
}
|
|
3890
3845
|
onClickOfClaim() {
|
|
3891
3846
|
this.clickClaimKarmaPoints.emit('claim');
|
|
3892
3847
|
this.btnCategory = '';
|
|
@@ -3917,11 +3872,11 @@ class KarmaPointsComponent {
|
|
|
3917
3872
|
return this.langTranslations.translateLabelWithoutspace(label, type, '');
|
|
3918
3873
|
}
|
|
3919
3874
|
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 }); }
|
|
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",
|
|
3875
|
+
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", 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"] }] }); }
|
|
3921
3876
|
}
|
|
3922
3877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KarmaPointsComponent, decorators: [{
|
|
3923
3878
|
type: Component,
|
|
3924
|
-
args: [{ selector: 'ws-widget-karma-points', template: "<ng-container *ngIf=\"!disableKarmaPoints\">\n <ws-widget-sliders-dynamic [widgetData]=\"karmaPointsSlider\"
|
|
3879
|
+
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"] }]
|
|
3925
3880
|
}], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }]; }, propDecorators: { content: [{
|
|
3926
3881
|
type: Input
|
|
3927
3882
|
}], data: [{
|
|
@@ -3930,8 +3885,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3930
3885
|
type: Input
|
|
3931
3886
|
}], condition: [{
|
|
3932
3887
|
type: Input
|
|
3933
|
-
}], baseContentReadData: [{
|
|
3934
|
-
type: Input
|
|
3935
3888
|
}], clickClaimKarmaPoints: [{
|
|
3936
3889
|
type: Output
|
|
3937
3890
|
}], btnCategory: [{
|
|
@@ -7035,7 +6988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7035
6988
|
dayjs.extend(isSameOrBefore);
|
|
7036
6989
|
dayjs.extend(isSameOrAfter);
|
|
7037
6990
|
class AppTocAboutComponent {
|
|
7038
|
-
constructor(ratingService, loggerService, dialog, matSnackBar, loadCheckService, timerService, tocSvc, configService, discussUtilitySvc, router, reviewDataService, handleClaimService, resetRatingsService, contentSvc, activatedRoute,
|
|
6991
|
+
constructor(ratingService, loggerService, dialog, matSnackBar, loadCheckService, timerService, tocSvc, configService, discussUtilitySvc, router, reviewDataService, handleClaimService, resetRatingsService, contentSvc, activatedRoute, environment) {
|
|
7039
6992
|
this.ratingService = ratingService;
|
|
7040
6993
|
this.loggerService = loggerService;
|
|
7041
6994
|
this.dialog = dialog;
|
|
@@ -7051,7 +7004,6 @@ class AppTocAboutComponent {
|
|
|
7051
7004
|
this.resetRatingsService = resetRatingsService;
|
|
7052
7005
|
this.contentSvc = contentSvc;
|
|
7053
7006
|
this.activatedRoute = activatedRoute;
|
|
7054
|
-
this.domainConfService = domainConfService;
|
|
7055
7007
|
this.content = null;
|
|
7056
7008
|
this.contentReadData = null;
|
|
7057
7009
|
this.baseContentReadData = null;
|
|
@@ -7065,7 +7017,6 @@ class AppTocAboutComponent {
|
|
|
7065
7017
|
this.showMarketPlaceCertificate = false;
|
|
7066
7018
|
this.languageList = [];
|
|
7067
7019
|
this.lockCertificate = false;
|
|
7068
|
-
this.fromMDO = false;
|
|
7069
7020
|
this.trigerCompletionSurveyForm = new EventEmitter();
|
|
7070
7021
|
this.disableCertificate = false;
|
|
7071
7022
|
this.isExternalContent = false;
|
|
@@ -7162,7 +7113,6 @@ class AppTocAboutComponent {
|
|
|
7162
7113
|
if (this.content && this.content.courseCategory === NsContent.ECourseCategory.CASE_STUDY) {
|
|
7163
7114
|
this.disableCertificate = true;
|
|
7164
7115
|
}
|
|
7165
|
-
console.log('this.baseContentReadData---', this.baseContentReadData);
|
|
7166
7116
|
if (this.baseContentReadData?.sectorDetails_v1) {
|
|
7167
7117
|
// Parse string to array if needed
|
|
7168
7118
|
let sectorDetailsArray = this.baseContentReadData.sectorDetails_v1;
|
|
@@ -7244,11 +7194,6 @@ class AppTocAboutComponent {
|
|
|
7244
7194
|
if (this.searchTagElem && this.searchTagElem.nativeElement.offsetHeight > 64) {
|
|
7245
7195
|
this.searchTagsEllipsis = true;
|
|
7246
7196
|
}
|
|
7247
|
-
if (this.fromMDO) {
|
|
7248
|
-
this.baseContentReadData = this.content.result.content;
|
|
7249
|
-
console.log('this.baseContentReadData--', this.baseContentReadData);
|
|
7250
|
-
this.loadCompetencies();
|
|
7251
|
-
}
|
|
7252
7197
|
}, 500);
|
|
7253
7198
|
}
|
|
7254
7199
|
if (changes.skeletonLoader && !changes.skeletonLoader.currentValue) {
|
|
@@ -7885,13 +7830,13 @@ class AppTocAboutComponent {
|
|
|
7885
7830
|
this.refreshratingSub.unsubscribe();
|
|
7886
7831
|
}
|
|
7887
7832
|
}
|
|
7888
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, deps: [{ token: RatingService }, { token: i2$1.LoggerService }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }, { token: LoadCheckService }, { token: TimerService }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: DiscussUtilsService }, { token: i1$1.Router }, { token: ReviewComponentDataService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: i2$1.WidgetContentService }, { token: i1$1.ActivatedRoute }, { token:
|
|
7889
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate", fromMDO: "fromMDO" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && !fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.result?.content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.result?.content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && !fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && fromMDO\">\n <ws-widget-toc-kpi-values [content]=\"content?.result?.content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n \n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points && (domainConfService?.isFeatureByPageEnabled('toc','karmaPoints'))\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n <div *ngIf=\"fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" [src]=\"content?.result?.content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.result?.content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "baseContentReadData", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
|
|
7833
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, deps: [{ token: RatingService }, { token: i2$1.LoggerService }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }, { token: LoadCheckService }, { token: TimerService }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: DiscussUtilsService }, { token: i1$1.Router }, { token: ReviewComponentDataService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: i2$1.WidgetContentService }, { token: i1$1.ActivatedRoute }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7834
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
|
|
7890
7835
|
}
|
|
7891
7836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, decorators: [{
|
|
7892
7837
|
type: Component,
|
|
7893
|
-
args: [{ selector: 'ws-widget-app-toc-about', template: "\n<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && !fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.result?.content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.result?.content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && !fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && fromMDO\">\n <ws-widget-toc-kpi-values [content]=\"content?.result?.content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n \n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points && (domainConfService?.isFeatureByPageEnabled('toc','karmaPoints'))\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n <div *ngIf=\"fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" [src]=\"content?.result?.content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.result?.content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"] }]
|
|
7894
|
-
}], ctorParameters: function () { return [{ type: RatingService }, { type: i2$1.LoggerService }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }, { type: LoadCheckService }, { type: TimerService }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: DiscussUtilsService }, { type: i1$1.Router }, { type: ReviewComponentDataService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: i2$1.WidgetContentService }, { type: i1$1.ActivatedRoute }, { type:
|
|
7838
|
+
args: [{ selector: 'ws-widget-app-toc-about', template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"] }]
|
|
7839
|
+
}], ctorParameters: function () { return [{ type: RatingService }, { type: i2$1.LoggerService }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }, { type: LoadCheckService }, { type: TimerService }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: DiscussUtilsService }, { type: i1$1.Router }, { type: ReviewComponentDataService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: i2$1.WidgetContentService }, { type: i1$1.ActivatedRoute }, { type: undefined, decorators: [{
|
|
7895
7840
|
type: Inject,
|
|
7896
7841
|
args: ['environment']
|
|
7897
7842
|
}] }]; }, propDecorators: { condition: [{
|
|
@@ -7936,8 +7881,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7936
7881
|
type: Input
|
|
7937
7882
|
}], lockCertificate: [{
|
|
7938
7883
|
type: Input
|
|
7939
|
-
}], fromMDO: [{
|
|
7940
|
-
type: Input
|
|
7941
7884
|
}], trigerCompletionSurveyForm: [{
|
|
7942
7885
|
type: Output
|
|
7943
7886
|
}], summaryElem: [{
|
|
@@ -12217,7 +12160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
12217
12160
|
}], ctorParameters: function () { return [{ type: i1$5.DomSanitizer }]; } });
|
|
12218
12161
|
|
|
12219
12162
|
class ContentTocComponent {
|
|
12220
|
-
constructor(route, utilityService, loadCheckService, configService, dialog, tocSvc, actionSVC, router, eventSvc, viewerDataSvc, samuhikCharchaSvc,
|
|
12163
|
+
constructor(route, utilityService, loadCheckService, configService, dialog, tocSvc, actionSVC, router, eventSvc, viewerDataSvc, samuhikCharchaSvc, environment) {
|
|
12221
12164
|
this.route = route;
|
|
12222
12165
|
this.utilityService = utilityService;
|
|
12223
12166
|
this.loadCheckService = loadCheckService;
|
|
@@ -12229,7 +12172,6 @@ class ContentTocComponent {
|
|
|
12229
12172
|
this.eventSvc = eventSvc;
|
|
12230
12173
|
this.viewerDataSvc = viewerDataSvc;
|
|
12231
12174
|
this.samuhikCharchaSvc = samuhikCharchaSvc;
|
|
12232
|
-
this.domainConfService = domainConfService;
|
|
12233
12175
|
this.environment = environment;
|
|
12234
12176
|
this.tabChangeValue = '';
|
|
12235
12177
|
this.changeTab = false;
|
|
@@ -12246,7 +12188,6 @@ class ContentTocComponent {
|
|
|
12246
12188
|
this.sideNavBarOpened = false;
|
|
12247
12189
|
this.languageList = [];
|
|
12248
12190
|
this.lockCertificate = false;
|
|
12249
|
-
this.fromMDO = false;
|
|
12250
12191
|
this.playResumeForAI = new EventEmitter();
|
|
12251
12192
|
this.enrollUserToAI = new EventEmitter();
|
|
12252
12193
|
this.trigerCompletionSurveyForm = new EventEmitter();
|
|
@@ -12412,7 +12353,7 @@ class ContentTocComponent {
|
|
|
12412
12353
|
if (changes && changes['playResourceId']) {
|
|
12413
12354
|
if (changes?.playResourceId?.previousValue !== changes?.playResourceId?.currentValue) {
|
|
12414
12355
|
if (this.viewerPage && this.viewerDataSvc?.resourceId && this.enableTranscriptionFlag) {
|
|
12415
|
-
this.parseVTT();
|
|
12356
|
+
await this.parseVTT();
|
|
12416
12357
|
}
|
|
12417
12358
|
}
|
|
12418
12359
|
}
|
|
@@ -12937,13 +12878,13 @@ class ContentTocComponent {
|
|
|
12937
12878
|
resumeContentCall() {
|
|
12938
12879
|
this.resumeContent.emit();
|
|
12939
12880
|
}
|
|
12940
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentTocComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.UtilityService }, { token: LoadCheckService }, { token: i2$1.ConfigurationsService }, { token: i1$3.MatLegacyDialog }, { token: AppTocService }, { token: ActionService }, { token: i1$1.Router }, { token: i2$1.EventService }, { token: ViewerDataService }, { token: SamuhikCharchaService }, { token:
|
|
12941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: { content: "content", contentReadData: "contentReadData", initialRouteData: "initialRouteData", changeTab: "changeTab", baseContentReadData: "baseContentReadData", forPreview: "forPreview", contentTabFlag: "contentTabFlag", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", pathSet: "pathSet", fromViewer: "fromViewer", hierarchyMapData: "hierarchyMapData", condition: "condition", kparray: "kparray", selectedBatchData: "selectedBatchData", config: "config", componentName: "componentName", isEnrolled: "isEnrolled", playResourceId: "playResourceId", sideNavBarOpened: "sideNavBarOpened", languageList: "languageList", lockCertificate: "lockCertificate", fromMDO: "fromMDO" }, outputs: { playResumeForAI: "playResumeForAI", enrollUserToAI: "enrollUserToAI", trigerCompletionSurveyForm: "trigerCompletionSurveyForm", resumeContent: "resumeContent" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "tabElement", first: true, predicate: ["stickyMenu"], descendants: true }, { propertyName: "tabs", predicate: MatTab, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- && (content?.courseCategory !== courseCategory?.BLENDED_PROGRAM) -->\n<div class=\"ai-tutor-get-started\" *ngIf=\"!viewerPage && enableAITutorFlag && !isMobile\">\n <div class=\"flex flex-row align-items-center\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"64px\" width=\"64px\" />\n </div>\n <div class=\"flex flex-row align-items-center\">\n <div class=\"py-2\" >\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning tailored just\n for you.</span>\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\" [ngClass]=\"isMobile ? 'w-160' : ''\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div>\n </div>\n</div>\n<div class=\"tab-group-container\">\n <mat-tab-group (selectedTabChange)=\"handleTabChange($event)\" #stickyMenu [class.sticky-mat-tabs]=\"sticky\"\n [selectedIndex]=\"selectedTabIndex\" [ngClass]=\"{'content-tabs':!fromViewer,'contentSticky': forPreview}\">\n\n <!-- Transcription Tab -->\n <mat-tab label=\"Transcription\"\n *ngIf=\"viewerPage && enableTranscriptionFlag && vttLangArr?.length && subTitles?.length\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>Transcript</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <div class=\"disclaimer my-2\">\n <p class=\"py-2 px-2\">Disclaimer : These transcripts and subtitles are AI-generated and may contain\n errors.</p>\n </div>\n <div class=\"w-full ml-5 mr-5\" *ngIf=\"isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"height: auto; width: 100%;\"\n floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let lang of vttLangArr\"\n [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"ml-4 flex flex-row justify-end transcript-control\">\n <!-- <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" (change)=\"renderSelectedLanguageTranscription($event)\">\n <option [value]=\"lang?.language\" *ngFor=\"let lang of vttLangArr\" [selected]=\"lang?.label === transcriptionActiveLanguage\">\n <span *ngIf=\"transcriptionActiveLanguage === lang?.label\"> Transcript Language: </span> {{lang?.language | titlecase}} <span *ngIf=\"transcriptionActiveLanguage === lang?.language\">(Auto)</span>\n </option>\n </select>\n </mat-form-field> -->\n <div class=\"flex flex-row w-full\">\n <div [ngClass]=\"!isMobileForAI ? 'w-subtitle-80':'w-full'\">\n <div [ngClass]=\"!isMobileForAI ? 'ml-5-per' : ''\" *ngIf=\"subTitles && subTitles?.length\">\n <!-- Transcription content -->\n <ng-container *ngFor=\"let subtitle of subTitles\">\n <div class=\"flex flex-col my-2\">\n <div class=\"flex flex-row\">\n <div class=\"subtitle-time\">\n <p class=\"cursor-pointer\" (click)=\"playFromSlot(subtitle)\">\n <span class=\"pr-1 blue-underline\"> {{\n formatMsToVttTime(subtitle?.startTime) }} </span>\n <span class=\"black-text\">-</span>\n <span class=\"pl-1 blue-underline\">{{\n formatMsToVttTime(subtitle?.endTime) }}</span>\n </p>\n </div>\n <div class=\"ml-4 subtitle-text-slot mr-4\">\n <p class=\"black-text\" [innerHtml]=\"subtitle?.text\n | highlight : keywordToHighlight?.text\n : ((subtitle?.startTime / 1000) >= keywordToHighlight?.start\n && (subtitle?.endTime / 1000) <= keywordToHighlight?.end)\">\n </p>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"w-subtitle-20\" *ngIf=\"!isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\"\n style=\"height: auto; width: 100%;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\"\n *ngFor=\"let lang of vttLangArr\" [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n\n </div>\n <!-- <div class=\"flex flex-row align-items-center my-2\">\n <div>\n <p>0.00</p>\n </div>\n <div class=\"ml-4\">\n <p>AI for Digital Transformation: Machine Learning and Deep Learning Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </div>\n <div class=\"ml-4\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\">\n <option value=\"\">Transcription Language: English (Auto)</option>\n </select>\n </mat-form-field>\n </div>\n </div> -->\n\n </ng-template>\n </mat-tab>\n\n <!-- About Tab -->\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"ai-tutor-get-started-mobile my-2 ml-2\" *ngIf=\"!viewerPage && enableAITutorFlag && isMobile && (domainConfService?.isFeatureByPageEnabled('toc','aiTutor'))\">\n <div class=\"flex flex-row align-items-center w-98\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"48px\" width=\"48px\" />\n </div>\n <div class=\"flex flex-row align-items-center w-60\">\n <div class=\"py-2\">\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning\n tailored just for you.</span>\n </div>\n\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI\n Tutor</span></a>\n </div>\n\n </div>\n <!-- <div class=\"flex justify-end my-2 mx-2\">\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div> -->\n </div>\n <ws-widget-app-toc-about [fromViewer]=\"fromViewer\" [pathSet]=\"pathSet\" [content]=\"content\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"false\" [sticky]=\"sticky\"\n [selectedBatchData]=\"selectedBatchData\" [selectedTabValue]=\"selectedTabIndex\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [condition]=\"condition\" [kparray]=\"kparray\" [showReviews]=\"'true'\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n [fromMDO]=\"fromMDO\">\n </ws-widget-app-toc-about>\n </ng-template>\n </mat-tab>\n\n <!-- Content Tab -->\n <ng-container *ngIf=\"content?.children?.length\">\n <mat-tab label=\"{{ 'apptocsinglepage.content' | translate }}\" *ngIf=\"contentTabFlag\">\n <ng-template matTabContent>\n <ws-widget-app-toc-content [batchId]=\"batchId\" [componentName]=\"componentName\" [pathSet]=\"pathSet\"\n [content]=\"content\" [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"forPreview\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [hierarchyMapData]=\"hierarchyMapData\" [baseContentReadData]=\"baseContentReadData\">\n </ws-widget-app-toc-content>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"config?.commentsTab && !forPreview && (domainConfService?.isFeatureByPageEnabled('toc','startDiscussion'))\">\n <mat-tab label=\"{{ 'apptocsinglepage.startDiscussion' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\"\n *ngIf=\"discussWidgetData && discussWidgetData?.newCommentSection?.commentTreeData?.entityId\">\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 </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container\n *ngIf=\"config?.samuhikCharchaTab && condition && contentReadData?.eventLinked?.length > 0 && enableSamuhikCharchaTab && (domainConfService?.isFeatureByPageEnabled('toc','samuhikCharcha'))\">\n <mat-tab label=\"{{ 'apptocsinglepage.samuhikCharcha' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"samuhikCharchaDiv\">\n <ws-widget-samuhik-charcha-content [content]=\"contentReadData\" [conditionData]=\"condition\"\n (resumeContent)=\"resumeContentCall()\">\n </ws-widget-samuhik-charcha-content>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Teachers Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && teacherNotesFlag\">\n <mat-tab label=\"Teachers Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Teachers Resource'\"></ws-widget-app-toc-teachers-notes>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Reference Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && referenceNotesFlag\">\n <mat-tab label=\"Reference Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Reference Resource'\"></ws-widget-app-toc-teachers-notes>\n\n <!-- <ws-widget-app-toc-reference-notes [content]=\"contentReadData\"></ws-widget-app-toc-reference-notes> -->\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"showAssignmentsTab && !forPreview && (domainConfService?.isFeatureByPageEnabled('toc','assignment'))\">\n <mat-tab label=\"{{ 'apptocsinglepage.assignments' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"takeAssessmentDiv\">\n <ws-widget-app-batch-assignments [content]=\"content\"></ws-widget-app-batch-assignments>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Transcription Tab -->\n <mat-tab label=\"AI Tutor\" *ngIf=\"viewerPage && enableAITutorFlag && isMobile && (domainConfService?.isFeatureByPageEnabled('toc','transcription'))\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>AI Tutor</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <ng-container *ngIf=\"showAITutorPopup\">\n <div>\n <ws-widget-ai-tutor [content]=\"content?.identifier\"\n (closeAIPopup)=\"closeAIPopup($event)\"></ws-widget-ai-tutor>\n </div>\n </ng-container>\n </ng-template>\n </mat-tab>\n\n </mat-tab-group>\n</div>", styles: ["::ng-deep .content-tabs .mat-tab-body-content{overflow:hidden!important;background-color:#eff3f9}::ng-deep .content-tabs .mat-tab-body.mat-tab-body-active{overflow-y:hidden}:host ::ng-deep .sticky-mat-tabs .mat-tab-header{top:96px;z-index:1000;position:sticky;position:-webkit-sticky;background:#eff3f9}#commentsDiv,#samuhikCharchaDiv{margin:1rem auto;min-height:800px}@media screen and (max-width: 768px){.sticky-mat-tabs .mat-tab-header{top:120px;position:fixed;width:100%}.content-tabs{border-radius:16px 16px 0 0;box-shadow:0 -2px 9px #00000014;background-color:#fff}}::ng-deep .contentSticky .mat-tab-header{top:0!important}.ai-tutor-btn{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:115px}.ai-tutor-get-started{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:100%;min-height:80px}.ai-tutor-get-started-mobile{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:80px}.align-items-center{align-items:center}.w-160{width:160px}.w-98{width:98%}.font-weight-600{font-weight:600;line-height:1}.ai-tutor-label{color:#1b4ca1;font-weight:700}.section-dd{border-radius:32px;border:1px solid #1b4ca1;padding:12px 16px;color:#1b4ca1;width:auto;height:45px;font-size:14px;font-weight:700}::ng-deep .section-dd-container .mat-form-field-wrapper{padding-bottom:.5em!important}::ng-deep .section-dd-container .mat-form-field-infix{width:auto!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{color:#1b4ca1!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{top:35%!important;right:15%!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-input-element{padding-right:65px}::ng-deep .section-dd .mat-form-field-underline{display:none!important}.w-20{width:20%}::ng-deep .highlight{background-color:#ff0!important;font-weight:700!important}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:14px;width:20px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}.w-60{width:60%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px}.blue-underline{color:#1b4ca1;text-decoration:underline;font-weight:700}.transcript-control{color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}::ng-deep .multiline-select.mat-form-field{border-bottom:1px solid #1b4ca1!important}::ng-deep .multiline-select-option .mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#e3eeff!important;color:#1b4ca1!important;font-weight:700!important}.transcript-flex-container{display:flex;justify-content:flex-end;width:100%}.selected-option-content{color:#1b4ca1}.ml-5-per{margin-left:5%}.black-text{color:#000;word-wrap:break-word}.subtitle-time{width:20%;word-wrap:break-word}.subtitle-text-slot{width:74%}.w-subtitle-80{width:70%}.w-subtitle-20{width:30%}::ng-deep .mat-mdc-select-panel{background:#fff!important}@media (min-width: 1280px) and (max-width: 1280px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1056px) and (max-width: 1232px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1024px) and (max-width: 1024px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 768px) and (max-width: 1023px){.subtitle-time{width:25%}.subtitle-text-slot{width:75%}}@media (min-width: 360px) and (max-width: 360px){.subtitle-time,.subtitle-text-slot{width:50%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 361px) and (max-width: 540px){.subtitle-time,.subtitle-text-slot{width:50%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 541px) and (max-width: 767px){.subtitle-time{width:40%}.subtitle-text-slot{width:60%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 768px){::ng-deep .tab-group-container .mdc-tab{min-width:auto;max-width:max-content;text-align:left;justify-content:start;padding-left:24px;padding-right:24px}.w-60{width:60%}}:host ::ng-deep .tab-group-container ::ng-deep .mat-mdc-tab-header-pagination{z-index:1!important}:host ::ng-deep .transcript-flex-container .mat-mdc-text-field-wrapper{width:100%;padding:10px}:host ::ng-deep .multiline-select.mat-mdc-form-field .mdc-line-ripple{display:none!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mdc-line-ripple{display:block!important;height:4px!important;color:#1b4ca1!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mat-mdc-form-field-flex{background-color:#e3eeff!important}:host ::ng-deep .multiline-select .mat-mdc-select-arrow-wrapper{margin-right:10px}\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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11$2.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i11$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: i11$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i13$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: ["batchId", "content", "forPreview", "resumeData", "batchData", "skeletonLoader", "tocStructure", "config", "hierarchyMapData", "pathSet", "componentName", "isPreAssessment", "baseContentReadData", "contentReadData"] }, { kind: "component", type: AppTocTeachersNotesComponent, selector: "ws-widget-app-toc-teachers-notes", inputs: ["content", "notesDisplayType"] }, { kind: "component", type: AppTocBatchAssignmentsComponent, selector: "ws-widget-app-batch-assignments", inputs: ["content"] }, { kind: "component", type: SamuhikCharchaContentComponent, selector: "ws-widget-samuhik-charcha-content", inputs: ["content", "conditionData", "locked"], outputs: ["resumeContent"] }, { kind: "component", type: AiTutorComponent, selector: "ws-widget-ai-tutor", inputs: ["from", "content", "userJourney"], outputs: ["closeAIPopup"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }] }); }
|
|
12881
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentTocComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.UtilityService }, { token: LoadCheckService }, { token: i2$1.ConfigurationsService }, { token: i1$3.MatLegacyDialog }, { token: AppTocService }, { token: ActionService }, { token: i1$1.Router }, { token: i2$1.EventService }, { token: ViewerDataService }, { token: SamuhikCharchaService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12882
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: { content: "content", contentReadData: "contentReadData", initialRouteData: "initialRouteData", changeTab: "changeTab", baseContentReadData: "baseContentReadData", forPreview: "forPreview", contentTabFlag: "contentTabFlag", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", pathSet: "pathSet", fromViewer: "fromViewer", hierarchyMapData: "hierarchyMapData", condition: "condition", kparray: "kparray", selectedBatchData: "selectedBatchData", config: "config", componentName: "componentName", isEnrolled: "isEnrolled", playResourceId: "playResourceId", sideNavBarOpened: "sideNavBarOpened", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { playResumeForAI: "playResumeForAI", enrollUserToAI: "enrollUserToAI", trigerCompletionSurveyForm: "trigerCompletionSurveyForm", resumeContent: "resumeContent" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "tabElement", first: true, predicate: ["stickyMenu"], descendants: true }, { propertyName: "tabs", predicate: MatTab, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- && (content?.courseCategory !== courseCategory?.BLENDED_PROGRAM) -->\n<div class=\"ai-tutor-get-started\" *ngIf=\"!viewerPage && enableAITutorFlag && !isMobile\">\n <div class=\"flex flex-row align-items-center\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"64px\" width=\"64px\" />\n </div>\n <div class=\"flex flex-row align-items-center\">\n <div class=\"py-2\" >\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning tailored just\n for you.</span>\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\" [ngClass]=\"isMobile ? 'w-160' : ''\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div>\n </div>\n</div>\n<div class=\"tab-group-container\">\n <mat-tab-group (selectedTabChange)=\"handleTabChange($event)\" #stickyMenu [class.sticky-mat-tabs]=\"sticky\"\n [selectedIndex]=\"selectedTabIndex\" [ngClass]=\"{'content-tabs':!fromViewer,'contentSticky': forPreview}\">\n\n <!-- Transcription Tab -->\n <mat-tab label=\"Transcription\"\n *ngIf=\"viewerPage && enableTranscriptionFlag && vttLangArr?.length && subTitles?.length\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>Transcript</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <div class=\"disclaimer my-2\">\n <p class=\"py-2 px-2\">Disclaimer : These transcripts and subtitles are AI-generated and may contain\n errors.</p>\n </div>\n <div class=\"w-full ml-5 mr-5\" *ngIf=\"isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"height: auto; width: 100%;\"\n floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let lang of vttLangArr\"\n [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"ml-4 flex flex-row justify-end transcript-control\">\n <!-- <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" (change)=\"renderSelectedLanguageTranscription($event)\">\n <option [value]=\"lang?.language\" *ngFor=\"let lang of vttLangArr\" [selected]=\"lang?.label === transcriptionActiveLanguage\">\n <span *ngIf=\"transcriptionActiveLanguage === lang?.label\"> Transcript Language: </span> {{lang?.language | titlecase}} <span *ngIf=\"transcriptionActiveLanguage === lang?.language\">(Auto)</span>\n </option>\n </select>\n </mat-form-field> -->\n <div class=\"flex flex-row w-full\">\n <div [ngClass]=\"!isMobileForAI ? 'w-subtitle-80':'w-full'\">\n <div [ngClass]=\"!isMobileForAI ? 'ml-5-per' : ''\" *ngIf=\"subTitles && subTitles?.length\">\n <!-- Transcription content -->\n <ng-container *ngFor=\"let subtitle of subTitles\">\n <div class=\"flex flex-col my-2\">\n <div class=\"flex flex-row\">\n <div class=\"subtitle-time\">\n <p class=\"cursor-pointer\" (click)=\"playFromSlot(subtitle)\">\n <span class=\"pr-1 blue-underline\"> {{\n formatMsToVttTime(subtitle?.startTime) }} </span>\n <span class=\"black-text\">-</span>\n <span class=\"pl-1 blue-underline\">{{\n formatMsToVttTime(subtitle?.endTime) }}</span>\n </p>\n </div>\n <div class=\"ml-4 subtitle-text-slot mr-4\">\n <p class=\"black-text\" [innerHtml]=\"subtitle?.text\n | highlight : keywordToHighlight?.text\n : ((subtitle?.startTime / 1000) >= keywordToHighlight?.start\n && (subtitle?.endTime / 1000) <= keywordToHighlight?.end)\">\n </p>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"w-subtitle-20\" *ngIf=\"!isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\"\n style=\"height: auto; width: 100%;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\"\n *ngFor=\"let lang of vttLangArr\" [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n\n </div>\n <!-- <div class=\"flex flex-row align-items-center my-2\">\n <div>\n <p>0.00</p>\n </div>\n <div class=\"ml-4\">\n <p>AI for Digital Transformation: Machine Learning and Deep Learning Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </div>\n <div class=\"ml-4\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\">\n <option value=\"\">Transcription Language: English (Auto)</option>\n </select>\n </mat-form-field>\n </div>\n </div> -->\n\n </ng-template>\n </mat-tab>\n\n <!-- About Tab -->\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"ai-tutor-get-started-mobile my-2 ml-2\" *ngIf=\"!viewerPage && enableAITutorFlag && isMobile\">\n <div class=\"flex flex-row align-items-center w-98\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"48px\" width=\"48px\" />\n </div>\n <div class=\"flex flex-row align-items-center w-60\">\n <div class=\"py-2\">\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning\n tailored just for you.</span>\n </div>\n\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI\n Tutor</span></a>\n </div>\n\n </div>\n <!-- <div class=\"flex justify-end my-2 mx-2\">\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div> -->\n </div>\n <ws-widget-app-toc-about [fromViewer]=\"fromViewer\" [pathSet]=\"pathSet\" [content]=\"content\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"false\" [sticky]=\"sticky\"\n [selectedBatchData]=\"selectedBatchData\" [selectedTabValue]=\"selectedTabIndex\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [condition]=\"condition\" [kparray]=\"kparray\" [showReviews]=\"'true'\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\">\n </ws-widget-app-toc-about>\n </ng-template>\n </mat-tab>\n\n <!-- Content Tab -->\n <ng-container *ngIf=\"content?.children?.length\">\n <mat-tab label=\"{{ 'apptocsinglepage.content' | translate }}\" *ngIf=\"contentTabFlag\">\n <ng-template matTabContent>\n <ws-widget-app-toc-content [batchId]=\"batchId\" [componentName]=\"componentName\" [pathSet]=\"pathSet\"\n [content]=\"content\" [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"forPreview\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [hierarchyMapData]=\"hierarchyMapData\" [baseContentReadData]=\"baseContentReadData\">\n </ws-widget-app-toc-content>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"config?.commentsTab && !forPreview\">\n <mat-tab label=\"{{ 'apptocsinglepage.startDiscussion' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\"\n *ngIf=\"discussWidgetData && discussWidgetData?.newCommentSection?.commentTreeData?.entityId\">\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 </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n <ng-container\n *ngIf=\"config?.samuhikCharchaTab && condition && contentReadData?.eventLinked?.length > 0 && enableSamuhikCharchaTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.samuhikCharcha' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"samuhikCharchaDiv\">\n <ws-widget-samuhik-charcha-content [content]=\"contentReadData\" [conditionData]=\"condition\"\n (resumeContent)=\"resumeContentCall()\">\n </ws-widget-samuhik-charcha-content>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Teachers Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && teacherNotesFlag\">\n <mat-tab label=\"Teachers Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Teachers Resource'\"></ws-widget-app-toc-teachers-notes>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Reference Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && referenceNotesFlag\">\n <mat-tab label=\"Reference Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Reference Resource'\"></ws-widget-app-toc-teachers-notes>\n\n <!-- <ws-widget-app-toc-reference-notes [content]=\"contentReadData\"></ws-widget-app-toc-reference-notes> -->\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"showAssignmentsTab && !forPreview\">\n <mat-tab label=\"{{ 'apptocsinglepage.assignments' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"takeAssessmentDiv\">\n <ws-widget-app-batch-assignments [content]=\"content\"></ws-widget-app-batch-assignments>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Transcription Tab -->\n <mat-tab label=\"AI Tutor\" *ngIf=\"viewerPage && enableAITutorFlag && isMobile\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>AI Tutor</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <ng-container *ngIf=\"showAITutorPopup\">\n <div>\n <ws-widget-ai-tutor [content]=\"content?.identifier\"\n (closeAIPopup)=\"closeAIPopup($event)\"></ws-widget-ai-tutor>\n </div>\n </ng-container>\n </ng-template>\n </mat-tab>\n </mat-tab-group>\n</div>", styles: ["::ng-deep .content-tabs .mat-tab-body-content{overflow:hidden!important;background-color:#eff3f9}::ng-deep .content-tabs .mat-tab-body.mat-tab-body-active{overflow-y:hidden}:host ::ng-deep .sticky-mat-tabs .mat-tab-header{top:96px;z-index:1000;position:sticky;position:-webkit-sticky;background:#eff3f9}#commentsDiv,#samuhikCharchaDiv{margin:1rem auto;min-height:800px}@media screen and (max-width: 768px){.sticky-mat-tabs .mat-tab-header{top:120px;position:fixed;width:100%}.content-tabs{border-radius:16px 16px 0 0;box-shadow:0 -2px 9px #00000014;background-color:#fff}}::ng-deep .contentSticky .mat-tab-header{top:0!important}.ai-tutor-btn{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:115px}.ai-tutor-get-started{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:100%;min-height:80px}.ai-tutor-get-started-mobile{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:80px}.align-items-center{align-items:center}.w-160{width:160px}.w-98{width:98%}.font-weight-600{font-weight:600;line-height:1}.ai-tutor-label{color:#1b4ca1;font-weight:700}.section-dd{border-radius:32px;border:1px solid #1b4ca1;padding:12px 16px;color:#1b4ca1;width:auto;height:45px;font-size:14px;font-weight:700}::ng-deep .section-dd-container .mat-form-field-wrapper{padding-bottom:.5em!important}::ng-deep .section-dd-container .mat-form-field-infix{width:auto!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{color:#1b4ca1!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{top:35%!important;right:15%!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-input-element{padding-right:65px}::ng-deep .section-dd .mat-form-field-underline{display:none!important}.w-20{width:20%}::ng-deep .highlight{background-color:#ff0!important;font-weight:700!important}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:14px;width:20px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}.w-60{width:60%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px}.blue-underline{color:#1b4ca1;text-decoration:underline;font-weight:700}.transcript-control{color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}::ng-deep .multiline-select.mat-form-field{border-bottom:1px solid #1b4ca1!important}::ng-deep .multiline-select-option .mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#e3eeff!important;color:#1b4ca1!important;font-weight:700!important}.transcript-flex-container{display:flex;justify-content:flex-end;width:100%}.selected-option-content{color:#1b4ca1}.ml-5-per{margin-left:5%}.black-text{color:#000;word-wrap:break-word}.subtitle-time{width:20%;word-wrap:break-word}.subtitle-text-slot{width:74%}.w-subtitle-80{width:70%}.w-subtitle-20{width:30%}::ng-deep .mat-mdc-select-panel{background:#fff!important}@media (min-width: 1280px) and (max-width: 1280px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1056px) and (max-width: 1232px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1024px) and (max-width: 1024px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 768px) and (max-width: 1023px){.subtitle-time{width:25%}.subtitle-text-slot{width:75%}}@media (min-width: 360px) and (max-width: 360px){.subtitle-time,.subtitle-text-slot{width:50%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 361px) and (max-width: 540px){.subtitle-time,.subtitle-text-slot{width:50%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 541px) and (max-width: 767px){.subtitle-time{width:40%}.subtitle-text-slot{width:60%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 768px){::ng-deep .tab-group-container .mdc-tab{min-width:auto;max-width:max-content;text-align:left;justify-content:start;padding-left:24px;padding-right:24px}.w-60{width:60%}}:host ::ng-deep .tab-group-container ::ng-deep .mat-mdc-tab-header-pagination{z-index:1!important}:host ::ng-deep .transcript-flex-container .mat-mdc-text-field-wrapper{width:100%;padding:10px}:host ::ng-deep .multiline-select.mat-mdc-form-field .mdc-line-ripple{display:none!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mdc-line-ripple{display:block!important;height:4px!important;color:#1b4ca1!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mat-mdc-form-field-flex{background-color:#e3eeff!important}:host ::ng-deep .multiline-select .mat-mdc-select-arrow-wrapper{margin-right:10px}\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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11$2.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i11$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: i11$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i13$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: ["batchId", "content", "forPreview", "resumeData", "batchData", "skeletonLoader", "tocStructure", "config", "hierarchyMapData", "pathSet", "componentName", "isPreAssessment", "baseContentReadData", "contentReadData"] }, { kind: "component", type: AppTocTeachersNotesComponent, selector: "ws-widget-app-toc-teachers-notes", inputs: ["content", "notesDisplayType"] }, { kind: "component", type: AppTocBatchAssignmentsComponent, selector: "ws-widget-app-batch-assignments", inputs: ["content"] }, { kind: "component", type: SamuhikCharchaContentComponent, selector: "ws-widget-samuhik-charcha-content", inputs: ["content", "conditionData", "locked"], outputs: ["resumeContent"] }, { kind: "component", type: AiTutorComponent, selector: "ws-widget-ai-tutor", inputs: ["from", "content", "userJourney"], outputs: ["closeAIPopup"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }] }); }
|
|
12942
12883
|
}
|
|
12943
12884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentTocComponent, decorators: [{
|
|
12944
12885
|
type: Component,
|
|
12945
|
-
args: [{ selector: 'ws-widget-content-toc', template: "<!-- && (content?.courseCategory !== courseCategory?.BLENDED_PROGRAM) -->\n<div class=\"ai-tutor-get-started\" *ngIf=\"!viewerPage && enableAITutorFlag && !isMobile\">\n <div class=\"flex flex-row align-items-center\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"64px\" width=\"64px\" />\n </div>\n <div class=\"flex flex-row align-items-center\">\n <div class=\"py-2\" >\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning tailored just\n for you.</span>\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\" [ngClass]=\"isMobile ? 'w-160' : ''\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div>\n </div>\n</div>\n<div class=\"tab-group-container\">\n <mat-tab-group (selectedTabChange)=\"handleTabChange($event)\" #stickyMenu [class.sticky-mat-tabs]=\"sticky\"\n [selectedIndex]=\"selectedTabIndex\" [ngClass]=\"{'content-tabs':!fromViewer,'contentSticky': forPreview}\">\n\n <!-- Transcription Tab -->\n <mat-tab label=\"Transcription\"\n *ngIf=\"viewerPage && enableTranscriptionFlag && vttLangArr?.length && subTitles?.length\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>Transcript</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <div class=\"disclaimer my-2\">\n <p class=\"py-2 px-2\">Disclaimer : These transcripts and subtitles are AI-generated and may contain\n errors.</p>\n </div>\n <div class=\"w-full ml-5 mr-5\" *ngIf=\"isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"height: auto; width: 100%;\"\n floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let lang of vttLangArr\"\n [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"ml-4 flex flex-row justify-end transcript-control\">\n <!-- <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" (change)=\"renderSelectedLanguageTranscription($event)\">\n <option [value]=\"lang?.language\" *ngFor=\"let lang of vttLangArr\" [selected]=\"lang?.label === transcriptionActiveLanguage\">\n <span *ngIf=\"transcriptionActiveLanguage === lang?.label\"> Transcript Language: </span> {{lang?.language | titlecase}} <span *ngIf=\"transcriptionActiveLanguage === lang?.language\">(Auto)</span>\n </option>\n </select>\n </mat-form-field> -->\n <div class=\"flex flex-row w-full\">\n <div [ngClass]=\"!isMobileForAI ? 'w-subtitle-80':'w-full'\">\n <div [ngClass]=\"!isMobileForAI ? 'ml-5-per' : ''\" *ngIf=\"subTitles && subTitles?.length\">\n <!-- Transcription content -->\n <ng-container *ngFor=\"let subtitle of subTitles\">\n <div class=\"flex flex-col my-2\">\n <div class=\"flex flex-row\">\n <div class=\"subtitle-time\">\n <p class=\"cursor-pointer\" (click)=\"playFromSlot(subtitle)\">\n <span class=\"pr-1 blue-underline\"> {{\n formatMsToVttTime(subtitle?.startTime) }} </span>\n <span class=\"black-text\">-</span>\n <span class=\"pl-1 blue-underline\">{{\n formatMsToVttTime(subtitle?.endTime) }}</span>\n </p>\n </div>\n <div class=\"ml-4 subtitle-text-slot mr-4\">\n <p class=\"black-text\" [innerHtml]=\"subtitle?.text\n | highlight : keywordToHighlight?.text\n : ((subtitle?.startTime / 1000) >= keywordToHighlight?.start\n && (subtitle?.endTime / 1000) <= keywordToHighlight?.end)\">\n </p>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"w-subtitle-20\" *ngIf=\"!isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\"\n style=\"height: auto; width: 100%;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\"\n *ngFor=\"let lang of vttLangArr\" [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n\n </div>\n <!-- <div class=\"flex flex-row align-items-center my-2\">\n <div>\n <p>0.00</p>\n </div>\n <div class=\"ml-4\">\n <p>AI for Digital Transformation: Machine Learning and Deep Learning Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </div>\n <div class=\"ml-4\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\">\n <option value=\"\">Transcription Language: English (Auto)</option>\n </select>\n </mat-form-field>\n </div>\n </div> -->\n\n </ng-template>\n </mat-tab>\n\n <!-- About Tab -->\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"ai-tutor-get-started-mobile my-2 ml-2\" *ngIf=\"!viewerPage && enableAITutorFlag && isMobile && (domainConfService?.isFeatureByPageEnabled('toc','aiTutor'))\">\n <div class=\"flex flex-row align-items-center w-98\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"48px\" width=\"48px\" />\n </div>\n <div class=\"flex flex-row align-items-center w-60\">\n <div class=\"py-2\">\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning\n tailored just for you.</span>\n </div>\n\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI\n Tutor</span></a>\n </div>\n\n </div>\n <!-- <div class=\"flex justify-end my-2 mx-2\">\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div> -->\n </div>\n <ws-widget-app-toc-about [fromViewer]=\"fromViewer\" [pathSet]=\"pathSet\" [content]=\"content\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"false\" [sticky]=\"sticky\"\n [selectedBatchData]=\"selectedBatchData\" [selectedTabValue]=\"selectedTabIndex\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [condition]=\"condition\" [kparray]=\"kparray\" [showReviews]=\"'true'\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n [fromMDO]=\"fromMDO\">\n </ws-widget-app-toc-about>\n </ng-template>\n </mat-tab>\n\n <!-- Content Tab -->\n <ng-container *ngIf=\"content?.children?.length\">\n <mat-tab label=\"{{ 'apptocsinglepage.content' | translate }}\" *ngIf=\"contentTabFlag\">\n <ng-template matTabContent>\n <ws-widget-app-toc-content [batchId]=\"batchId\" [componentName]=\"componentName\" [pathSet]=\"pathSet\"\n [content]=\"content\" [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"forPreview\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [hierarchyMapData]=\"hierarchyMapData\" [baseContentReadData]=\"baseContentReadData\">\n </ws-widget-app-toc-content>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"config?.commentsTab && !forPreview && (domainConfService?.isFeatureByPageEnabled('toc','startDiscussion'))\">\n <mat-tab label=\"{{ 'apptocsinglepage.startDiscussion' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\"\n *ngIf=\"discussWidgetData && discussWidgetData?.newCommentSection?.commentTreeData?.entityId\">\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 </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container\n *ngIf=\"config?.samuhikCharchaTab && condition && contentReadData?.eventLinked?.length > 0 && enableSamuhikCharchaTab && (domainConfService?.isFeatureByPageEnabled('toc','samuhikCharcha'))\">\n <mat-tab label=\"{{ 'apptocsinglepage.samuhikCharcha' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"samuhikCharchaDiv\">\n <ws-widget-samuhik-charcha-content [content]=\"contentReadData\" [conditionData]=\"condition\"\n (resumeContent)=\"resumeContentCall()\">\n </ws-widget-samuhik-charcha-content>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Teachers Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && teacherNotesFlag\">\n <mat-tab label=\"Teachers Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Teachers Resource'\"></ws-widget-app-toc-teachers-notes>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Reference Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && referenceNotesFlag\">\n <mat-tab label=\"Reference Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Reference Resource'\"></ws-widget-app-toc-teachers-notes>\n\n <!-- <ws-widget-app-toc-reference-notes [content]=\"contentReadData\"></ws-widget-app-toc-reference-notes> -->\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"showAssignmentsTab && !forPreview && (domainConfService?.isFeatureByPageEnabled('toc','assignment'))\">\n <mat-tab label=\"{{ 'apptocsinglepage.assignments' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"takeAssessmentDiv\">\n <ws-widget-app-batch-assignments [content]=\"content\"></ws-widget-app-batch-assignments>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Transcription Tab -->\n <mat-tab label=\"AI Tutor\" *ngIf=\"viewerPage && enableAITutorFlag && isMobile && (domainConfService?.isFeatureByPageEnabled('toc','transcription'))\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>AI Tutor</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <ng-container *ngIf=\"showAITutorPopup\">\n <div>\n <ws-widget-ai-tutor [content]=\"content?.identifier\"\n (closeAIPopup)=\"closeAIPopup($event)\"></ws-widget-ai-tutor>\n </div>\n </ng-container>\n </ng-template>\n </mat-tab>\n\n </mat-tab-group>\n</div>", styles: ["::ng-deep .content-tabs .mat-tab-body-content{overflow:hidden!important;background-color:#eff3f9}::ng-deep .content-tabs .mat-tab-body.mat-tab-body-active{overflow-y:hidden}:host ::ng-deep .sticky-mat-tabs .mat-tab-header{top:96px;z-index:1000;position:sticky;position:-webkit-sticky;background:#eff3f9}#commentsDiv,#samuhikCharchaDiv{margin:1rem auto;min-height:800px}@media screen and (max-width: 768px){.sticky-mat-tabs .mat-tab-header{top:120px;position:fixed;width:100%}.content-tabs{border-radius:16px 16px 0 0;box-shadow:0 -2px 9px #00000014;background-color:#fff}}::ng-deep .contentSticky .mat-tab-header{top:0!important}.ai-tutor-btn{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:115px}.ai-tutor-get-started{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:100%;min-height:80px}.ai-tutor-get-started-mobile{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:80px}.align-items-center{align-items:center}.w-160{width:160px}.w-98{width:98%}.font-weight-600{font-weight:600;line-height:1}.ai-tutor-label{color:#1b4ca1;font-weight:700}.section-dd{border-radius:32px;border:1px solid #1b4ca1;padding:12px 16px;color:#1b4ca1;width:auto;height:45px;font-size:14px;font-weight:700}::ng-deep .section-dd-container .mat-form-field-wrapper{padding-bottom:.5em!important}::ng-deep .section-dd-container .mat-form-field-infix{width:auto!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{color:#1b4ca1!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{top:35%!important;right:15%!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-input-element{padding-right:65px}::ng-deep .section-dd .mat-form-field-underline{display:none!important}.w-20{width:20%}::ng-deep .highlight{background-color:#ff0!important;font-weight:700!important}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:14px;width:20px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}.w-60{width:60%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px}.blue-underline{color:#1b4ca1;text-decoration:underline;font-weight:700}.transcript-control{color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}::ng-deep .multiline-select.mat-form-field{border-bottom:1px solid #1b4ca1!important}::ng-deep .multiline-select-option .mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#e3eeff!important;color:#1b4ca1!important;font-weight:700!important}.transcript-flex-container{display:flex;justify-content:flex-end;width:100%}.selected-option-content{color:#1b4ca1}.ml-5-per{margin-left:5%}.black-text{color:#000;word-wrap:break-word}.subtitle-time{width:20%;word-wrap:break-word}.subtitle-text-slot{width:74%}.w-subtitle-80{width:70%}.w-subtitle-20{width:30%}::ng-deep .mat-mdc-select-panel{background:#fff!important}@media (min-width: 1280px) and (max-width: 1280px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1056px) and (max-width: 1232px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1024px) and (max-width: 1024px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 768px) and (max-width: 1023px){.subtitle-time{width:25%}.subtitle-text-slot{width:75%}}@media (min-width: 360px) and (max-width: 360px){.subtitle-time,.subtitle-text-slot{width:50%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 361px) and (max-width: 540px){.subtitle-time,.subtitle-text-slot{width:50%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 541px) and (max-width: 767px){.subtitle-time{width:40%}.subtitle-text-slot{width:60%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 768px){::ng-deep .tab-group-container .mdc-tab{min-width:auto;max-width:max-content;text-align:left;justify-content:start;padding-left:24px;padding-right:24px}.w-60{width:60%}}:host ::ng-deep .tab-group-container ::ng-deep .mat-mdc-tab-header-pagination{z-index:1!important}:host ::ng-deep .transcript-flex-container .mat-mdc-text-field-wrapper{width:100%;padding:10px}:host ::ng-deep .multiline-select.mat-mdc-form-field .mdc-line-ripple{display:none!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mdc-line-ripple{display:block!important;height:4px!important;color:#1b4ca1!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mat-mdc-form-field-flex{background-color:#e3eeff!important}:host ::ng-deep .multiline-select .mat-mdc-select-arrow-wrapper{margin-right:10px}\n"] }]
|
|
12946
|
-
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.UtilityService }, { type: LoadCheckService }, { type: i2$1.ConfigurationsService }, { type: i1$3.MatLegacyDialog }, { type: AppTocService }, { type: ActionService }, { type: i1$1.Router }, { type: i2$1.EventService }, { type: ViewerDataService }, { type: SamuhikCharchaService }, { type:
|
|
12886
|
+
args: [{ selector: 'ws-widget-content-toc', template: "<!-- && (content?.courseCategory !== courseCategory?.BLENDED_PROGRAM) -->\n<div class=\"ai-tutor-get-started\" *ngIf=\"!viewerPage && enableAITutorFlag && !isMobile\">\n <div class=\"flex flex-row align-items-center\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"64px\" width=\"64px\" />\n </div>\n <div class=\"flex flex-row align-items-center\">\n <div class=\"py-2\" >\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning tailored just\n for you.</span>\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\" [ngClass]=\"isMobile ? 'w-160' : ''\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div>\n </div>\n</div>\n<div class=\"tab-group-container\">\n <mat-tab-group (selectedTabChange)=\"handleTabChange($event)\" #stickyMenu [class.sticky-mat-tabs]=\"sticky\"\n [selectedIndex]=\"selectedTabIndex\" [ngClass]=\"{'content-tabs':!fromViewer,'contentSticky': forPreview}\">\n\n <!-- Transcription Tab -->\n <mat-tab label=\"Transcription\"\n *ngIf=\"viewerPage && enableTranscriptionFlag && vttLangArr?.length && subTitles?.length\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>Transcript</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <div class=\"disclaimer my-2\">\n <p class=\"py-2 px-2\">Disclaimer : These transcripts and subtitles are AI-generated and may contain\n errors.</p>\n </div>\n <div class=\"w-full ml-5 mr-5\" *ngIf=\"isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"height: auto; width: 100%;\"\n floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let lang of vttLangArr\"\n [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"ml-4 flex flex-row justify-end transcript-control\">\n <!-- <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" (change)=\"renderSelectedLanguageTranscription($event)\">\n <option [value]=\"lang?.language\" *ngFor=\"let lang of vttLangArr\" [selected]=\"lang?.label === transcriptionActiveLanguage\">\n <span *ngIf=\"transcriptionActiveLanguage === lang?.label\"> Transcript Language: </span> {{lang?.language | titlecase}} <span *ngIf=\"transcriptionActiveLanguage === lang?.language\">(Auto)</span>\n </option>\n </select>\n </mat-form-field> -->\n <div class=\"flex flex-row w-full\">\n <div [ngClass]=\"!isMobileForAI ? 'w-subtitle-80':'w-full'\">\n <div [ngClass]=\"!isMobileForAI ? 'ml-5-per' : ''\" *ngIf=\"subTitles && subTitles?.length\">\n <!-- Transcription content -->\n <ng-container *ngFor=\"let subtitle of subTitles\">\n <div class=\"flex flex-col my-2\">\n <div class=\"flex flex-row\">\n <div class=\"subtitle-time\">\n <p class=\"cursor-pointer\" (click)=\"playFromSlot(subtitle)\">\n <span class=\"pr-1 blue-underline\"> {{\n formatMsToVttTime(subtitle?.startTime) }} </span>\n <span class=\"black-text\">-</span>\n <span class=\"pl-1 blue-underline\">{{\n formatMsToVttTime(subtitle?.endTime) }}</span>\n </p>\n </div>\n <div class=\"ml-4 subtitle-text-slot mr-4\">\n <p class=\"black-text\" [innerHtml]=\"subtitle?.text\n | highlight : keywordToHighlight?.text\n : ((subtitle?.startTime / 1000) >= keywordToHighlight?.start\n && (subtitle?.endTime / 1000) <= keywordToHighlight?.end)\">\n </p>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"w-subtitle-20\" *ngIf=\"!isMobileForAI\">\n <div class=\"transcript-flex-container mt-2\">\n <mat-form-field class=\"multiline-select\" appearance=\"fill\"\n style=\"height: auto; width: 100%;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box pr-5\" [(value)]=\"selectedTranscriptionStyle\"\n (selectionChange)=\"renderSelectedLanguageTranscription($event)\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"selected-option-content px-5 py-2\">\n <div class=\"title\"><span\n *ngIf=\"transcriptionActiveLanguage === selectedTranscriptionStyle?.label\">\n <b>Transcript Language: </b></span>\n {{selectedTranscriptionStyle?.language | titlecase}} <span\n *ngIf=\"defaultTranscriptLanguage === selectedTranscriptionStyle?.label\">(Auto)</span>\n </div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\"\n *ngFor=\"let lang of vttLangArr\" [value]=\"lang\"\n [ngClass]=\"{'active-option': selectedTranscriptionStyle?.label === lang?.label}\">\n <div class=\"option-content\">\n <div class=\"title\">{{lang?.language | titlecase}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n\n </div>\n <!-- <div class=\"flex flex-row align-items-center my-2\">\n <div>\n <p>0.00</p>\n </div>\n <div class=\"ml-4\">\n <p>AI for Digital Transformation: Machine Learning and Deep Learning Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </div>\n <div class=\"ml-4\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\">\n <option value=\"\">Transcription Language: English (Auto)</option>\n </select>\n </mat-form-field>\n </div>\n </div> -->\n\n </ng-template>\n </mat-tab>\n\n <!-- About Tab -->\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"ai-tutor-get-started-mobile my-2 ml-2\" *ngIf=\"!viewerPage && enableAITutorFlag && isMobile\">\n <div class=\"flex flex-row align-items-center w-98\">\n <div class=\"px-2 py-2\">\n <img src=\"assets/icons/bot-chat-small.svg\" height=\"48px\" width=\"48px\" />\n </div>\n <div class=\"flex flex-row align-items-center w-60\">\n <div class=\"py-2\">\n <p class=\"font-weight-600\">Get Started with AI Tutor</p>\n <span>Get instant explanations, step-by-step learning guidance, and customised learning\n tailored just for you.</span>\n </div>\n\n </div>\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img\n src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI\n Tutor</span></a>\n </div>\n\n </div>\n <!-- <div class=\"flex justify-end my-2 mx-2\">\n <div class=\"ai-tutor-btn px-2 py-1\">\n <a href=\"javascript:void(0)\" (click)=\"showAiTutorConfirmPopup()\"><img src=\"assets/ai-tutor/ai-icon.svg\"> <span class=\"ai-tutor-label\">AI Tutor</span></a>\n </div>\n </div> -->\n </div>\n <ws-widget-app-toc-about [fromViewer]=\"fromViewer\" [pathSet]=\"pathSet\" [content]=\"content\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"false\" [sticky]=\"sticky\"\n [selectedBatchData]=\"selectedBatchData\" [selectedTabValue]=\"selectedTabIndex\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [condition]=\"condition\" [kparray]=\"kparray\" [showReviews]=\"'true'\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\">\n </ws-widget-app-toc-about>\n </ng-template>\n </mat-tab>\n\n <!-- Content Tab -->\n <ng-container *ngIf=\"content?.children?.length\">\n <mat-tab label=\"{{ 'apptocsinglepage.content' | translate }}\" *ngIf=\"contentTabFlag\">\n <ng-template matTabContent>\n <ws-widget-app-toc-content [batchId]=\"batchId\" [componentName]=\"componentName\" [pathSet]=\"pathSet\"\n [content]=\"content\" [tocStructure]=\"tocStructure\" [config]=\"config\" [forPreview]=\"forPreview\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [skeletonLoader]=\"skeletonLoader\"\n [hierarchyMapData]=\"hierarchyMapData\" [baseContentReadData]=\"baseContentReadData\">\n </ws-widget-app-toc-content>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"config?.commentsTab && !forPreview\">\n <mat-tab label=\"{{ 'apptocsinglepage.startDiscussion' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\"\n *ngIf=\"discussWidgetData && discussWidgetData?.newCommentSection?.commentTreeData?.entityId\">\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 </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n <ng-container\n *ngIf=\"config?.samuhikCharchaTab && condition && contentReadData?.eventLinked?.length > 0 && enableSamuhikCharchaTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.samuhikCharcha' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"samuhikCharchaDiv\">\n <ws-widget-samuhik-charcha-content [content]=\"contentReadData\" [conditionData]=\"condition\"\n (resumeContent)=\"resumeContentCall()\">\n </ws-widget-samuhik-charcha-content>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Teachers Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && teacherNotesFlag\">\n <mat-tab label=\"Teachers Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Teachers Resource'\"></ws-widget-app-toc-teachers-notes>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Reference Note Tab -->\n <ng-container *ngIf=\"contentReadData?.referenceNodes && referenceNotesFlag\">\n <mat-tab label=\"Reference Note\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"teachersNoteDiv\">\n <ws-widget-app-toc-teachers-notes [content]=\"contentReadData\"\n [notesDisplayType]=\"'Reference Resource'\"></ws-widget-app-toc-teachers-notes>\n\n <!-- <ws-widget-app-toc-reference-notes [content]=\"contentReadData\"></ws-widget-app-toc-reference-notes> -->\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <ng-container *ngIf=\"showAssignmentsTab && !forPreview\">\n <mat-tab label=\"{{ 'apptocsinglepage.assignments' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col ratings-div mt-5\" id=\"takeAssessmentDiv\">\n <ws-widget-app-batch-assignments [content]=\"content\"></ws-widget-app-batch-assignments>\n </div>\n </ng-template>\n </mat-tab>\n </ng-container>\n\n <!-- Transcription Tab -->\n <mat-tab label=\"AI Tutor\" *ngIf=\"viewerPage && enableAITutorFlag && isMobile\">\n <ng-template mat-tab-label>\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span>AI Tutor</span>\n </div>\n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n\n </ng-template>\n <ng-template matTabContent>\n <ng-container *ngIf=\"showAITutorPopup\">\n <div>\n <ws-widget-ai-tutor [content]=\"content?.identifier\"\n (closeAIPopup)=\"closeAIPopup($event)\"></ws-widget-ai-tutor>\n </div>\n </ng-container>\n </ng-template>\n </mat-tab>\n </mat-tab-group>\n</div>", styles: ["::ng-deep .content-tabs .mat-tab-body-content{overflow:hidden!important;background-color:#eff3f9}::ng-deep .content-tabs .mat-tab-body.mat-tab-body-active{overflow-y:hidden}:host ::ng-deep .sticky-mat-tabs .mat-tab-header{top:96px;z-index:1000;position:sticky;position:-webkit-sticky;background:#eff3f9}#commentsDiv,#samuhikCharchaDiv{margin:1rem auto;min-height:800px}@media screen and (max-width: 768px){.sticky-mat-tabs .mat-tab-header{top:120px;position:fixed;width:100%}.content-tabs{border-radius:16px 16px 0 0;box-shadow:0 -2px 9px #00000014;background-color:#fff}}::ng-deep .contentSticky .mat-tab-header{top:0!important}.ai-tutor-btn{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:115px}.ai-tutor-get-started{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:100%;min-height:80px}.ai-tutor-get-started-mobile{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:80px}.align-items-center{align-items:center}.w-160{width:160px}.w-98{width:98%}.font-weight-600{font-weight:600;line-height:1}.ai-tutor-label{color:#1b4ca1;font-weight:700}.section-dd{border-radius:32px;border:1px solid #1b4ca1;padding:12px 16px;color:#1b4ca1;width:auto;height:45px;font-size:14px;font-weight:700}::ng-deep .section-dd-container .mat-form-field-wrapper{padding-bottom:.5em!important}::ng-deep .section-dd-container .mat-form-field-infix{width:auto!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{color:#1b4ca1!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-form-field-infix:after{top:35%!important;right:15%!important}::ng-deep .section-dd-container .mat-form-field-type-mat-native-select .mat-input-element{padding-right:65px}::ng-deep .section-dd .mat-form-field-underline{display:none!important}.w-20{width:20%}::ng-deep .highlight{background-color:#ff0!important;font-weight:700!important}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:14px;width:20px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}.w-60{width:60%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px}.blue-underline{color:#1b4ca1;text-decoration:underline;font-weight:700}.transcript-control{color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}::ng-deep .multiline-select.mat-form-field{border-bottom:1px solid #1b4ca1!important}::ng-deep .multiline-select-option .mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#e3eeff!important;color:#1b4ca1!important;font-weight:700!important}.transcript-flex-container{display:flex;justify-content:flex-end;width:100%}.selected-option-content{color:#1b4ca1}.ml-5-per{margin-left:5%}.black-text{color:#000;word-wrap:break-word}.subtitle-time{width:20%;word-wrap:break-word}.subtitle-text-slot{width:74%}.w-subtitle-80{width:70%}.w-subtitle-20{width:30%}::ng-deep .mat-mdc-select-panel{background:#fff!important}@media (min-width: 1280px) and (max-width: 1280px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1056px) and (max-width: 1232px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 1024px) and (max-width: 1024px){.subtitle-time{width:30%}.subtitle-text-slot{width:70%}}@media (min-width: 768px) and (max-width: 1023px){.subtitle-time{width:25%}.subtitle-text-slot{width:75%}}@media (min-width: 360px) and (max-width: 360px){.subtitle-time,.subtitle-text-slot{width:50%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 361px) and (max-width: 540px){.subtitle-time,.subtitle-text-slot{width:50%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 541px) and (max-width: 767px){.subtitle-time{width:40%}.subtitle-text-slot{width:60%}.w-subtitle-20{width:40%}.disclaimer{background-color:#f3962f33;color:#000000de;font-family:Lato;font-size:16px;font-weight:500;border-radius:8px;margin:10px}}@media (min-width: 768px){::ng-deep .tab-group-container .mdc-tab{min-width:auto;max-width:max-content;text-align:left;justify-content:start;padding-left:24px;padding-right:24px}.w-60{width:60%}}:host ::ng-deep .tab-group-container ::ng-deep .mat-mdc-tab-header-pagination{z-index:1!important}:host ::ng-deep .transcript-flex-container .mat-mdc-text-field-wrapper{width:100%;padding:10px}:host ::ng-deep .multiline-select.mat-mdc-form-field .mdc-line-ripple{display:none!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mdc-line-ripple{display:block!important;height:4px!important;color:#1b4ca1!important}:host ::ng-deep .multiline-select.mat-mdc-form-field:hover .mat-mdc-form-field-flex{background-color:#e3eeff!important}:host ::ng-deep .multiline-select .mat-mdc-select-arrow-wrapper{margin-right:10px}\n"] }]
|
|
12887
|
+
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.UtilityService }, { type: LoadCheckService }, { type: i2$1.ConfigurationsService }, { type: i1$3.MatLegacyDialog }, { type: AppTocService }, { type: ActionService }, { type: i1$1.Router }, { type: i2$1.EventService }, { type: ViewerDataService }, { type: SamuhikCharchaService }, { type: undefined, decorators: [{
|
|
12947
12888
|
type: Inject,
|
|
12948
12889
|
args: ['environment']
|
|
12949
12890
|
}] }]; }, propDecorators: { content: [{
|
|
@@ -13000,8 +12941,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13000
12941
|
type: Input
|
|
13001
12942
|
}], lockCertificate: [{
|
|
13002
12943
|
type: Input
|
|
13003
|
-
}], fromMDO: [{
|
|
13004
|
-
type: Input
|
|
13005
12944
|
}], playResumeForAI: [{
|
|
13006
12945
|
type: Output
|
|
13007
12946
|
}], enrollUserToAI: [{
|
|
@@ -14286,7 +14225,7 @@ let AppTocHomeComponent$1 = class AppTocHomeComponent {
|
|
|
14286
14225
|
}
|
|
14287
14226
|
constructor(route, router, contentSvc, tocSvc, loggerSvc, configSvc, domSanitizer, authAccessControlSvc, snackBar, dialog, mobileAppsSvc, utilitySvc,
|
|
14288
14227
|
// private progressSvc: ContentProgressService,
|
|
14289
|
-
actionSVC, viewerSvc, ratingSvc, telemetryService, translate, langtranslations, events, matSnackBar, loadCheckService, handleClaimService, resetRatingsService, timerService, enrollSvc, contentLibSvc, dataTransferSvc, matSnackbarNew, userServiceLib, netCoreService,
|
|
14228
|
+
actionSVC, viewerSvc, ratingSvc, telemetryService, translate, langtranslations, events, matSnackBar, loadCheckService, handleClaimService, resetRatingsService, timerService, enrollSvc, contentLibSvc, dataTransferSvc, matSnackbarNew, userServiceLib, netCoreService, environment) {
|
|
14290
14229
|
this.route = route;
|
|
14291
14230
|
this.router = router;
|
|
14292
14231
|
this.contentSvc = contentSvc;
|
|
@@ -14317,7 +14256,6 @@ let AppTocHomeComponent$1 = class AppTocHomeComponent {
|
|
|
14317
14256
|
this.matSnackbarNew = matSnackbarNew;
|
|
14318
14257
|
this.userServiceLib = userServiceLib;
|
|
14319
14258
|
this.netCoreService = netCoreService;
|
|
14320
|
-
this.domainConfService = domainConfService;
|
|
14321
14259
|
this.show = false;
|
|
14322
14260
|
this.changeTab = false;
|
|
14323
14261
|
this.skeletonLoader = true;
|
|
@@ -16403,13 +16341,13 @@ let AppTocHomeComponent$1 = class AppTocHomeComponent {
|
|
|
16403
16341
|
console.log('Selected language:', lang);
|
|
16404
16342
|
// Add your language change logic here
|
|
16405
16343
|
}
|
|
16406
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeComponent, 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: AccessControlService }, { token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.UtilityService }, { token: ActionService }, { token: ViewerUtilService }, { token: RatingService }, { token: i2$1.TelemetryService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.EventService }, { token: i7.MatLegacySnackBar }, { 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:
|
|
16407
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeComponent, selector: "ws-app-app-toc-home", inputs: { forPreview: "forPreview" }, 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: "<!-- \n Main Container - Displays course/content details with enrollment functionality\n Only displays content if courseID is available, otherwise shows \"not found\" message\n-->\n<ng-container *ngIf=\"courseID else noDataFound\">\n <!-- \n ENROLLMENT TEMPLATE - Handles all enrollment/start/resume button functionality\n Used in multiple places throughout the template\n -->\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- SECTION: Regular course enrollment buttons -->\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.PROGRAM\n && content?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && content?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n content?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <!-- START/RESUME button for granted courses -->\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(content?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(content?.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 {{ resumeData ? translateLabels('resume', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content.completionPercentage === 100 || certData\">\n {{ resumeData ? translateLabels('Start again', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <!-- TAKE ASSESSMENT button (for post assessments) -->\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\" >{{ 'apptochome.takeAssessment' | translate }}</ng-container>\n </button>\n\n <!-- Commented karma points panel functionality -->\n </ng-container>\n \n <!-- ENROLL button for courses that require enrollment -->\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) && \n !( content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( content?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(content?.primaryCategory === primaryCategory.PROGRAM) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\" (click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL - Used across multiple sections -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM pre-enrollment functionality -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\" *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container >\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n \n <!-- SECTION: BLENDED_PROGRAM pre-enrollment completion message -->\n <ng-container *ngIf=\"content?.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\" class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: PROGRAM & MANDATORY_COURSE_GOAL handling -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.PROGRAM || content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n \n <!-- SECTION: Moderated program enrollment handling -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\" >\n <!-- ENROLL BUTTON LABEL -->\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n \n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\" (programEnrollCall)=\"programEnrollCall($event)\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: No batches message -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n\n <!-- SECTION: Status messages for non-moderated programs -->\n <ng-container *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && content?.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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Batch status messages for moderated programs -->\n <ng-container *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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: In-progress batch with resume/start functionality -->\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (content?.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) ? 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 }}</ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: CURATED_PROGRAM in-progress handling -->\n <ng-container\n *ngIf=\"isBatchInProgress && (content?.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) ? 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') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Loading state for enrollment button -->\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 <!-- SECTION: CURATED_PROGRAM enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"(click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: STANDALONE_ASSESSMENT enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\" *ngIf=\"!forPreview || isInIFrame\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }} \n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: INVITE-ONLY STANDALONE_ASSESSMENT message --> \n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.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 }} </span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Enrolled INVITE-ONLY STANDALONE_ASSESSMENT take test button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Status messages for INVITE-ONLY STANDALONE_ASSESSMENT -->\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && content?.courseCategory === 'Invite-Only Assessment'\">\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' && content?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\" >{{ 'apptochome.batchWillStart' | translate }} {{getStartDate}}!</span>\n </ng-container>\n \n <!-- SECTION: Regular STANDALONE_ASSESSMENT enrolled take test button -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM workflow status -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <!-- Review status message -->\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN)\">\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\n <!-- Approved BLENDED_PROGRAM start/resume button -->\n <ng-container>\n <a\n *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \" (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) ? 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') : translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: External registration link -->\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\" >{{ 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <!-- \n PROGRESS FUNCTIONALITY TEMPLATE\n Displays progress bar and rating button functionality\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=\"content?.completionPercentage >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\" (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 <!-- \n MAIN CONTENT DISPLAY SECTION\n Banner, details, and content layout\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=\"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'\" [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n \n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\" [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 MMM, y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n\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\">{{ handleCapitalize(content?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.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\" *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 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 }}</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 && content?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{ content?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</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=\"content?.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 }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate }}</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\"\n (mouseleave)=\"isReleventBtnHovered = false\" (click)=\"handleAcceptRelevent()\">\n <img\n [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 <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\" [tocStructure]=\"tocStructure\" \n [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\" [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\" \n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\" [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}\" [kparray]=\"kparray\"\n (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\" [contentReadData]=\"contentReadData\"></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 <!-- 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\" [ngStyle]=\"{\n 'background-image': 'url(' + content?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\" [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\" [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=\"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=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"canShare && !forPreview && (domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\">\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(content?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-4\" *ngIf=\"content && content?.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 || '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 *ngIf=\"timer && timer.days >= 0 && content?.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 }}</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 && preAssessmentCompletionStatus\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\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]=\"content?.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]=\"content?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container *ngIf=\"actionBtnStatus !== 'wait' && content?.status !== 'Deleted' && content?.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)\" [content] = \"content\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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'\" [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'\" [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'\" [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'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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\" [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"></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'\" [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'\" [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\" [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\" *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'\" [photoUrl]=\"author?.photo || ''\"\n [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(content?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.curators' | translate }}</div>\n <div class=\"flex flex-row gap-4\" *ngFor=\"let creator of handleParseJsonData(content?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"author?.photo || ''\"\n [name]=\"creator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div> -->\n <div class=\"flex flex-col gap-3\" *ngIf=\"content?.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=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" class=\"mat-icon\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"content?.createdFor?.length\" (click)=\"raiseTelemeteryForProvider(content?.source, content?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', content?.source, content?.createdFor[0], 'micro-sites']\">{{ handleCapitalize(content?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!content?.createdFor?.length\">{{ handleCapitalize(content?.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\n <!-- Mobile enrollment button container -->\n <div class=\"mobile-enroll-div\" [ngClass]=\"{'bg-white': content?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && content?.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)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <!-- Reuse enrollment functionality template for mobile -->\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\" (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n</ng-container>\n\n<!-- Template for when no data is found -->\n<ng-template #noDataFound>\n <div 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>\n</ng-template>\n\n<!-- Authentication view templates -->\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <a (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\" [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n</ng-template>\n\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container\n *ngIf=\"forPreview && content?.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>\n", styles: [".source-text{color:#ffffffb3}.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}.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}.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{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:#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}.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:#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,.mobile-enroll-div .preenrolldone-btn{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}.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}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
16344
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeComponent, 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: AccessControlService }, { token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.UtilityService }, { token: ActionService }, { token: ViewerUtilService }, { token: RatingService }, { token: i2$1.TelemetryService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.EventService }, { token: i7.MatLegacySnackBar }, { 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: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeComponent, selector: "ws-app-app-toc-home", inputs: { forPreview: "forPreview" }, 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: "<!-- \n Main Container - Displays course/content details with enrollment functionality\n Only displays content if courseID is available, otherwise shows \"not found\" message\n-->\n<ng-container *ngIf=\"courseID else noDataFound\">\n <!-- \n ENROLLMENT TEMPLATE - Handles all enrollment/start/resume button functionality\n Used in multiple places throughout the template\n -->\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- SECTION: Regular course enrollment buttons -->\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.PROGRAM\n && content?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && content?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n content?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <!-- START/RESUME button for granted courses -->\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(content?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(content?.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 {{ resumeData ? translateLabels('resume', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content.completionPercentage === 100 || certData\">\n {{ resumeData ? translateLabels('Start again', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <!-- TAKE ASSESSMENT button (for post assessments) -->\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\" >{{ 'apptochome.takeAssessment' | translate }}</ng-container>\n </button>\n\n <!-- Commented karma points panel functionality -->\n </ng-container>\n \n <!-- ENROLL button for courses that require enrollment -->\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) && \n !( content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( content?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(content?.primaryCategory === primaryCategory.PROGRAM) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\" (click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL - Used across multiple sections -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM pre-enrollment functionality -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\" *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container >\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n \n <!-- SECTION: BLENDED_PROGRAM pre-enrollment completion message -->\n <ng-container *ngIf=\"content?.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\" class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: PROGRAM & MANDATORY_COURSE_GOAL handling -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.PROGRAM || content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n \n <!-- SECTION: Moderated program enrollment handling -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\" >\n <!-- ENROLL BUTTON LABEL -->\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n \n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\" (programEnrollCall)=\"programEnrollCall($event)\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: No batches message -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n\n <!-- SECTION: Status messages for non-moderated programs -->\n <ng-container *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && content?.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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Batch status messages for moderated programs -->\n <ng-container *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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: In-progress batch with resume/start functionality -->\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (content?.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) ? 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 }}</ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: CURATED_PROGRAM in-progress handling -->\n <ng-container\n *ngIf=\"isBatchInProgress && (content?.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) ? 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') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Loading state for enrollment button -->\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 <!-- SECTION: CURATED_PROGRAM enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"(click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: STANDALONE_ASSESSMENT enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\" *ngIf=\"!forPreview || isInIFrame\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }} \n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: INVITE-ONLY STANDALONE_ASSESSMENT message --> \n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.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 }} </span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Enrolled INVITE-ONLY STANDALONE_ASSESSMENT take test button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Status messages for INVITE-ONLY STANDALONE_ASSESSMENT -->\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && content?.courseCategory === 'Invite-Only Assessment'\">\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' && content?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\" >{{ 'apptochome.batchWillStart' | translate }} {{getStartDate}}!</span>\n </ng-container>\n \n <!-- SECTION: Regular STANDALONE_ASSESSMENT enrolled take test button -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM workflow status -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <!-- Review status message -->\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN)\">\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\n <!-- Approved BLENDED_PROGRAM start/resume button -->\n <ng-container>\n <a\n *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \" (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) ? 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') : translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: External registration link -->\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\" >{{ 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <!-- \n PROGRESS FUNCTIONALITY TEMPLATE\n Displays progress bar and rating button functionality\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=\"content?.completionPercentage >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\" (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 <!-- \n MAIN CONTENT DISPLAY SECTION\n Banner, details, and content layout\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=\"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'\" [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n \n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\" [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 MMM, y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n\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\">{{ handleCapitalize(content?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.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\" *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 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 }}</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 && content?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{ content?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</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=\"content?.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 }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate }}</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\"\n (mouseleave)=\"isReleventBtnHovered = false\" (click)=\"handleAcceptRelevent()\">\n <img\n [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 <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\" [tocStructure]=\"tocStructure\" \n [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\" [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\" \n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\" [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}\" [kparray]=\"kparray\"\n (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\" [contentReadData]=\"contentReadData\"></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 <!-- 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\" [ngStyle]=\"{\n 'background-image': 'url(' + content?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\" [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\" [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=\"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=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\" *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(content?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-4\" *ngIf=\"content && content?.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 || '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 *ngIf=\"timer && timer.days >= 0 && content?.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 }}</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 && preAssessmentCompletionStatus\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\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]=\"content?.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]=\"content?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container *ngIf=\"actionBtnStatus !== 'wait' && content?.status !== 'Deleted' && content?.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)\" [content] = \"content\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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'\" [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'\" [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'\" [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'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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\" [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"></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'\" [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'\" [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\" [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\" *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'\" [photoUrl]=\"author?.photo || ''\"\n [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(content?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.curators' | translate }}</div>\n <div class=\"flex flex-row gap-4\" *ngFor=\"let creator of handleParseJsonData(content?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"author?.photo || ''\"\n [name]=\"creator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div> -->\n <div class=\"flex flex-col gap-3\" *ngIf=\"content?.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=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" class=\"mat-icon\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"content?.createdFor?.length\" (click)=\"raiseTelemeteryForProvider(content?.source, content?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', content?.source, content?.createdFor[0], 'micro-sites']\">{{ handleCapitalize(content?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!content?.createdFor?.length\">{{ handleCapitalize(content?.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\n <!-- Mobile enrollment button container -->\n <div class=\"mobile-enroll-div\" [ngClass]=\"{'bg-white': content?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && content?.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)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <!-- Reuse enrollment functionality template for mobile -->\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\" (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n</ng-container>\n\n<!-- Template for when no data is found -->\n<ng-template #noDataFound>\n <div 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>\n</ng-template>\n\n<!-- Authentication view templates -->\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <a (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\" [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n</ng-template>\n\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container\n *ngIf=\"forPreview && content?.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>\n", styles: [".source-text{color:#ffffffb3}.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}.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}.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{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:#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}.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:#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,.mobile-enroll-div .preenrolldone-btn{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}.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}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
16408
16346
|
};
|
|
16409
16347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeComponent$1, decorators: [{
|
|
16410
16348
|
type: Component,
|
|
16411
|
-
args: [{ selector: 'ws-app-app-toc-home', encapsulation: ViewEncapsulation.None, template: "<!-- \n Main Container - Displays course/content details with enrollment functionality\n Only displays content if courseID is available, otherwise shows \"not found\" message\n-->\n<ng-container *ngIf=\"courseID else noDataFound\">\n <!-- \n ENROLLMENT TEMPLATE - Handles all enrollment/start/resume button functionality\n Used in multiple places throughout the template\n -->\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- SECTION: Regular course enrollment buttons -->\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.PROGRAM\n && content?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && content?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n content?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <!-- START/RESUME button for granted courses -->\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(content?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(content?.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 {{ resumeData ? translateLabels('resume', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content.completionPercentage === 100 || certData\">\n {{ resumeData ? translateLabels('Start again', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <!-- TAKE ASSESSMENT button (for post assessments) -->\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\" >{{ 'apptochome.takeAssessment' | translate }}</ng-container>\n </button>\n\n <!-- Commented karma points panel functionality -->\n </ng-container>\n \n <!-- ENROLL button for courses that require enrollment -->\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) && \n !( content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( content?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(content?.primaryCategory === primaryCategory.PROGRAM) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\" (click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL - Used across multiple sections -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM pre-enrollment functionality -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\" *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container >\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n \n <!-- SECTION: BLENDED_PROGRAM pre-enrollment completion message -->\n <ng-container *ngIf=\"content?.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\" class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: PROGRAM & MANDATORY_COURSE_GOAL handling -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.PROGRAM || content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n \n <!-- SECTION: Moderated program enrollment handling -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\" >\n <!-- ENROLL BUTTON LABEL -->\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n \n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\" (programEnrollCall)=\"programEnrollCall($event)\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: No batches message -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n\n <!-- SECTION: Status messages for non-moderated programs -->\n <ng-container *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && content?.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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Batch status messages for moderated programs -->\n <ng-container *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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: In-progress batch with resume/start functionality -->\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (content?.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) ? 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 }}</ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: CURATED_PROGRAM in-progress handling -->\n <ng-container\n *ngIf=\"isBatchInProgress && (content?.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) ? 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') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Loading state for enrollment button -->\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 <!-- SECTION: CURATED_PROGRAM enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"(click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: STANDALONE_ASSESSMENT enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\" *ngIf=\"!forPreview || isInIFrame\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }} \n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: INVITE-ONLY STANDALONE_ASSESSMENT message --> \n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.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 }} </span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Enrolled INVITE-ONLY STANDALONE_ASSESSMENT take test button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Status messages for INVITE-ONLY STANDALONE_ASSESSMENT -->\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && content?.courseCategory === 'Invite-Only Assessment'\">\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' && content?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\" >{{ 'apptochome.batchWillStart' | translate }} {{getStartDate}}!</span>\n </ng-container>\n \n <!-- SECTION: Regular STANDALONE_ASSESSMENT enrolled take test button -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM workflow status -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <!-- Review status message -->\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN)\">\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\n <!-- Approved BLENDED_PROGRAM start/resume button -->\n <ng-container>\n <a\n *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \" (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) ? 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') : translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: External registration link -->\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\" >{{ 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <!-- \n PROGRESS FUNCTIONALITY TEMPLATE\n Displays progress bar and rating button functionality\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=\"content?.completionPercentage >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\" (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 <!-- \n MAIN CONTENT DISPLAY SECTION\n Banner, details, and content layout\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=\"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'\" [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n \n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\" [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 MMM, y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n\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\">{{ handleCapitalize(content?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.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\" *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 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 }}</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 && content?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{ content?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</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=\"content?.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 }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate }}</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\"\n (mouseleave)=\"isReleventBtnHovered = false\" (click)=\"handleAcceptRelevent()\">\n <img\n [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 <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\" [tocStructure]=\"tocStructure\" \n [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\" [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\" \n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\" [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}\" [kparray]=\"kparray\"\n (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\" [contentReadData]=\"contentReadData\"></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 <!-- 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\" [ngStyle]=\"{\n 'background-image': 'url(' + content?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\" [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\" [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=\"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=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"canShare && !forPreview && (domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\">\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(content?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-4\" *ngIf=\"content && content?.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 || '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 *ngIf=\"timer && timer.days >= 0 && content?.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 }}</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 && preAssessmentCompletionStatus\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\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]=\"content?.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]=\"content?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container *ngIf=\"actionBtnStatus !== 'wait' && content?.status !== 'Deleted' && content?.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)\" [content] = \"content\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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'\" [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'\" [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'\" [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'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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\" [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"></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'\" [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'\" [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\" [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\" *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'\" [photoUrl]=\"author?.photo || ''\"\n [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(content?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.curators' | translate }}</div>\n <div class=\"flex flex-row gap-4\" *ngFor=\"let creator of handleParseJsonData(content?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"author?.photo || ''\"\n [name]=\"creator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div> -->\n <div class=\"flex flex-col gap-3\" *ngIf=\"content?.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=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" class=\"mat-icon\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"content?.createdFor?.length\" (click)=\"raiseTelemeteryForProvider(content?.source, content?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', content?.source, content?.createdFor[0], 'micro-sites']\">{{ handleCapitalize(content?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!content?.createdFor?.length\">{{ handleCapitalize(content?.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\n <!-- Mobile enrollment button container -->\n <div class=\"mobile-enroll-div\" [ngClass]=\"{'bg-white': content?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && content?.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)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <!-- Reuse enrollment functionality template for mobile -->\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\" (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n</ng-container>\n\n<!-- Template for when no data is found -->\n<ng-template #noDataFound>\n <div 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>\n</ng-template>\n\n<!-- Authentication view templates -->\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <a (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\" [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n</ng-template>\n\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container\n *ngIf=\"forPreview && content?.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>\n", styles: [".source-text{color:#ffffffb3}.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}.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}.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{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:#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}.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:#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,.mobile-enroll-div .preenrolldone-btn{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}.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}\n"] }]
|
|
16412
|
-
}], 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: AccessControlService }, { type: i7.MatLegacySnackBar }, { type: i1$3.MatLegacyDialog }, { type: MobileAppsService }, { type: i2$1.UtilityService }, { type: ActionService }, { type: ViewerUtilService }, { type: RatingService }, { type: i2$1.TelemetryService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.EventService }, { type: i7.MatLegacySnackBar }, { 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:
|
|
16349
|
+
args: [{ selector: 'ws-app-app-toc-home', encapsulation: ViewEncapsulation.None, template: "<!-- \n Main Container - Displays course/content details with enrollment functionality\n Only displays content if courseID is available, otherwise shows \"not found\" message\n-->\n<ng-container *ngIf=\"courseID else noDataFound\">\n <!-- \n ENROLLMENT TEMPLATE - Handles all enrollment/start/resume button functionality\n Used in multiple places throughout the template\n -->\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- SECTION: Regular course enrollment buttons -->\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.PROGRAM\n && content?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && content?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n content?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <!-- START/RESUME button for granted courses -->\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(content?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(content?.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 {{ resumeData ? translateLabels('resume', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content.completionPercentage === 100 || certData\">\n {{ resumeData ? translateLabels('Start again', 'apptochome') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <!-- TAKE ASSESSMENT button (for post assessments) -->\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\" >{{ 'apptochome.takeAssessment' | translate }}</ng-container>\n </button>\n\n <!-- Commented karma points panel functionality -->\n </ng-container>\n \n <!-- ENROLL button for courses that require enrollment -->\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) && \n !( content?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( content?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(content?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(content?.primaryCategory === primaryCategory.PROGRAM) &&\n !(content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"content?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\" (click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL - Used across multiple sections -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM pre-enrollment functionality -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\" *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container >\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n \n <!-- SECTION: BLENDED_PROGRAM pre-enrollment completion message -->\n <ng-container *ngIf=\"content?.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\" class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: PROGRAM & MANDATORY_COURSE_GOAL handling -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.PROGRAM || content?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n \n <!-- SECTION: Moderated program enrollment handling -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\" >\n <!-- ENROLL BUTTON LABEL -->\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container *ngIf=\"((content?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n \n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\" (programEnrollCall)=\"programEnrollCall($event)\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: No batches message -->\n <ng-container *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n\n <!-- SECTION: Status messages for non-moderated programs -->\n <ng-container *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && content?.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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Batch status messages for moderated programs -->\n <ng-container *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 }} {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: In-progress batch with resume/start functionality -->\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (content?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (content?.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) ? 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 }}</ng-container>\n </a>\n <!-- Commented karma points panel functionality -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: CURATED_PROGRAM in-progress handling -->\n <ng-container\n *ngIf=\"isBatchInProgress && (content?.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) ? 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') : translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Loading state for enrollment button -->\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 <!-- SECTION: CURATED_PROGRAM enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"(click)=\"handleAutoBatchAssign()\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: STANDALONE_ASSESSMENT enrollment button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleAutoBatchAssign()\" *ngIf=\"!forPreview || isInIFrame\">\n <ng-container >\n <!-- ENROLL BUTTON LABEL -->\n {{ 'apptochome.enroll' | translate }} \n </ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: INVITE-ONLY STANDALONE_ASSESSMENT message --> \n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && content?.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 }} </span>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: Enrolled INVITE-ONLY STANDALONE_ASSESSMENT take test button -->\n <ng-container\n *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: Status messages for INVITE-ONLY STANDALONE_ASSESSMENT -->\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && content?.courseCategory === 'Invite-Only Assessment'\">\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' && content?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\" >{{ 'apptochome.batchWillStart' | translate }} {{getStartDate}}!</span>\n </ng-container>\n \n <!-- SECTION: Regular STANDALONE_ASSESSMENT enrolled take test button -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && content?.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 }}</ng-container>\n <ng-container *ngIf=\"content.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n\n <!-- SECTION: BLENDED_PROGRAM workflow status -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <!-- Review status message -->\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN)\">\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\n <!-- Approved BLENDED_PROGRAM start/resume button -->\n <ng-container>\n <a\n *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \" (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) ? 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') : translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <!-- SECTION: External registration link -->\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\" >{{ 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <!-- \n PROGRESS FUNCTIONALITY TEMPLATE\n Displays progress bar and rating button functionality\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=\"content?.completionPercentage >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\" (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 <!-- \n MAIN CONTENT DISPLAY SECTION\n Banner, details, and content layout\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=\"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'\" [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n \n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\" [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 MMM, y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n\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\">{{ handleCapitalize(content?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.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\" *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 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 }}</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 && content?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{ content?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</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=\"content?.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 }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate }}</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\"\n (mouseleave)=\"isReleventBtnHovered = false\" (click)=\"handleAcceptRelevent()\">\n <img\n [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 <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\" [tocStructure]=\"tocStructure\" \n [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\" [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\" \n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\" [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}\" [kparray]=\"kparray\"\n (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\" [contentReadData]=\"contentReadData\"></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 <!-- 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\" [ngStyle]=\"{\n 'background-image': 'url(' + content?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\" [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\" [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=\"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=\"!content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\" *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(content?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">{{ 'cardcontentv2.by' | translate }} {{ content?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-4\" *ngIf=\"content && content?.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 || '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 *ngIf=\"timer && timer.days >= 0 && content?.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 }}</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 && preAssessmentCompletionStatus\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\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]=\"content?.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]=\"content?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container *ngIf=\"actionBtnStatus !== 'wait' && content?.status !== 'Deleted' && content?.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)\" [content] = \"content\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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'\" [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'\" [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'\" [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'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\" [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\" [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"></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'\" [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'\" [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\" [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\" [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\" *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'\" [photoUrl]=\"author?.photo || ''\"\n [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(content?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.curators' | translate }}</div>\n <div class=\"flex flex-row gap-4\" *ngFor=\"let creator of handleParseJsonData(content?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"author?.photo || ''\"\n [name]=\"creator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div> -->\n <div class=\"flex flex-col gap-3\" *ngIf=\"content?.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=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" class=\"mat-icon\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\" alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"content?.createdFor?.length\" (click)=\"raiseTelemeteryForProvider(content?.source, content?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', content?.source, content?.createdFor[0], 'micro-sites']\">{{ handleCapitalize(content?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!content?.createdFor?.length\">{{ handleCapitalize(content?.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\n <!-- Mobile enrollment button container -->\n <div class=\"mobile-enroll-div\" [ngClass]=\"{'bg-white': content?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && content?.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)\" [analytics]=\"analytics\"\n [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <!-- Reuse enrollment functionality template for mobile -->\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\" (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n</ng-container>\n\n<!-- Template for when no data is found -->\n<ng-template #noDataFound>\n <div 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>\n</ng-template>\n\n<!-- Authentication view templates -->\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <a (click)=\"raiseTelemetryForPublic()\" [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\" [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n</ng-template>\n\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container\n *ngIf=\"forPreview && content?.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>\n", styles: [".source-text{color:#ffffffb3}.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}.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}.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{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:#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}.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:#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,.mobile-enroll-div .preenrolldone-btn{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}.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}\n"] }]
|
|
16350
|
+
}], 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: AccessControlService }, { type: i7.MatLegacySnackBar }, { type: i1$3.MatLegacyDialog }, { type: MobileAppsService }, { type: i2$1.UtilityService }, { type: ActionService }, { type: ViewerUtilService }, { type: RatingService }, { type: i2$1.TelemetryService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.EventService }, { type: i7.MatLegacySnackBar }, { 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: undefined, decorators: [{
|
|
16413
16351
|
type: Inject,
|
|
16414
16352
|
args: ['environment']
|
|
16415
16353
|
}] }]; }, propDecorators: { forPreview: [{
|
|
@@ -16872,9 +16810,7 @@ class PublicSurveyFormComponent {
|
|
|
16872
16810
|
this.childFields = [];
|
|
16873
16811
|
this.surveyFormIsValid = true;
|
|
16874
16812
|
this.addLoader = 0;
|
|
16875
|
-
this.forPreview = false;
|
|
16876
16813
|
this.surveyId = data.surveyId;
|
|
16877
|
-
this.forPreview = data.forPreview;
|
|
16878
16814
|
if (localStorage.getItem('websiteLanguage')) {
|
|
16879
16815
|
this.translate.setDefaultLang('en');
|
|
16880
16816
|
const lang = localStorage.getItem('websiteLanguage');
|
|
@@ -17080,11 +17016,11 @@ class PublicSurveyFormComponent {
|
|
|
17080
17016
|
});
|
|
17081
17017
|
}
|
|
17082
17018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PublicSurveyFormComponent, deps: [{ token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: i10$1.FormBuilder }, { token: AppTocService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17083
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PublicSurveyFormComponent, selector: "ws-app-public-survey-form", ngImport: i0, template: "<div class=\"preview-container\">\n <div class=\"form-header flex\">\n <div class=\"flex flex-1 justify-start items-center\">\n <div>{{'apptoc.AGKCaseStudySurveyForm' | translate}} </div>\n </div>\n <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"false\">\n <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n </button>\n </div>\n <div class=\"form-content\">\n <ng-container *ngIf=\"surveyForm\">\n <form [formGroup]=\"surveyForm\">\n <ng-container *ngFor=\"let parentField of parentalFields\">\n <ng-container [ngSwitch]=\"parentField.fieldType\">\n <ng-container *ngSwitchCase=\"'heading'\">\n <ws-app-survey-form-section [childFields]=\"getChildFields(parentField.sectionId)\"\n [sectionField]=\"parentField\"\n [childQuestionsFormArray]=\"getChildQuestionsFormArray(parentField.sectionId)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-section>\n </ng-container>\n <ng-container *ngSwitchCase=\"'separator'\">\n <hr class=\"opacity-50 elment-separator\">\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ws-app-survey-form-question [fieldDetails]=\"parentField\"\n [questionForm]=\"getQuestionControl(parentField.controlIndex)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-question>\n </ng-container>\n </ng-container>\n </ng-container>\n <div class=\"flex justify-end m-4\">\n <!-- <button mat-button class=\"do-later-btn\" (click)=\"closeDialog()\">{{'apptoc.doItLater' | translate}}</button> -->\n <button mat-button class=\"submit-btn\" [disabled]=\"!surveyFormIsValid
|
|
17019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PublicSurveyFormComponent, selector: "ws-app-public-survey-form", ngImport: i0, template: "<div class=\"preview-container\">\n <div class=\"form-header flex\">\n <div class=\"flex flex-1 justify-start items-center\">\n <div>{{'apptoc.AGKCaseStudySurveyForm' | translate}} </div>\n </div>\n <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"false\">\n <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n </button>\n </div>\n <div class=\"form-content\">\n <ng-container *ngIf=\"surveyForm\">\n <form [formGroup]=\"surveyForm\">\n <ng-container *ngFor=\"let parentField of parentalFields\">\n <ng-container [ngSwitch]=\"parentField.fieldType\">\n <ng-container *ngSwitchCase=\"'heading'\">\n <ws-app-survey-form-section [childFields]=\"getChildFields(parentField.sectionId)\"\n [sectionField]=\"parentField\"\n [childQuestionsFormArray]=\"getChildQuestionsFormArray(parentField.sectionId)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-section>\n </ng-container>\n <ng-container *ngSwitchCase=\"'separator'\">\n <hr class=\"opacity-50 elment-separator\">\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ws-app-survey-form-question [fieldDetails]=\"parentField\"\n [questionForm]=\"getQuestionControl(parentField.controlIndex)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-question>\n </ng-container>\n </ng-container>\n </ng-container>\n <div class=\"flex justify-end m-4\">\n <!-- <button mat-button class=\"do-later-btn\" (click)=\"closeDialog()\">{{'apptoc.doItLater' | translate}}</button> -->\n <button mat-button class=\"submit-btn\" [disabled]=\"!surveyFormIsValid\" (click)=\"submitForm()\">{{'apptoc.submit'\n | translate}}</button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>\n\n<ng-container *ngIf=\"addLoader > 0\">\n <div class=\"text-center my-2 loader flex justify-center items-center\">\n <mat-spinner class=\"inline-block\"></mat-spinner>\n </div>\n</ng-container>", styles: [".preview-container{max-height:700px}.preview-container .form-content{background:#f4f8ff}.preview-container .form-header{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:center;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;padding:15px 24px;border-bottom:1px solid #c3c3c3}.preview-container .q-element{padding:16px;background:#fff;border-radius:8px}.preview-container .form-content{padding:15px 24px}.preview-container .elment-separator{margin:16px 0}.preview-container .feedback-text{color:#1b4ca1;font:400 16px/20px Lato}.do-later-btn{height:40px;color:#1b4ca1!important;background-color:#fff!important;border-radius:20px;border:1px solid #1b4ca1!important;margin-right:10px}.submit-btn{height:40px;color:#fff!important;background-color:#1b4ca1!important;border-radius:20px}.submit-btn:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.info-icon{color:#d13924;font-size:20px;height:20px;width:26px;margin-top:2px}.close-button{height:30px;width:30px;line-height:24px;background:#00000040!important;color:#fff!important;align-self:end;margin-right:-24px}\n"], dependencies: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: SurveyFormQuestionComponent, selector: "ws-app-survey-form-question", inputs: ["questionForm", "fieldDetails"], outputs: ["questionValues"] }, { kind: "component", type: SurveyFormSectionComponent, selector: "ws-app-survey-form-section", inputs: ["childQuestionsFormArray", "childFields", "sectionField"], outputs: ["questionValues"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
17084
17020
|
}
|
|
17085
17021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PublicSurveyFormComponent, decorators: [{
|
|
17086
17022
|
type: Component,
|
|
17087
|
-
args: [{ selector: 'ws-app-public-survey-form', template: "<div class=\"preview-container\">\n <div class=\"form-header flex\">\n <div class=\"flex flex-1 justify-start items-center\">\n <div>{{'apptoc.AGKCaseStudySurveyForm' | translate}} </div>\n </div>\n <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"false\">\n <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n </button>\n </div>\n <div class=\"form-content\">\n <ng-container *ngIf=\"surveyForm\">\n <form [formGroup]=\"surveyForm\">\n <ng-container *ngFor=\"let parentField of parentalFields\">\n <ng-container [ngSwitch]=\"parentField.fieldType\">\n <ng-container *ngSwitchCase=\"'heading'\">\n <ws-app-survey-form-section [childFields]=\"getChildFields(parentField.sectionId)\"\n [sectionField]=\"parentField\"\n [childQuestionsFormArray]=\"getChildQuestionsFormArray(parentField.sectionId)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-section>\n </ng-container>\n <ng-container *ngSwitchCase=\"'separator'\">\n <hr class=\"opacity-50 elment-separator\">\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ws-app-survey-form-question [fieldDetails]=\"parentField\"\n [questionForm]=\"getQuestionControl(parentField.controlIndex)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-question>\n </ng-container>\n </ng-container>\n </ng-container>\n <div class=\"flex justify-end m-4\">\n <!-- <button mat-button class=\"do-later-btn\" (click)=\"closeDialog()\">{{'apptoc.doItLater' | translate}}</button> -->\n <button mat-button class=\"submit-btn\" [disabled]=\"!surveyFormIsValid
|
|
17023
|
+
args: [{ selector: 'ws-app-public-survey-form', template: "<div class=\"preview-container\">\n <div class=\"form-header flex\">\n <div class=\"flex flex-1 justify-start items-center\">\n <div>{{'apptoc.AGKCaseStudySurveyForm' | translate}} </div>\n </div>\n <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"false\">\n <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n </button>\n </div>\n <div class=\"form-content\">\n <ng-container *ngIf=\"surveyForm\">\n <form [formGroup]=\"surveyForm\">\n <ng-container *ngFor=\"let parentField of parentalFields\">\n <ng-container [ngSwitch]=\"parentField.fieldType\">\n <ng-container *ngSwitchCase=\"'heading'\">\n <ws-app-survey-form-section [childFields]=\"getChildFields(parentField.sectionId)\"\n [sectionField]=\"parentField\"\n [childQuestionsFormArray]=\"getChildQuestionsFormArray(parentField.sectionId)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-section>\n </ng-container>\n <ng-container *ngSwitchCase=\"'separator'\">\n <hr class=\"opacity-50 elment-separator\">\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ws-app-survey-form-question [fieldDetails]=\"parentField\"\n [questionForm]=\"getQuestionControl(parentField.controlIndex)\"\n (questionValues)=\"updateQuestionValues($event)\"></ws-app-survey-form-question>\n </ng-container>\n </ng-container>\n </ng-container>\n <div class=\"flex justify-end m-4\">\n <!-- <button mat-button class=\"do-later-btn\" (click)=\"closeDialog()\">{{'apptoc.doItLater' | translate}}</button> -->\n <button mat-button class=\"submit-btn\" [disabled]=\"!surveyFormIsValid\" (click)=\"submitForm()\">{{'apptoc.submit'\n | translate}}</button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>\n\n<ng-container *ngIf=\"addLoader > 0\">\n <div class=\"text-center my-2 loader flex justify-center items-center\">\n <mat-spinner class=\"inline-block\"></mat-spinner>\n </div>\n</ng-container>", styles: [".preview-container{max-height:700px}.preview-container .form-content{background:#f4f8ff}.preview-container .form-header{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:center;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;padding:15px 24px;border-bottom:1px solid #c3c3c3}.preview-container .q-element{padding:16px;background:#fff;border-radius:8px}.preview-container .form-content{padding:15px 24px}.preview-container .elment-separator{margin:16px 0}.preview-container .feedback-text{color:#1b4ca1;font:400 16px/20px Lato}.do-later-btn{height:40px;color:#1b4ca1!important;background-color:#fff!important;border-radius:20px;border:1px solid #1b4ca1!important;margin-right:10px}.submit-btn{height:40px;color:#fff!important;background-color:#1b4ca1!important;border-radius:20px}.submit-btn:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.info-icon{color:#d13924;font-size:20px;height:20px;width:26px;margin-top:2px}.close-button{height:30px;width:30px;line-height:24px;background:#00000040!important;color:#fff!important;align-self:end;margin-right:-24px}\n"] }]
|
|
17088
17024
|
}], ctorParameters: function () { return [{ type: i7.MatLegacySnackBar }, { type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
17089
17025
|
type: Inject,
|
|
17090
17026
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
@@ -21180,7 +21116,7 @@ class AppTocHomeV2Component {
|
|
|
21180
21116
|
// private progressSvc: ContentProgressService,
|
|
21181
21117
|
contentLangSvc, actionSVC, viewerSvc, ratingSvc, telemetryService, translate, langtranslations, events,
|
|
21182
21118
|
// private matSnackBar: MatSnackBar,
|
|
21183
|
-
loadCheckService, handleClaimService, resetRatingsService, timerService, enrollSvc, contentLibSvc, dataTransferSvc, matSnackbarNew, userServiceLib, netCoreService, appTocV2Svc, location,
|
|
21119
|
+
loadCheckService, handleClaimService, resetRatingsService, timerService, enrollSvc, contentLibSvc, dataTransferSvc, matSnackbarNew, userServiceLib, netCoreService, appTocV2Svc, location, environment) {
|
|
21184
21120
|
this.route = route;
|
|
21185
21121
|
this.router = router;
|
|
21186
21122
|
this.contentSvc = contentSvc;
|
|
@@ -21212,7 +21148,6 @@ class AppTocHomeV2Component {
|
|
|
21212
21148
|
this.netCoreService = netCoreService;
|
|
21213
21149
|
this.appTocV2Svc = appTocV2Svc;
|
|
21214
21150
|
this.location = location;
|
|
21215
|
-
this.domainConfSvc = domainConfSvc;
|
|
21216
21151
|
this.environment = environment;
|
|
21217
21152
|
this.queryParamsData = {}; // Initialize queryParamsData
|
|
21218
21153
|
this.show = false;
|
|
@@ -21233,7 +21168,7 @@ class AppTocHomeV2Component {
|
|
|
21233
21168
|
this.isCohortsRestricted = false;
|
|
21234
21169
|
this.sticky = false;
|
|
21235
21170
|
this.isInIframe = false;
|
|
21236
|
-
this.forPreview = window.location.href.includes('/public/') || window.location.href.includes('/author/')
|
|
21171
|
+
this.forPreview = window.location.href.includes('/public/') || window.location.href.includes('/author/');
|
|
21237
21172
|
this.displayViewBtn = true;
|
|
21238
21173
|
// forPreview = window.location.href.includes('/author/')
|
|
21239
21174
|
this.analytics = this.route.snapshot.data?.pageData?.data?.analytics;
|
|
@@ -22789,7 +22724,6 @@ class AppTocHomeV2Component {
|
|
|
22789
22724
|
}
|
|
22790
22725
|
}
|
|
22791
22726
|
ngOnInit() {
|
|
22792
|
-
this.domainConfSvc.initFromConfig(this.configSvc.globalConfig.applicationConfig);
|
|
22793
22727
|
this.dataTransferSvc.setEnrollData(null);
|
|
22794
22728
|
this.getServerDateTime();
|
|
22795
22729
|
this.mobile1200 = window.innerWidth < 1201;
|
|
@@ -23974,40 +23908,34 @@ class AppTocHomeV2Component {
|
|
|
23974
23908
|
}
|
|
23975
23909
|
openPublicSurveyPopup(navigationUrl, queryParams) {
|
|
23976
23910
|
// Get survey ID and course ID from environment and content data
|
|
23977
|
-
|
|
23978
|
-
|
|
23979
|
-
|
|
23980
|
-
|
|
23981
|
-
|
|
23982
|
-
|
|
23983
|
-
|
|
23984
|
-
|
|
23985
|
-
|
|
23986
|
-
|
|
23987
|
-
|
|
23988
|
-
|
|
23989
|
-
|
|
23990
|
-
|
|
23991
|
-
|
|
23992
|
-
|
|
23993
|
-
|
|
23994
|
-
|
|
23995
|
-
|
|
23996
|
-
|
|
23997
|
-
|
|
23998
|
-
|
|
23999
|
-
|
|
24000
|
-
|
|
24001
|
-
|
|
24002
|
-
dialogRef.afterClosed().subscribe((result) => {
|
|
24003
|
-
if (result) {
|
|
24004
|
-
// Navigate to the intended URL only when survey is submitted successfully
|
|
24005
|
-
if (navigationUrl) {
|
|
24006
|
-
this.router.navigate([navigationUrl], { queryParams: queryParams });
|
|
24007
|
-
}
|
|
23911
|
+
const surveyId = this.environment.publicContentSurveyId || '';
|
|
23912
|
+
const courseId = this.contentReadData?.identifier || '';
|
|
23913
|
+
const courseName = this.contentReadData?.name || '';
|
|
23914
|
+
const contextOrgId = this.contentReadData?.createdFor && this.contentReadData?.createdFor.length > 0 ?
|
|
23915
|
+
this.contentReadData?.createdFor[0] : '';
|
|
23916
|
+
this.clearExistingPublicSurveyData(surveyId, courseId);
|
|
23917
|
+
const data = {
|
|
23918
|
+
surveyId: surveyId,
|
|
23919
|
+
courseId: courseId,
|
|
23920
|
+
courseName: courseName,
|
|
23921
|
+
contextOrgId: contextOrgId
|
|
23922
|
+
};
|
|
23923
|
+
const dialogRef = this.dialog.open(PublicSurveyFormComponent, {
|
|
23924
|
+
// disableClose: true,
|
|
23925
|
+
width: '750px',
|
|
23926
|
+
maxWidth: '90vw',
|
|
23927
|
+
height: '80vh',
|
|
23928
|
+
data: data,
|
|
23929
|
+
autoFocus: false,
|
|
23930
|
+
});
|
|
23931
|
+
dialogRef.afterClosed().subscribe((result) => {
|
|
23932
|
+
if (result) {
|
|
23933
|
+
// Navigate to the intended URL only when survey is submitted successfully
|
|
23934
|
+
if (navigationUrl) {
|
|
23935
|
+
this.router.navigate([navigationUrl], { queryParams: queryParams });
|
|
24008
23936
|
}
|
|
24009
|
-
}
|
|
24010
|
-
}
|
|
23937
|
+
}
|
|
23938
|
+
});
|
|
24011
23939
|
}
|
|
24012
23940
|
resumeContentData() {
|
|
24013
23941
|
const navigationUrl = (this.resumeData && !this.certData) ? this.resumeDataLink?.url : this.firstResourceLink?.url;
|
|
@@ -24041,13 +23969,13 @@ class AppTocHomeV2Component {
|
|
|
24041
23969
|
goBack() {
|
|
24042
23970
|
this.location.back();
|
|
24043
23971
|
}
|
|
24044
|
-
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:
|
|
24045
|
-
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 && (domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\">\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\" *ngIf=\"domainConfService?.isFeatureByPageEnabled('toc','karmaPoints')\">\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 }); }
|
|
23972
|
+
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 }); }
|
|
23973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24046
23974
|
}
|
|
24047
23975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, decorators: [{
|
|
24048
23976
|
type: Component,
|
|
24049
|
-
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 && (domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\">\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\" *ngIf=\"domainConfService?.isFeatureByPageEnabled('toc','karmaPoints')\">\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"] }]
|
|
24050
|
-
}], 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:
|
|
23977
|
+
args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n <ng-template #enrollFunctionality>\n <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n <!-- Course block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n !content?.artifactUrl?.length) &&\n !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n\n <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </button>\n\n <!-- <div\n *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div> -->\n\n <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <!-- PRogram & mandatory course block -->\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{'apptochome.enroll' | translate}}\n </ng-container>\n </a>\n <!-- <ng-container *ngIf=\"isAcbpCourse\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container> -->\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n <ng-container\n *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE) && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n No Batches\n </ng-container>\n <ng-container\n *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container\n *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBatchInProgress &&\n ( actionBtnStatus === 'grant' &&\n !(isMobile && content?.isInIntranet) &&\n (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n )\">\n <a *ngIf=\"showStart.show && !isPostAssessment\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n </ng-container>\n </a>\n <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n }}</ng-container>\n </a>\n <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n <ng-container *ngIf=\"isAcbpClaim\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </ng-container>\n </div> -->\n <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div>\n </div>\n <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n </div> -->\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n class=\"flex action-button justify-center resume\">\n <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('resume', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"enrollBtnLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <!-- Curated program block -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n (click)=\"handleEnrollment()\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- STANDALONE_ASSESSMENT black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n *ngIf=\"!forPreview || isInIFrame\">\n <ng-container>\n {{ 'apptochome.enroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n </ng-container>\n <ng-container\n *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n {{getStartDate}}!</span>\n </ng-container>\n\n <!-- STANDALONE_ASSESSMENT enrolled black -->\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n }}</ng-container>\n <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n }}</ng-container>\n </a>\n </ng-container>\n <!-- BLENDED_PROGRAM block -->\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n <p class=\"margin-remove-bottom font-bold\">\n {{ 'apptochome.requestUnderReview' | translate }}\n </p>\n </div>\n </ng-container>\n <ng-container>\n <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n (click)=\"raiseTelemetryForPublic()\"\n [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n translateLabels('resume', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n translateLabels('start', 'apptochome') }}\n </ng-container>\n </a>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n 'apptochome.register' | translate }}</a>\n </ng-container>\n\n </div>\n </ng-template>\n\n <ng-template #progressFunctionality>\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex flex-row gap-4 text-sm\">\n <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n </div>\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n [customClassName]=\"'content-progress'\">\n </ws-widget-content-progress>\n </div>\n </div>\n\n <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n (click)=\"openFeedbackDialog(content)\">\n <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n <ng-container *ngIf=\"!userRating\">\n <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n </ng-container>\n <ng-container *ngIf=\"userRating\">\n <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n </ng-container>\n </button>\n </ng-container>\n </div>\n </ng-template>\n\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n <mat-icon class=\"text-white\">arrow_back</mat-icon>\n </div>\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n 'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n </div>\n <!-- Knowledge level block for search box -->\n <!-- {{content?.difficultyLevel}} -->\n <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{contentReadData?.difficultyLevel}}\n </span>\n </div>\n\n <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n <div class=\"flex items-center due-tag text-xs leading-3\"\n [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n {{ 'common.dueBy' | translate }} - <span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n MMM,y'}}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n </div>\n </ng-container>\n <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n handleCapitalize(contentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n | translate }} {{ contentReadData?.source }}</div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon class=\"nodtranslate\">grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n translate }}</span>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n </div>\n <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n <span>{{ 'apptoc.retired' | translate }}</span>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n </ng-container>\n <ng-container>\n <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n <mat-chip-list class=\"lang-chips\">\n <!-- Show up to 6 chips -->\n <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n <mat-chip class=\"matchip-custom\" selectable=\"true\"\n [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n {{ lang.name || lang.value }}\n </mat-chip>\n </ng-container>\n\n <!-- \"More\" chip if there are more than 6 languages -->\n <ng-container *ngIf=\"languageList.length > 5\">\n <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n [selected]=\"isSelectedInMoreDropdown()\">\n More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n </mat-chip>\n <mat-menu #moreLanguagesMenu=\"matMenu\">\n <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n {{ lang.displayName || lang.name || lang }}\n </mat-radio-button>\n </mat-radio-group>\n </mat-menu>\n </ng-container>\n </mat-chip-list>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\">\n <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n selectedBatchData?.content[0]?.enrollmentEndDate\">\n <div class=\"location-details mt-6\">\n <div class=\"flex items-center gap-4 pb-3\">\n <mat-icon class=\"location-icon nodtranslate\">\n location_on\n </mat-icon>\n <div class=\"loc-desc\">\n {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n <div class=\"flex items-center gap-4\">\n <mat-icon class=\"event-icon nodtranslate\">\n event</mat-icon>\n <div class=\"loc-desc\">\n Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n <div class=\"relevent-info\">\n <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n }}</span>\n <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n }}</span>\n </div>\n <div class=\"flex flex-middle relevant-container\">\n <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n (click)=\"handleAcceptRelevent()\">\n <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n </div>\n\n <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"pb-4 lg:py-4\"\n *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n <!-- Overall progress functionality -->\n <div class=\"mobile-progress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </div>\n <!-- Overall progress functionality -->\n <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n <div class=\"mob-tip-for-learner\">\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"right-container\">\n\n <!-- if needed sticky of right container add this to below div => #rightContainer -->\n <div class=\"right-content\">\n <div class=\"right-content-inner\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-between\"\n [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n <ng-container *ngIf=\"contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{\n translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n </ng-container>\n </div>\n <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n *ngIf=\"canShare && !forPreview\">\n <mat-icon class=\"nodtranslate\">share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n </div>\n <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n 'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\"\n *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n\n <div class=\"flex flex-col gap-4\"\n *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n <a class=\"flex action-button enroll-btn justify-center resume\"\n *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n <ng-container>\n {{ 'apptochome.preEnroll' | translate }}\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n <a class=\"flex preenrolldone-btn justify-center resume\">\n <ng-container>\n {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n class=\"tick-icon\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container\n *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 batch-timer\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n <ng-container *ngIf=\"!mobile1200 && (\n !contentReadData?.preEnrolmentResources?.length ||\n (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus || !preAssessmentRequiredFlag))\n )\">\n\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon>\n <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n </div>\n <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n <mat-icon class=\"nodtranslate\">info</mat-icon> \n <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n </div>\n <div *ngIf=\"showBtn\">\n <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n </div>\n\n <!-- Overall progress functionality -->\n <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n </ng-container>\n <!-- Overall progress functionality -->\n\n <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n <!-- </div> -->\n\n <!-- <div *ngIf=\"resumeData && userRating\">\n <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n </div> -->\n\n <ng-container\n *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </ng-container>\n </div>\n\n <div class=\"karma-points-div\">\n <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n [content]=\"content\"\n [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-wrap gap-6\">\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col gap-8 p-5\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-3\"\n *ngIf=\"contentReadData?.source && (contentCreatorData && contentCreatorData?.length)\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n <div class=\"flex provider-logo-div\">\n <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n {{ handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n handleCapitalize(contentReadData?.source, 'source') }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n </div>\n </div>\n\n\n\n </div>\n </div>\n <div class=\"mobile-enroll-div\"\n [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n </ws-app-toc-banner>\n </div>\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n </div>\n\n <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n <div\n class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n <div class=\"error-logo\">\n <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n The page you requested cannot be found\n </div>\n </div>\n <!-- <div class=\"error-support\">\n <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n <div class=\"support-message\" >You might want to:</div>\n </div> -->\n </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n <ng-container *ngIf=\"displayViewBtn\">\n <a (click)=\"raiseTelemetryForPublic($event)\"\n [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n class=\"flex action-button justify-center\">\n {{'apptochome.view' | translate}}\n </a>\n </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n </a>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"] }]
|
|
23978
|
+
}], 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: [{
|
|
24051
23979
|
type: Inject,
|
|
24052
23980
|
args: ['environment']
|
|
24053
23981
|
}] }]; }, propDecorators: { forPreview: [{
|
|
@@ -26005,7 +25933,6 @@ class AppTocCiosHomeComponent {
|
|
|
26005
25933
|
this.enableShare = false;
|
|
26006
25934
|
this.currentLang = 'en';
|
|
26007
25935
|
this.showProviderTips = false;
|
|
26008
|
-
this.fromMDO = false;
|
|
26009
25936
|
this.route.data.subscribe((data) => {
|
|
26010
25937
|
this.enrollValidationLoading = false;
|
|
26011
25938
|
if (data && data.extContent && data.extContent.data && data.extContent.data.content) {
|
|
@@ -26420,11 +26347,11 @@ class AppTocCiosHomeComponent {
|
|
|
26420
26347
|
_.get(this.extContentReadData, 'contentPartner.isActive', false);
|
|
26421
26348
|
}
|
|
26422
26349
|
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 }); }
|
|
26423
|
-
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" }] }); }
|
|
26350
|
+
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 </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"], 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" }] }); }
|
|
26424
26351
|
}
|
|
26425
26352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, decorators: [{
|
|
26426
26353
|
type: Component,
|
|
26427
|
-
args: [{ selector: 'ws-app-app-toc-cios-home', 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"] }]
|
|
26354
|
+
args: [{ selector: 'ws-app-app-toc-cios-home', 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 </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"] }]
|
|
26428
26355
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i5.CommonMethodsService }, { type: i1$2.TranslateService }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.WidgetContentService }, { type: CertificateService }, { type: LoaderService }, { type: i5$4.MatDialog }, { type: i7.MatLegacySnackBar }, { type: NetCoreService }, { type: undefined, decorators: [{
|
|
26429
26356
|
type: Inject,
|
|
26430
26357
|
args: ['environment']
|