@sunbird-cb/toc 0.0.10 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/_collection/_common/content-toc/app-toc-content/app-toc-content.component.mjs +17 -6
- package/esm2022/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.mjs +28 -3
- package/esm2022/lib/components/app-toc-home-v2/app-toc-home-v2.component.mjs +2 -2
- package/esm2022/lib/services/app-toc-v2.service.mjs +3 -2
- package/fesm2022/sunbird-cb-toc.mjs +70 -34
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/lib/_collection/_common/content-toc/app-toc-content/app-toc-content.component.d.ts +6 -0
- package/lib/_collection/_common/content-toc/app-toc-content/app-toc-content.component.d.ts.map +1 -1
- package/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.d.ts +11 -0
- package/lib/_collection/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.d.ts.map +1 -1
- package/lib/services/app-toc-v2.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -58,15 +58,15 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input';
|
|
|
58
58
|
import { MatLegacyListModule } from '@angular/material/legacy-list';
|
|
59
59
|
import * as i6$1 from '@angular/material/legacy-menu';
|
|
60
60
|
import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
|
|
61
|
-
import * as i3$
|
|
61
|
+
import * as i3$1 from '@angular/material/legacy-progress-bar';
|
|
62
62
|
import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
|
|
63
63
|
import * as i4 from '@angular/material/legacy-radio';
|
|
64
64
|
import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
|
|
65
|
-
import * as i5$
|
|
65
|
+
import * as i5$5 from '@angular/material/legacy-select';
|
|
66
66
|
import { MatLegacySelectModule } from '@angular/material/legacy-select';
|
|
67
67
|
import * as i18 from '@angular/material/legacy-tabs';
|
|
68
68
|
import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
|
|
69
|
-
import * as
|
|
69
|
+
import * as i5$2 from '@angular/material/legacy-tooltip';
|
|
70
70
|
import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
|
|
71
71
|
import * as i9$3 from '@sunbird-cb/micro-surveys';
|
|
72
72
|
import { MicroSurveyModule } from '@sunbird-cb/micro-surveys';
|
|
@@ -88,13 +88,13 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
88
88
|
import dayjs from 'dayjs';
|
|
89
89
|
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
|
90
90
|
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
|
91
|
-
import * as i5$
|
|
91
|
+
import * as i5$3 from '@angular/material/menu';
|
|
92
92
|
import { MatMenuModule } from '@angular/material/menu';
|
|
93
93
|
import * as i10$2 from '@angular/material/progress-spinner';
|
|
94
94
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
95
95
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
96
96
|
import * as fileSaver from 'file-saver';
|
|
97
|
-
import * as i5$
|
|
97
|
+
import * as i5$4 from '@angular/material/dialog';
|
|
98
98
|
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
99
99
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
100
100
|
import { MatRadioModule } from '@angular/material/radio';
|
|
@@ -3632,7 +3632,7 @@ class SlidersDynamicComponent {
|
|
|
3632
3632
|
return this.langTranslations.translateLabelWithoutspace(label, type, '');
|
|
3633
3633
|
}
|
|
3634
3634
|
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 }); }
|
|
3635
|
-
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:
|
|
3635
|
+
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"] }] }); }
|
|
3636
3636
|
}
|
|
3637
3637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, decorators: [{
|
|
3638
3638
|
type: Component,
|
|
@@ -4506,7 +4506,7 @@ class RatingSummaryComponent {
|
|
|
4506
4506
|
return this.ratingService.getRatingIconClass(ratingIndex, avg);
|
|
4507
4507
|
}
|
|
4508
4508
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingSummaryComponent, deps: [{ token: RatingService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4509
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: { ratingSummary: "ratingSummary" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"ratingSummary\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"rating-value ws-mat-default-text nodtranslate\">{{ ratingSummary?.avgRating }}</div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"flex flex-row gap-2\">\n <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text nodtranslate\"\n [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingSummary?.avgRating)}\"\n *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating, ratingSummary?.avgRating) }}\n </mat-icon>\n </div>\n <div class=\"text-base nodtranslate\">{{ ratingSummary?.total_number_of_ratings | pipeCountTransform }}\n {{'ratingsummary.ratings' | translate}}\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngFor=\"let rating of ratingSummary?.breakDown?.slice().reverse()\">\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"flex-none font-bold nodtranslate\">{{ rating.key }} {{ 'ratingsummary.star' | translate }}</div>\n <div class=\"flex items-center rating-progress nodtranslate\">\n <mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"rating?.percent + ' %'\"\n [value]=\"rating?.percent\" class=\"rating-bar\"\n [attr.aria-labelledby]=\"'m-c-'+ contentId\"\n [ngClass]=\"{ 'visibility-0': rating === undefined, 'thick': className}\"\n [color]=\"ratingColor\"\n i18n-aria-label>\n {{rating?.percent}} %\n </mat-progress-bar>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n", styles: [".rating-value{font-size:54px;line-height:56px;font-weight:700}.rating-icon{transform:scale(1.2)}.rating-progress{width:100%;max-width:300px;border-radius:4px}.rating-bar.mat-progress-bar{height:8px;border-radius:12px;background-color:#00000014}.ratingColor{background-color:#00000014}.rating-bar .mat-progress-bar-fill:after{background:red}::ng-deep .theme-igot.day-mode .rating-bar .mat-progress-bar-fill:after{background:#ff9800;border-radius:12px}\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$
|
|
4509
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: { ratingSummary: "ratingSummary" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"ratingSummary\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"rating-value ws-mat-default-text nodtranslate\">{{ ratingSummary?.avgRating }}</div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"flex flex-row gap-2\">\n <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text nodtranslate\"\n [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingSummary?.avgRating)}\"\n *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating, ratingSummary?.avgRating) }}\n </mat-icon>\n </div>\n <div class=\"text-base nodtranslate\">{{ ratingSummary?.total_number_of_ratings | pipeCountTransform }}\n {{'ratingsummary.ratings' | translate}}\n </div>\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngFor=\"let rating of ratingSummary?.breakDown?.slice().reverse()\">\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"flex-none font-bold nodtranslate\">{{ rating.key }} {{ 'ratingsummary.star' | translate }}</div>\n <div class=\"flex items-center rating-progress nodtranslate\">\n <mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"rating?.percent + ' %'\"\n [value]=\"rating?.percent\" class=\"rating-bar\"\n [attr.aria-labelledby]=\"'m-c-'+ contentId\"\n [ngClass]=\"{ 'visibility-0': rating === undefined, 'thick': className}\"\n [color]=\"ratingColor\"\n i18n-aria-label>\n {{rating?.percent}} %\n </mat-progress-bar>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n", styles: [".rating-value{font-size:54px;line-height:56px;font-weight:700}.rating-icon{transform:scale(1.2)}.rating-progress{width:100%;max-width:300px;border-radius:4px}.rating-bar.mat-progress-bar{height:8px;border-radius:12px;background-color:#00000014}.ratingColor{background-color:#00000014}.rating-bar .mat-progress-bar-fill:after{background:red}::ng-deep .theme-igot.day-mode .rating-bar .mat-progress-bar-fill:after{background:#ff9800;border-radius:12px}\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$1.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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"] }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
4510
4510
|
}
|
|
4511
4511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingSummaryComponent, decorators: [{
|
|
4512
4512
|
type: Component,
|
|
@@ -4593,7 +4593,7 @@ class ContentProgressComponent {
|
|
|
4593
4593
|
}
|
|
4594
4594
|
}
|
|
4595
4595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: { contentId: "contentId", progress: "progress", progressType: "progressType", forPreview: "forPreview", className: "className", customClassName: "customClassName" }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "title": "progres" }, properties: { "attr.aria-valuenow": "progress", "id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"progress + ' %'\" [value]=\"progress\" class=\"new-w content-progress {{customClassName}}\"\n [attr.aria-labelledby]=\"'m-c-'+ contentId\" [ngClass]=\"{ 'visibility-0': progress === undefined, 'thick': className}\"\n i18n-aria-label> {{ progress }} % </mat-progress-bar>", styles: [".visibility-0{display:none}::ng-deep .mat-progress-bar.thick{height:10px}::ng-deep .theme-igot.day-mode .mat-progress-bar-fill:after{background:#34d6a4 0% 0% no-repeat padding-box}::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:#0000!important}::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .content-progress .mat-progress-bar-fill:after{background:#f69953!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-background{fill:#0000001a!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .mat-progress-bar.viewer-progress{height:4px;border-radius:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$
|
|
4596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: { contentId: "contentId", progress: "progress", progressType: "progressType", forPreview: "forPreview", className: "className", customClassName: "customClassName" }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "title": "progres" }, properties: { "attr.aria-valuenow": "progress", "id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"progress + ' %'\" [value]=\"progress\" class=\"new-w content-progress {{customClassName}}\"\n [attr.aria-labelledby]=\"'m-c-'+ contentId\" [ngClass]=\"{ 'visibility-0': progress === undefined, 'thick': className}\"\n i18n-aria-label> {{ progress }} % </mat-progress-bar>", styles: [".visibility-0{display:none}::ng-deep .mat-progress-bar.thick{height:10px}::ng-deep .theme-igot.day-mode .mat-progress-bar-fill:after{background:#34d6a4 0% 0% no-repeat padding-box}::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:#0000!important}::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .content-progress .mat-progress-bar-fill:after{background:#f69953!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-background{fill:#0000001a!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .mat-progress-bar.viewer-progress{height:4px;border-radius:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
4597
4597
|
}
|
|
4598
4598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentProgressComponent, decorators: [{
|
|
4599
4599
|
type: Component,
|
|
@@ -5060,7 +5060,7 @@ class ReviewsContentComponent {
|
|
|
5060
5060
|
this.initiateLoadMore.emit(this.showFilterIndicator);
|
|
5061
5061
|
}
|
|
5062
5062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewsContentComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: ReviewComponentDataService }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5063
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewsContentComponent, selector: "ws-widget-reviews-content", outputs: { initiateLoadMore: "initiateLoadMore", loadLatestReviews: "loadLatestReviews" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"rating-modal-container\">\n <div class=\"flex flex-row ratings-container\">\n <div class=\"flex-1\">\n <ws-widget-rating-summary [ratingSummary]=\"data?.ratings\"></ws-widget-rating-summary>\n </div>\n <div class=\"flex\">\n <mat-icon class=\"cursor-pointer\" (click)=\"handleCloseModal()\" >close</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col p-6\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"font-base font-bold\">\n <span *ngIf=\"showFilterIndicator === 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n <span *ngIf=\"showFilterIndicator !== 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n </div>\n <div class=\"flex flex-row gap-3\">\n <div class=\"flex-1\">\n <div class=\"flex flex-row search-div\">\n <mat-icon (click)=\"handleFocus()\" class=\"cursor-pointer\">search</mat-icon>\n <input #searchInput type=\"text\" class=\"search-input flex\" placeholder=\"Search\" maxlength=\"50\" />\n <ng-container *ngIf=\"clearIcon\">\n <mat-icon (click)=\"handleClear()\" class=\"cursor-pointer\">close</mat-icon>\n </ng-container>\n </div>\n </div>\n <div class=\"flex items-center justify-center w-8\">\n <mat-icon class=\"cursor-pointer\" [matMenuTriggerFor]=\"filter\">filter_list</mat-icon>\n <mat-menu #filter=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Latest'}\"\n (click)=\"handleReviewsFilter('Latest')\">\n <span class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n </button>\n <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Top'}\"\n (click)=\"handleReviewsFilter('Top')\">\n <span class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!reviews || !reviews.length\">\n <div class=\"flex justify-center items-center no-reviews-found text-lg\">\n <div class=\"p-4 nodtranslate\">\n {{ 'apptocsinglepage.noReviewsFound' | translate }}\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"reviews?.length\">\n <div class=\"flex flex-col reviews\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"150\" [infiniteScrollContainer]=\"'.reviews'\" [fromRoot]=\"true\" [scrollWindow]=\"false\" (scrolled)=\"handleLoadMore()\">\n <ng-container *ngFor=\"let eachReview of reviews; let i = index\">\n <div class=\"flex flex-row gap-3 p-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex-1\">\n <div class=\"flex text-sm nodtranslate\">{{ handleCapitalize(eachReview?.review, 'comment') }}</div>\n </div>\n <div class=\"flex flex-row gap-1 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div class=\"text-sm nodtranslate\">{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"eachReview?.photo || ''\" [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div class=\"text-sm nodtranslate\">{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.date\">{{ eachReview?.date | pipeRelativeTime }}</div>\n <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.updatedon\">{{ eachReview?.updatedon | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"separator\" *ngIf=\"reviews.length > (i + 1)\" ></div>\n </ng-container>\n <div *ngIf=\"displayLoader\" class=\"flex items-center justify-center mt-6\">\n <mat-spinner [diameter]=\"30\"></mat-spinner>\n </div>\n </div>\n </ng-container>\n </div>\n \n</div>\n\n", styles: [".search-div{border:1px solid rgba(0,0,0,.16);border-radius:4px;background:#fff}.search-div .mat-icon{padding:8px}.search-div .search-input{padding:8px 0;border:none;border-radius:8px;width:100%;font-family:Lato}.search-div .search-input:focus{outline:none}.search-div .search-input:focus-visible{outline:none!important}.ratings-container{padding:24px;background-color:#1b4ca114}.separator{border-bottom:2px solid rgba(0,0,0,.1)}.reviews{max-height:320px;overflow-y:auto}.rating-start-value mat-icon{color:#ff9800}::ng-deep .mat-menu-panel{min-width:12em!important;padding:8px 0!important;border-radius:12px;margin-top:4px}::ng-deep .mat-menu-panel .mat-menu-content{padding-top:0!important}::ng-deep .mat-menu-panel .mat-menu-content button{padding:0 16px!important}.no-reviews-found{background-color:#fff;margin-top:16px;border-radius:8px;border:none}\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: "component", type: i5$
|
|
5063
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewsContentComponent, selector: "ws-widget-reviews-content", outputs: { initiateLoadMore: "initiateLoadMore", loadLatestReviews: "loadLatestReviews" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"rating-modal-container\">\n <div class=\"flex flex-row ratings-container\">\n <div class=\"flex-1\">\n <ws-widget-rating-summary [ratingSummary]=\"data?.ratings\"></ws-widget-rating-summary>\n </div>\n <div class=\"flex\">\n <mat-icon class=\"cursor-pointer\" (click)=\"handleCloseModal()\" >close</mat-icon>\n </div>\n </div>\n <div class=\"flex flex-col p-6\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"font-base font-bold\">\n <span *ngIf=\"showFilterIndicator === 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n <span *ngIf=\"showFilterIndicator !== 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n </div>\n <div class=\"flex flex-row gap-3\">\n <div class=\"flex-1\">\n <div class=\"flex flex-row search-div\">\n <mat-icon (click)=\"handleFocus()\" class=\"cursor-pointer\">search</mat-icon>\n <input #searchInput type=\"text\" class=\"search-input flex\" placeholder=\"Search\" maxlength=\"50\" />\n <ng-container *ngIf=\"clearIcon\">\n <mat-icon (click)=\"handleClear()\" class=\"cursor-pointer\">close</mat-icon>\n </ng-container>\n </div>\n </div>\n <div class=\"flex items-center justify-center w-8\">\n <mat-icon class=\"cursor-pointer\" [matMenuTriggerFor]=\"filter\">filter_list</mat-icon>\n <mat-menu #filter=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Latest'}\"\n (click)=\"handleReviewsFilter('Latest')\">\n <span class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n </button>\n <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Top'}\"\n (click)=\"handleReviewsFilter('Top')\">\n <span class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!reviews || !reviews.length\">\n <div class=\"flex justify-center items-center no-reviews-found text-lg\">\n <div class=\"p-4 nodtranslate\">\n {{ 'apptocsinglepage.noReviewsFound' | translate }}\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"reviews?.length\">\n <div class=\"flex flex-col reviews\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"150\" [infiniteScrollContainer]=\"'.reviews'\" [fromRoot]=\"true\" [scrollWindow]=\"false\" (scrolled)=\"handleLoadMore()\">\n <ng-container *ngFor=\"let eachReview of reviews; let i = index\">\n <div class=\"flex flex-row gap-3 p-4\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-2\">\n <div class=\"flex-1\">\n <div class=\"flex text-sm nodtranslate\">{{ handleCapitalize(eachReview?.review, 'comment') }}</div>\n </div>\n <div class=\"flex flex-row gap-1 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div class=\"text-sm nodtranslate\">{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"eachReview?.photo || ''\" [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div class=\"text-sm nodtranslate\">{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.date\">{{ eachReview?.date | pipeRelativeTime }}</div>\n <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.updatedon\">{{ eachReview?.updatedon | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"separator\" *ngIf=\"reviews.length > (i + 1)\" ></div>\n </ng-container>\n <div *ngIf=\"displayLoader\" class=\"flex items-center justify-center mt-6\">\n <mat-spinner [diameter]=\"30\"></mat-spinner>\n </div>\n </div>\n </ng-container>\n </div>\n \n</div>\n\n", styles: [".search-div{border:1px solid rgba(0,0,0,.16);border-radius:4px;background:#fff}.search-div .mat-icon{padding:8px}.search-div .search-input{padding:8px 0;border:none;border-radius:8px;width:100%;font-family:Lato}.search-div .search-input:focus{outline:none}.search-div .search-input:focus-visible{outline:none!important}.ratings-container{padding:24px;background-color:#1b4ca114}.separator{border-bottom:2px solid rgba(0,0,0,.1)}.reviews{max-height:320px;overflow-y:auto}.rating-start-value mat-icon{color:#ff9800}::ng-deep .mat-menu-panel{min-width:12em!important;padding:8px 0!important;border-radius:12px;margin-top:4px}::ng-deep .mat-menu-panel .mat-menu-content{padding-top:0!important}::ng-deep .mat-menu-panel .mat-menu-content button{padding:0 16px!important}.no-reviews-found{background-color:#fff;margin-top:16px;border-radius:8px;border:none}\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: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
5064
5064
|
}
|
|
5065
5065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewsContentComponent, decorators: [{
|
|
5066
5066
|
type: Component,
|
|
@@ -6039,7 +6039,7 @@ class AppTocAboutComponent {
|
|
|
6039
6039
|
}
|
|
6040
6040
|
}
|
|
6041
6041
|
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 }); }
|
|
6042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n\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 *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 <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 *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}</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.objectives' | 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 <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 [wsResolverWidget]=\"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\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 [wsResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i3$1.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" }] }); }
|
|
6042
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n\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 *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 <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 *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}</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.objectives' | 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 <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 [wsResolverWidget]=\"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\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 [wsResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: 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" }] }); }
|
|
6043
6043
|
}
|
|
6044
6044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, decorators: [{
|
|
6045
6045
|
type: Component,
|
|
@@ -6583,11 +6583,17 @@ class AppTocContentCardV2Component {
|
|
|
6583
6583
|
* 3. NOT all mandatory courses in the same milestone are completed
|
|
6584
6584
|
*/
|
|
6585
6585
|
computeIsMilestoneAssessmentLocked() {
|
|
6586
|
+
// CRITICAL: Only apply milestone assessment locking for Learning Pathway content
|
|
6587
|
+
// Regular courses should NEVER have their assessments locked by milestone logic
|
|
6588
|
+
if (!this.baseContentReadData || this.baseContentReadData.courseCategory !== 'Learning Pathway') {
|
|
6589
|
+
return false;
|
|
6590
|
+
}
|
|
6586
6591
|
// Only apply to assessments that are DIRECT children of milestones
|
|
6587
6592
|
const isMilestoneAssessment = this._cachedIsMilestoneAssessment || this.computeIsMilestoneAssessment();
|
|
6588
6593
|
console.log(`🔒 computeIsMilestoneAssessmentLocked for "${this.content?.name}":`, {
|
|
6589
6594
|
isMilestoneAssessment,
|
|
6590
6595
|
_cachedIsMilestoneAssessment: this._cachedIsMilestoneAssessment,
|
|
6596
|
+
courseCategory: this.baseContentReadData?.courseCategory,
|
|
6591
6597
|
});
|
|
6592
6598
|
if (!isMilestoneAssessment) {
|
|
6593
6599
|
console.log(`🔓 "${this.content?.name}" NOT locked - not a milestone assessment`);
|
|
@@ -7345,8 +7351,27 @@ class AppTocContentCardV2Component {
|
|
|
7345
7351
|
}
|
|
7346
7352
|
});
|
|
7347
7353
|
}
|
|
7354
|
+
/**
|
|
7355
|
+
* Check if text is truncated (has ellipsis) - for single line text
|
|
7356
|
+
* @param element The HTMLElement to check
|
|
7357
|
+
* @returns true if text is truncated, false otherwise
|
|
7358
|
+
*/
|
|
7359
|
+
isTextTruncated(element) {
|
|
7360
|
+
if (!element)
|
|
7361
|
+
return false;
|
|
7362
|
+
return element.offsetWidth < element.scrollWidth;
|
|
7363
|
+
}
|
|
7364
|
+
/**
|
|
7365
|
+
* @param element The HTMLElement to check
|
|
7366
|
+
* @returns true if text is truncated, false otherwise
|
|
7367
|
+
*/
|
|
7368
|
+
isMultiLineTruncated(element) {
|
|
7369
|
+
if (!element)
|
|
7370
|
+
return false;
|
|
7371
|
+
return element.scrollHeight > element.clientHeight;
|
|
7372
|
+
}
|
|
7348
7373
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardV2Component, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }, { token: i0.Renderer2 }, { token: CertificateService }, { token: AppTocService }, { token: i5.ContentLanguageService }, { token: ResourceDownloadHelperService }, { token: i2$1.ConfigurationsService }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n The content is locked. Complete program or all courses to view this module\n </span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\">\n {{ content?.name | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n {{ content?.name | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (3 lines with ellipsis) -->\n <p *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex items-center justify-between\">\n <div>\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n {{content?.leafNodesCount || 0}} completed</span>\n </div>\n <!-- View Achievement Button for completed milestones - Outside clickable area -->\n <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n class=\"view-achievement-container mt-2\">\n <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
|
|
7374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n The content is locked. Complete program or all courses to view this module\n </span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (2 lines with ellipsis) -->\n <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex items-center justify-between\">\n <div>\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n {{content?.leafNodesCount || 0}} completed</span>\n </div>\n <!-- View Achievement Button for completed milestones - Outside clickable area -->\n <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n class=\"view-achievement-container mt-2\">\n <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
|
|
7350
7375
|
trigger('panelInOut', [
|
|
7351
7376
|
transition('void => *', [
|
|
7352
7377
|
style({ transform: 'translateY(-10%)', opacity: '0' }),
|
|
@@ -7370,7 +7395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7370
7395
|
animate(200, style({ transform: 'translateY(-10%)', opacity: '0' }))
|
|
7371
7396
|
])
|
|
7372
7397
|
])
|
|
7373
|
-
], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n The content is locked. Complete program or all courses to view this module\n </span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\">\n {{ content?.name | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n {{ content?.name | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (3 lines with ellipsis) -->\n <p *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex items-center justify-between\">\n <div>\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n {{content?.leafNodesCount || 0}} completed</span>\n </div>\n <!-- View Achievement Button for completed milestones - Outside clickable area -->\n <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n class=\"view-achievement-container mt-2\">\n <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}\n"] }]
|
|
7398
|
+
], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n <ng-container *ngIf=\"isCollection && !isModule\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isCollection && isModule\">\n <ng-container *ngIf=\"content?.moduleResourseCount\">\n <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"isResource\" class=\"resource-container\"\n [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n <div class=\"resource flex sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n <!-- Lock message for curated programs only (shown above content) -->\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n !isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"lock-icon\">lock</mat-icon>\n <span class=\"lock-message mat-body-2\">\n The content is locked. Complete program or all courses to view this module\n </span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n isContentUnlocked\">\n <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n <span class=\"unlock-message mat-body-2\">\n This content is unlocked.\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"completed\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </ng-container>\n </div>\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <!-- For locked assessments: show content but make it non-clickable -->\n <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n [ngClass]=\"{'ml-3': isEnrolled}\">\n <div class=\"text-truncate opacity-60\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <div class=\"flex items-center gap-2 w-full\">\n <mat-icon class=\"text-gray-500\">lock</mat-icon>\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n </div>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n \n <!-- Lock message displayed BELOW assessment details when locked -->\n <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n This content is locked. Complete all mandatory items to unlock the assessment.\n </span>\n </div>\n </div>\n \n <!-- Clickable content template (when NOT locked) -->\n <ng-template #clickableContent>\n <a class=\"width-expand\"\n [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.queryParams : null\"\n [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n matTooltipPosition=\"above\">\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n matTooltipPosition=\"above\">\n {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n </p>\n <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n 'playerbrief.optional' | translate | titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Download button for pdf resources -->\n <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n <a class=\"download-link flex items-center\">\n <span class=\"\">Download</span>\n </a>\n </div>\n </ng-container>\n </div>\n </a>\n </ng-template>\n </div>\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove nodtranslate\">\n View Details\n </h3>\n </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n <ng-container *ngIf=\"isCollection\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'close': !content.viewChildren,\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n <ng-container\n *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div\n [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n </div>\n <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n class=\"lock-icon mr-2 margin-bottom-xxs\">\n <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n </p>\n <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n <span class=\"locked-text\">Locked</span>\n </div>\n <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n <span class=\"mandatory-text mat-caption\">Mandatory</span>\n </div>\n </div>\n \n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div>\n </div>\n <!-- Milestone Badge -->\n <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n </div>\n <!-- Milestone Description (2 lines with ellipsis) -->\n <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ content?.description }}\n </p>\n <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n class=\"time-icon icon-color\">video_library</mat-icon>\n <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n src=\"/assets/icons/content/grey/module.svg\">\n <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n 120)|\n pipeDurationTransform: 'hms' }}</div>\n\n <ng-container *ngIf=\"content?.moduleCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n 'modules' :\n 'module'}}</div>\n </ng-container>\n <ng-container *ngIf=\"content?.leafNodesCount\">\n <div class=\"flex items-center\">\n <span class=\"period\"></span>\n </div>\n <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n >1 ? 'items':\n 'item'}}</div>\n </ng-container>\n </div>\n <!-- Milestone Completion Progress -->\n <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex items-center justify-between\">\n <div>\n <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n {{content?.leafNodesCount || 0}} completed</span>\n </div>\n <!-- View Achievement Button for completed milestones - Outside clickable area -->\n <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n class=\"view-achievement-container mt-2\">\n <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n (click)=\"viewMilestoneAchievement($event)\">\n <span *ngIf=\"!achievementLoading\">View Achievement</span>\n <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n </button>\n </div>\n </div>\n <!-- Unlock Criteria Message for Locked Milestones -->\n <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n <span class=\"locked-criteria-text mat-caption\">\n {{ getMilestoneUnlockMessage() }}\n </span>\n </div>\n \n </div>\n <!-- For course progress to be shown -->\n <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"child-wrapper \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n 'close': !content.viewChildren,\n 'course':!isModule,\n 'module': isModule}\" [@panelInOut]>\n <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n </ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n 'course':!isModule, 'module': isModule,\n 'content-active': pathSet?.has(content.identifier)}\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"content.viewChildren = !content.viewChildren\">\n <div class=\"flex sm:flex-row flex-wrap\">\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n <div class=\"completed mr-2\">\n <div>\n <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n <circle-progress class=\"flex items-center progress mr-1\"\n [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n </ng-template>\n </ng-container>\n <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n {{index}}. {{ content?.name | truncate:50 }}\n </p> -->\n <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"computedQueryParams\">\n <!-- {{content?.courseCategory}} -->\n <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"raiseTelemetry(); changeResource()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n matTooltipPosition=\"above\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{index}}. {{ content?.name | truncate:50 }}\n\n </p>\n <span class=\"content-type optional-span nodtranslate\"\n *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n titlecase}} </span>\n </div>\n <!-- for default grey icons -->\n <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-black60-text\">\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- for white icons when content highlighted -->\n <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n <div class=\"resicons ws-mat-white-text\">\n <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/white/module.svg\"\n class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline'\">\n <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n titlecase}}</span>\n </ng-container>\n <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n (content?.duration||\n hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n pipeDurationTransform:\n 'hms'\n }}</span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </a>\n <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Resource</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Module</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span class=\"nodtranslate\">Course</span>\n </div> -->\n </div>\n\n </div>\n <!-- For course progress to be shown -->\n <ng-container>\n <ng-container\n *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full \">\n <span class=\"mat-body-2 nodtranslate \">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress> -->\n </ng-container>\n <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n <div class=\"flex flex-1\">\n <div class=\"mt-2 mr-4 flex flex-1 flex-col progress-container\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text nodtranslate\">\n {{getCompletionPercentage(content?.identifier)}}%</span>\n </div>\n\n <ws-widget-content-progress [contentId]=\"content?.progress\"\n [progress]=\"getCompletionPercentage(content?.identifier)\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </div>\n <ng-container *ngIf=\"content?.issuedCertificatesId\">\n <a class=\"ml-5 certificate-btn\"\n [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n <span class=\"nodtranslate\">Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\"\n class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader\"\n *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n [diameter]=\"16\"></mat-spinner>\n </div>\n </a>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\"\n (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n </a>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
|
|
7374
7399
|
}], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$3.MatLegacyDialog }, { type: i0.Renderer2 }, { type: CertificateService }, { type: AppTocService }, { type: i5.ContentLanguageService }, { type: ResourceDownloadHelperService }, { type: i2$1.ConfigurationsService }, { type: i7.MatLegacySnackBar }]; }, propDecorators: { content: [{
|
|
7375
7400
|
type: Input
|
|
7376
7401
|
}], expandAll: [{
|
|
@@ -7815,12 +7840,22 @@ class AppTocContentComponent {
|
|
|
7815
7840
|
}
|
|
7816
7841
|
return false;
|
|
7817
7842
|
}
|
|
7843
|
+
/**
|
|
7844
|
+
* Check if multi-line text is truncated (has ellipsis)
|
|
7845
|
+
* @param element The HTMLElement to check
|
|
7846
|
+
* @returns true if text is truncated, false otherwise
|
|
7847
|
+
*/
|
|
7848
|
+
isMultiLineTruncated(element) {
|
|
7849
|
+
if (!element)
|
|
7850
|
+
return false;
|
|
7851
|
+
return element.scrollHeight > element.clientHeight;
|
|
7852
|
+
}
|
|
7818
7853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">{{ m?.name }} {{getMilestoneCompletedOrNot(m?.identifier)}}</div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\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: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
|
|
7854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">\n <p class=\"mb-0 leading-none\">\n <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n </p>\n <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ m?.name }}\n </p>\n </div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
|
|
7820
7855
|
}
|
|
7821
7856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, decorators: [{
|
|
7822
7857
|
type: Component,
|
|
7823
|
-
args: [{ selector: 'ws-widget-app-toc-content', template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">{{ m?.name }} {{getMilestoneCompletedOrNot(m?.identifier)}}</div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"] }]
|
|
7858
|
+
args: [{ selector: 'ws-widget-app-toc-content', template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' && componentName !== 'viewer'\">\n <!-- Milestone / Learning Path UI -->\n <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n <!-- Learning Path Header -->\n <div class=\"learning-path-header\">\n <h3 class=\"learning-path-title\">Learning Path</h3>\n <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n </div>\n <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n <ul class=\"milestone-list\">\n <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n class=\"milestone-checkmark\" alt=\"Completed\" />\n <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n </div>\n <div class=\"milestone-label\">\n <p class=\"mb-0 leading-none\">\n <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n </p>\n <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"multiline-tooltip\">\n {{ m?.name }}\n </p>\n </div>\n </li>\n </ul>\n </ng-container>\n <ng-template #fallbackMilestones>\n <ul class=\"milestone-list\">\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">Pre Assessment</div>\n </li>\n <li class=\"milestone-item completed\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n </div>\n <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n </li>\n <li class=\"milestone-item\" role=\"listitem\">\n <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n <span class=\"milestone-index\">4</span>\n </div>\n <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n </li>\n </ul>\n </ng-template>\n </div>\n</div>\n<div class=\"bggrey\">\n <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n <div class=\"main-container flex flex-col gap-4\">\n <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <div class=\"padding-left-m flex gap-4 tab-list\">\n <ng-container *ngFor=\"let type of typesOfContent\">\n <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n <span>{{type.name}}</span>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n </ws-widget-app-app-toc-sessions-new>\n </ng-container>\n <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n </ng-container>\n </div>\n </div>\n <!-- {{pathSet|json}} -->\n <ng-template #contentBlock>\n <ng-container *ngIf=\"!contentLoader\">\n <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </ng-container>\n <ng-template #noChildren>\n <div *ngIf=\"!isPlayable\"\n class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n The preview for this type of content is unavailable. Please click on Start button above to view.\n </div>\n <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"contentLoader\">\n <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n </ng-container>\n </ng-template>\n <div *ngIf=\"isPreAssessment\">\n <div class=\"content-card \"\n *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier) && isEnrolled}\">\n <!-- {{card|json}} -->\n <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n </div>\n </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
|
|
7824
7859
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: AppTocService }, { type: i2$1.ConfigurationsService }]; }, propDecorators: { batchId: [{
|
|
7825
7860
|
type: Input
|
|
7826
7861
|
}], content: [{
|
|
@@ -8419,13 +8454,13 @@ class AssignmentViewerV2Component {
|
|
|
8419
8454
|
URL.revokeObjectURL(this.fileUrl);
|
|
8420
8455
|
}
|
|
8421
8456
|
}
|
|
8422
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerV2Component, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$
|
|
8457
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerV2Component, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8423
8458
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentViewerV2Component, selector: "ws-widget-app-assignment-viewerV2", ngImport: i0, template: "<div class=\"document-viewer-container\">\n <div *ngIf=\"isLoading\" class=\"loading-container\">\n <mat-spinner diameter=\"40\"></mat-spinner>\n <p class=\"loading-text\">Loading document...</p>\n </div>\n <div *ngIf=\"error\" class=\"error-container\">\n <mat-icon class=\"error-icon\">error_outline</mat-icon>\n <p class=\"error-message\">{{ errorMessage }}</p>\n </div>\n <div class=\"flex\">\n <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n <div>Post Assignment Preview</div>\n <div class=\"flex gap-4\">\n <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n {{ 'userAssignments.discard' | translate }}\n </button>\n <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n {{ 'userAssignments.submit' | translate }}\n </button>\n </div>\n </div>\n <div class=\"loaders\" *ngIf=\"isLoading\">\n <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n </div>\n <div *ngIf=\"showPdfViewer && !isLoading && !error\" class=\"iframe-container pl-4\">\n <iframe title=\"PDF Document Viewer\" [src]=\"safeSrc\" height=\"600px\" style=\"border: none;\" (load)=\"onIframeLoad()\"\n (error)=\"onIframeError()\">\n </iframe>\n </div>\n </div>\n </div>\n</div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:16px}.error-container .error-details{font-size:14px;color:#0009;text-align:left;margin-bottom:16px;background-color:#f5f5f5;padding:12px;border-radius:4px;border-left:4px solid #f44336}.error-container .error-details p{margin:4px 0;word-break:break-all}.error-container .error-details strong{color:#000000de}.error-container .retry-btn{margin-top:8px}.iframe-container{width:735px;height:740px}.iframe-container iframe{border:none;width:735px;height:100%}.unsupported-container{display:flex;align-items:center;justify-content:center;height:600px;width:100%}.unsupported-container .unsupported-message{text-align:center;padding:32px;max-width:500px}.unsupported-container .unsupported-message .file-icon{font-size:64px;height:64px;width:64px;color:#1b4ca1;margin-bottom:16px}.unsupported-container .unsupported-message h3{font-size:24px;color:#000000de;margin-bottom:16px;font-weight:500}.unsupported-container .unsupported-message p{font-size:16px;color:#0009;margin-bottom:8px;line-height:1.5}.unsupported-container .unsupported-message .action-buttons{margin-top:24px}.unsupported-container .unsupported-message .action-buttons .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.unsupported-container .unsupported-message .action-buttons .download-btn mat-icon{margin-right:8px}.unsupported-container .unsupported-message .info-note{margin-top:24px;padding:16px;background-color:#f5f5f5;border-radius:8px;display:flex;align-items:center;gap:8px}.unsupported-container .unsupported-message .info-note .info-icon{color:#1b4ca1;font-size:18px;height:18px;width:18px}.unsupported-container .unsupported-message .info-note small{color:#0009;font-size:14px;line-height:1.4}.download-container{display:flex;align-items:center;justify-content:center;height:100px;width:100%}.download-container .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.download-container .download-btn mat-icon{margin-right:8px}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"], dependencies: [{ 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: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
8424
8459
|
}
|
|
8425
8460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerV2Component, decorators: [{
|
|
8426
8461
|
type: Component,
|
|
8427
8462
|
args: [{ selector: 'ws-widget-app-assignment-viewerV2', template: "<div class=\"document-viewer-container\">\n <div *ngIf=\"isLoading\" class=\"loading-container\">\n <mat-spinner diameter=\"40\"></mat-spinner>\n <p class=\"loading-text\">Loading document...</p>\n </div>\n <div *ngIf=\"error\" class=\"error-container\">\n <mat-icon class=\"error-icon\">error_outline</mat-icon>\n <p class=\"error-message\">{{ errorMessage }}</p>\n </div>\n <div class=\"flex\">\n <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n <div>Post Assignment Preview</div>\n <div class=\"flex gap-4\">\n <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n {{ 'userAssignments.discard' | translate }}\n </button>\n <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n {{ 'userAssignments.submit' | translate }}\n </button>\n </div>\n </div>\n <div class=\"loaders\" *ngIf=\"isLoading\">\n <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n </div>\n <div *ngIf=\"showPdfViewer && !isLoading && !error\" class=\"iframe-container pl-4\">\n <iframe title=\"PDF Document Viewer\" [src]=\"safeSrc\" height=\"600px\" style=\"border: none;\" (load)=\"onIframeLoad()\"\n (error)=\"onIframeError()\">\n </iframe>\n </div>\n </div>\n </div>\n</div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:16px}.error-container .error-details{font-size:14px;color:#0009;text-align:left;margin-bottom:16px;background-color:#f5f5f5;padding:12px;border-radius:4px;border-left:4px solid #f44336}.error-container .error-details p{margin:4px 0;word-break:break-all}.error-container .error-details strong{color:#000000de}.error-container .retry-btn{margin-top:8px}.iframe-container{width:735px;height:740px}.iframe-container iframe{border:none;width:735px;height:100%}.unsupported-container{display:flex;align-items:center;justify-content:center;height:600px;width:100%}.unsupported-container .unsupported-message{text-align:center;padding:32px;max-width:500px}.unsupported-container .unsupported-message .file-icon{font-size:64px;height:64px;width:64px;color:#1b4ca1;margin-bottom:16px}.unsupported-container .unsupported-message h3{font-size:24px;color:#000000de;margin-bottom:16px;font-weight:500}.unsupported-container .unsupported-message p{font-size:16px;color:#0009;margin-bottom:8px;line-height:1.5}.unsupported-container .unsupported-message .action-buttons{margin-top:24px}.unsupported-container .unsupported-message .action-buttons .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.unsupported-container .unsupported-message .action-buttons .download-btn mat-icon{margin-right:8px}.unsupported-container .unsupported-message .info-note{margin-top:24px;padding:16px;background-color:#f5f5f5;border-radius:8px;display:flex;align-items:center;gap:8px}.unsupported-container .unsupported-message .info-note .info-icon{color:#1b4ca1;font-size:18px;height:18px;width:18px}.unsupported-container .unsupported-message .info-note small{color:#0009;font-size:14px;line-height:1.4}.download-container{display:flex;align-items:center;justify-content:center;height:100px;width:100%}.download-container .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.download-container .download-btn mat-icon{margin-right:8px}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"] }]
|
|
8428
|
-
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$
|
|
8463
|
+
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$4.MatDialogRef }, { type: undefined, decorators: [{
|
|
8429
8464
|
type: Inject,
|
|
8430
8465
|
args: [MAT_DIALOG_DATA]
|
|
8431
8466
|
}] }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }]; } });
|
|
@@ -8702,13 +8737,13 @@ class AppTocBatchAssignmentsComponent {
|
|
|
8702
8737
|
return '';
|
|
8703
8738
|
}
|
|
8704
8739
|
}
|
|
8705
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBatchAssignmentsComponent, deps: [{ token: i1$1.Router }, { token: i7.MatLegacySnackBar }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i5$
|
|
8740
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBatchAssignmentsComponent, deps: [{ token: i1$1.Router }, { token: i7.MatLegacySnackBar }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i5$4.MatDialog }, { token: i1$3.MatLegacyDialog }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8706
8741
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBatchAssignmentsComponent, selector: "ws-widget-app-batch-assignments", inputs: { content: "content" }, ngImport: i0, template: "<div class=\"guide-container\">\n <div class=\"flex flex row\">\n <div class=\"info-banner info-banner-warning flex flex-row itm-center\">\n <mat-icon class=\"info-icon margin-right-s assignment-note-icon\">info</mat-icon>\n <span class=\"assignment-note\"> {{ 'userAssignments.note' | translate }}</span>\n </div>\n </div>\n <ng-container *ngFor=\"let assignment of assignments; index as i\">\n <div class=\"guide-card\">\n <div class=\"content flex gap-4 justify-between flex-middle\">\n <div class=\"note-title\">{{i + 1}}. {{assignment.title}} </div>\n <div class=\"flex flex-middle gap-3\" *ngIf=\"!assignment.expand\">\n <button mat-button class=\"download-btn cursor-pointer flex align-center justify-center\"\n (click)=\"downloadFile(assignment)\" [disabled]=\"assignment.downloading\">\n <span *ngIf=\"assignment.downloading\" class=\"white-spinner\">\n <mat-spinner diameter=\"16\" class=\"mr-2\" [style.color]=\"'white'\" strokeWidth=\"2\"></mat-spinner>Download\n </span>\n <span *ngIf=\"!assignment.downloading\">\n {{ 'userAssignments.download' | translate }}\n </span>\n </button>\n <ng-container *ngIf=\"assignment.status === 'DRAFT'\">\n <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n (click)=\"triggerFileUpload(assignment)\">\n {{ 'userAssignments.upload' | translate }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"assignment.status !== 'DRAFT'\">\n <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n (click)=\"triggerFileUpload(assignment)\"\n [disabled]=\"assignment.status === 'SUBMITTED' || assignment.status === 'EVALUATED' || !assignment.enableDownload\">\n {{ 'userAssignments.upload' | translate }}\n </button>\n </ng-container>\n <!-- <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n (click)=\"triggerFileUpload(assignment)\" [disabled]=\"!assignment.enableDownload\">\n Upload\n </button> -->\n <input #resourceFile type=\"file\" name=\"sResourceFile\" id=\"sResourceFile\" class=\"hidden\"\n (change)=\"fileInputEmit(resourceFile.files)\">\n <ng-container *ngIf=\"assignment.status === 'SUBMITTED'\">\n <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n (click)=\"handleViewFeedback(assignment)\" [disabled]=\"true\">{{ 'userAssignments.viewFeedback' | translate\n }}</button>\n </ng-container>\n <ng-container *ngIf=\"assignment.status === 'EVALUATED'\">\n <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n (click)=\"handleViewFeedback(assignment)\">{{ 'userAssignments.viewFeedback' | translate }}</button>\n </ng-container>\n\n </div>\n <mat-icon class=\"cursor-pointer c-icon\" *ngIf=\"assignment.expand\"\n (click)=\"assignment.expand = !assignment.expand\">\n close\n </mat-icon>\n </div>\n <div class=\"flex justify-between flex-col mt-4 feedback-container\"\n *ngIf=\"assignment.expand && assignment?.submissionMeta?.marksGiven\">\n <div class=\"font-bold font-style\">\n <div>\n {{ 'userAssignments.marksObtained' | translate }} - {{getMarks(assignment?.submissionMeta)}}\n </div>\n </div>\n <div class=\"font-bold font-style\">{{ 'userAssignments.instructorFeedback' | translate }}</div>\n <div class=\"font-style\">\n {{assignment?.submissionMeta?.instructorFeedback}}\n </div>\n </div>\n\n </div>\n </ng-container>\n</div>\n<div class=\"flex justify-center items-center mt-4 loader\" *ngIf=\"isLoading\">\n <mat-spinner strokeWidth=\"3\" [diameter]=\"50\" [style.stroke]=\"'#1B4CA1'\" class=\"blue-spinner\"></mat-spinner>\n</div>\n\n\n<!-- No teachers resources message -->\n<div *ngIf=\"assignments?.length === 0\" class=\"no-resources-message mt-4\">\n {{ 'userAssignments.noAssignments' | translate }}\n</div>", styles: [".download-btn,.view-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.view-btn:disabled{cursor:not-allowed;opacity:.6}.c-icon{color:#1b4ca1!important;font-size:14px;height:14px;width:14px;font-weight:600;border:1px solid #1B4CA1;border-radius:11px;padding:2px}.upload-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.font-style{font-size:14px;font-family:Lato}.note-title{font-family:Lato;font-weight:500;font-style:Medium;font-size:16px;line-height:100%;letter-spacing:0%}.guide-card{border-radius:8px;background-color:#fff;padding:16px;margin:16px 0}.download-btn,.download-link{cursor:pointer;transition:opacity .2s ease}.download-btn:disabled,.download-link:disabled{opacity:.6;cursor:not-allowed}.upload-btn:disabled{cursor:not-allowed;border:1px solid #858181!important;color:#858181}mat-spinner{display:inline-block;vertical-align:middle;margin-right:8px}.download-btn .white-spinner ::ng-deep .mat-progress-spinner circle,.download-btn .white-spinner ::ng-deep .mat-spinner circle{stroke:#fff!important}.loader{position:absolute;top:50%;left:50%}.loader .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loader .blue-spinner ::ng-deep .mat-progress-spinner circle,.loader .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}.feedback-container{background:#f4f8ff;padding:15px;border-radius:10px}.assignment-note{font-family:Lato;color:#1b4ca1}.assignment-note-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#f0aa6b!important}\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: "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: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
8707
8742
|
}
|
|
8708
8743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBatchAssignmentsComponent, decorators: [{
|
|
8709
8744
|
type: Component,
|
|
8710
8745
|
args: [{ selector: 'ws-widget-app-batch-assignments', template: "<div class=\"guide-container\">\n <div class=\"flex flex row\">\n <div class=\"info-banner info-banner-warning flex flex-row itm-center\">\n <mat-icon class=\"info-icon margin-right-s assignment-note-icon\">info</mat-icon>\n <span class=\"assignment-note\"> {{ 'userAssignments.note' | translate }}</span>\n </div>\n </div>\n <ng-container *ngFor=\"let assignment of assignments; index as i\">\n <div class=\"guide-card\">\n <div class=\"content flex gap-4 justify-between flex-middle\">\n <div class=\"note-title\">{{i + 1}}. {{assignment.title}} </div>\n <div class=\"flex flex-middle gap-3\" *ngIf=\"!assignment.expand\">\n <button mat-button class=\"download-btn cursor-pointer flex align-center justify-center\"\n (click)=\"downloadFile(assignment)\" [disabled]=\"assignment.downloading\">\n <span *ngIf=\"assignment.downloading\" class=\"white-spinner\">\n <mat-spinner diameter=\"16\" class=\"mr-2\" [style.color]=\"'white'\" strokeWidth=\"2\"></mat-spinner>Download\n </span>\n <span *ngIf=\"!assignment.downloading\">\n {{ 'userAssignments.download' | translate }}\n </span>\n </button>\n <ng-container *ngIf=\"assignment.status === 'DRAFT'\">\n <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n (click)=\"triggerFileUpload(assignment)\">\n {{ 'userAssignments.upload' | translate }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"assignment.status !== 'DRAFT'\">\n <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n (click)=\"triggerFileUpload(assignment)\"\n [disabled]=\"assignment.status === 'SUBMITTED' || assignment.status === 'EVALUATED' || !assignment.enableDownload\">\n {{ 'userAssignments.upload' | translate }}\n </button>\n </ng-container>\n <!-- <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n (click)=\"triggerFileUpload(assignment)\" [disabled]=\"!assignment.enableDownload\">\n Upload\n </button> -->\n <input #resourceFile type=\"file\" name=\"sResourceFile\" id=\"sResourceFile\" class=\"hidden\"\n (change)=\"fileInputEmit(resourceFile.files)\">\n <ng-container *ngIf=\"assignment.status === 'SUBMITTED'\">\n <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n (click)=\"handleViewFeedback(assignment)\" [disabled]=\"true\">{{ 'userAssignments.viewFeedback' | translate\n }}</button>\n </ng-container>\n <ng-container *ngIf=\"assignment.status === 'EVALUATED'\">\n <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n (click)=\"handleViewFeedback(assignment)\">{{ 'userAssignments.viewFeedback' | translate }}</button>\n </ng-container>\n\n </div>\n <mat-icon class=\"cursor-pointer c-icon\" *ngIf=\"assignment.expand\"\n (click)=\"assignment.expand = !assignment.expand\">\n close\n </mat-icon>\n </div>\n <div class=\"flex justify-between flex-col mt-4 feedback-container\"\n *ngIf=\"assignment.expand && assignment?.submissionMeta?.marksGiven\">\n <div class=\"font-bold font-style\">\n <div>\n {{ 'userAssignments.marksObtained' | translate }} - {{getMarks(assignment?.submissionMeta)}}\n </div>\n </div>\n <div class=\"font-bold font-style\">{{ 'userAssignments.instructorFeedback' | translate }}</div>\n <div class=\"font-style\">\n {{assignment?.submissionMeta?.instructorFeedback}}\n </div>\n </div>\n\n </div>\n </ng-container>\n</div>\n<div class=\"flex justify-center items-center mt-4 loader\" *ngIf=\"isLoading\">\n <mat-spinner strokeWidth=\"3\" [diameter]=\"50\" [style.stroke]=\"'#1B4CA1'\" class=\"blue-spinner\"></mat-spinner>\n</div>\n\n\n<!-- No teachers resources message -->\n<div *ngIf=\"assignments?.length === 0\" class=\"no-resources-message mt-4\">\n {{ 'userAssignments.noAssignments' | translate }}\n</div>", styles: [".download-btn,.view-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.view-btn:disabled{cursor:not-allowed;opacity:.6}.c-icon{color:#1b4ca1!important;font-size:14px;height:14px;width:14px;font-weight:600;border:1px solid #1B4CA1;border-radius:11px;padding:2px}.upload-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.font-style{font-size:14px;font-family:Lato}.note-title{font-family:Lato;font-weight:500;font-style:Medium;font-size:16px;line-height:100%;letter-spacing:0%}.guide-card{border-radius:8px;background-color:#fff;padding:16px;margin:16px 0}.download-btn,.download-link{cursor:pointer;transition:opacity .2s ease}.download-btn:disabled,.download-link:disabled{opacity:.6;cursor:not-allowed}.upload-btn:disabled{cursor:not-allowed;border:1px solid #858181!important;color:#858181}mat-spinner{display:inline-block;vertical-align:middle;margin-right:8px}.download-btn .white-spinner ::ng-deep .mat-progress-spinner circle,.download-btn .white-spinner ::ng-deep .mat-spinner circle{stroke:#fff!important}.loader{position:absolute;top:50%;left:50%}.loader .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loader .blue-spinner ::ng-deep .mat-progress-spinner circle,.loader .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}.feedback-container{background:#f4f8ff;padding:15px;border-radius:10px}.assignment-note{font-family:Lato;color:#1b4ca1}.assignment-note-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#f0aa6b!important}\n"] }]
|
|
8711
|
-
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i7.MatLegacySnackBar }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i5$
|
|
8746
|
+
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i7.MatLegacySnackBar }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i5$4.MatDialog }, { type: i1$3.MatLegacyDialog }, { type: i1$1.ActivatedRoute }]; }, propDecorators: { content: [{
|
|
8712
8747
|
type: Input
|
|
8713
8748
|
}] } });
|
|
8714
8749
|
|
|
@@ -9838,13 +9873,13 @@ class AssignmentViewerComponent {
|
|
|
9838
9873
|
duration,
|
|
9839
9874
|
});
|
|
9840
9875
|
}
|
|
9841
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerComponent, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$
|
|
9876
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerComponent, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9842
9877
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentViewerComponent, selector: "ws-widget-app-assignment-viewer", viewQueries: [{ propertyName: "docIframe", first: true, predicate: ["docIframe"], descendants: true }], ngImport: i0, template: "<div class=\"document-viewer-container\">\n <!-- Loading spinner -->\n <div *ngIf=\"loading\" class=\"loading-container\">\n <mat-spinner diameter=\"40\"></mat-spinner>\n <p class=\"loading-text\">Loading document...</p>\n </div>\n\n <!-- Error message -->\n <div *ngIf=\"error\" class=\"error-container\">\n <mat-icon class=\"error-icon\">error_outline</mat-icon>\n <p class=\"error-message\">{{ errorMessage }}</p>\n <p class=\"error-url\">URL: {{ documentUrl }}</p>\n </div>\n\n\n <div class=\"flex\">\n <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n <div>Post Assignment Preview</div>\n <div class=\"flex gap-4\">\n <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n {{ 'userAssignments.discard' | translate }}\n </button>\n <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n {{ 'userAssignments.submit' | translate }}\n </button>\n </div>\n </div>\n <div class=\"loaders\" *ngIf=\"loading\">\n <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n </div>\n <div *ngIf=\"!loading && !error\">\n <div *ngIf=\"!error\" class=\"iframe-container pb-4\" [ngStyle]=\"{ 'height': height, 'width': '100%' }\">\n <iframe *ngIf=\"safeSrc\" [src]=\"safeSrc\" [ngStyle]=\"{ 'width': '100%', 'height': '100%' }\" frameborder=\"1\"\n (load)=\"onIframeLoad()\" (error)=\"onIframeError()\">\n </iframe>\n </div>\n </div>\n </div>\n </div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:8px}.error-container .error-url{font-size:14px;color:#0009;word-break:break-all;max-width:100%}.iframe-container{width:800px}.iframe-container iframe{border:none;width:800px;height:100%}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
9843
9878
|
}
|
|
9844
9879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerComponent, decorators: [{
|
|
9845
9880
|
type: Component,
|
|
9846
9881
|
args: [{ selector: 'ws-widget-app-assignment-viewer', template: "<div class=\"document-viewer-container\">\n <!-- Loading spinner -->\n <div *ngIf=\"loading\" class=\"loading-container\">\n <mat-spinner diameter=\"40\"></mat-spinner>\n <p class=\"loading-text\">Loading document...</p>\n </div>\n\n <!-- Error message -->\n <div *ngIf=\"error\" class=\"error-container\">\n <mat-icon class=\"error-icon\">error_outline</mat-icon>\n <p class=\"error-message\">{{ errorMessage }}</p>\n <p class=\"error-url\">URL: {{ documentUrl }}</p>\n </div>\n\n\n <div class=\"flex\">\n <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n <div>Post Assignment Preview</div>\n <div class=\"flex gap-4\">\n <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n {{ 'userAssignments.discard' | translate }}\n </button>\n <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n {{ 'userAssignments.submit' | translate }}\n </button>\n </div>\n </div>\n <div class=\"loaders\" *ngIf=\"loading\">\n <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n </div>\n <div *ngIf=\"!loading && !error\">\n <div *ngIf=\"!error\" class=\"iframe-container pb-4\" [ngStyle]=\"{ 'height': height, 'width': '100%' }\">\n <iframe *ngIf=\"safeSrc\" [src]=\"safeSrc\" [ngStyle]=\"{ 'width': '100%', 'height': '100%' }\" frameborder=\"1\"\n (load)=\"onIframeLoad()\" (error)=\"onIframeError()\">\n </iframe>\n </div>\n </div>\n </div>\n </div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:8px}.error-container .error-url{font-size:14px;color:#0009;word-break:break-all;max-width:100%}.iframe-container{width:800px}.iframe-container iframe{border:none;width:800px;height:100%}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"] }]
|
|
9847
|
-
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$
|
|
9882
|
+
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$4.MatDialogRef }, { type: undefined, decorators: [{
|
|
9848
9883
|
type: Inject,
|
|
9849
9884
|
args: [MAT_DIALOG_DATA]
|
|
9850
9885
|
}] }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }]; }, propDecorators: { docIframe: [{
|
|
@@ -14838,7 +14873,7 @@ class EnrollLanguageDialogueComponent {
|
|
|
14838
14873
|
}
|
|
14839
14874
|
}
|
|
14840
14875
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollLanguageDialogueComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14841
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollLanguageDialogueComponent, selector: "ws-app-enroll-language-dialogue", ngImport: i0, template: "<mat-dialog-content>\n <div class=\"dialog-header text-left flex flex-col justify-between align-items-center\">\n <p class=\"mat-subheading-1 text-center\">Choose Your Preferred Language</p>\n <p class=\"mat-body-2 text-center\">This course is available in multiple languages. You can select one to begin.</p>\n </div>\n <div class=\"lang-msg-wrapper\">\n <mat-form-field appearance=\"outline\" class=\"lang-select-wrapper\">\n <mat-select [(ngModel)]=\"selectedLanguage\" (ngModelChange)=\"onLanguageChange($event)\" class=\"mat-body-1\">\n <mat-option *ngFor=\"let lang of languageList\" [value]=\"lang\">\n {{ lang.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n\n <div class=\"flex items-center justify-center\">\n <a (click)=\"this.dialogRef.close()\" class=\"cursor-pointer mat-stroked-button custom-rounded margin-right-m\">Cancel</a>\n <a (click)=\"onSubmit()\" class=\"cursor-pointer action-button\">Confirm & Start Course</a>\n </div>\n </div>\n</mat-dialog-content>\n", styles: [".lang-radio-btn{width:100%;margin-bottom:16px}.mat-form-field{width:100%}.custom-rounded{border:1px solid #1a4ca1!important;border-radius:50px;padding:8px 16px;height:40px;display:flex;align-items:center;justify-content:center;color:#1a4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$
|
|
14876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollLanguageDialogueComponent, selector: "ws-app-enroll-language-dialogue", ngImport: i0, template: "<mat-dialog-content>\n <div class=\"dialog-header text-left flex flex-col justify-between align-items-center\">\n <p class=\"mat-subheading-1 text-center\">Choose Your Preferred Language</p>\n <p class=\"mat-body-2 text-center\">This course is available in multiple languages. You can select one to begin.</p>\n </div>\n <div class=\"lang-msg-wrapper\">\n <mat-form-field appearance=\"outline\" class=\"lang-select-wrapper\">\n <mat-select [(ngModel)]=\"selectedLanguage\" (ngModelChange)=\"onLanguageChange($event)\" class=\"mat-body-1\">\n <mat-option *ngFor=\"let lang of languageList\" [value]=\"lang\">\n {{ lang.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n\n <div class=\"flex items-center justify-center\">\n <a (click)=\"this.dialogRef.close()\" class=\"cursor-pointer mat-stroked-button custom-rounded margin-right-m\">Cancel</a>\n <a (click)=\"onSubmit()\" class=\"cursor-pointer action-button\">Confirm & Start Course</a>\n </div>\n </div>\n</mat-dialog-content>\n", styles: [".lang-radio-btn{width:100%;margin-bottom:16px}.mat-form-field{width:100%}.custom-rounded{border:1px solid #1a4ca1!important;border-radius:50px;padding:8px 16px;height:40px;display:flex;align-items:center;justify-content:center;color:#1a4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
|
|
14842
14877
|
}
|
|
14843
14878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollLanguageDialogueComponent, decorators: [{
|
|
14844
14879
|
type: Component,
|
|
@@ -14930,7 +14965,7 @@ class SurveyFormQuestionComponent {
|
|
|
14930
14965
|
this.questionValues.emit(answerDetails);
|
|
14931
14966
|
}
|
|
14932
14967
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n <div class=\"flex items-start\">\n <div class=\"font-semibold margin-remove flex\"\n [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{questionForm.value?.question}}\n </div>\n </div>\n <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n <ng-container *ngSwitchCase=\"'dropdown'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n <mat-option value=\"{{obj.value}}\"\n *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'phone number'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n </mat-form-field>\n <ng-container\n *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n <mat-error class=\"mat-error mb-1\">\n {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <mat-form-field appearance=\"outline\">\n <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n </mat-radio-group>\n </ng-container>\n <ng-container *ngSwitchCase=\"'email'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n </mat-form-field>\n <ng-container\n *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n <mat-error class=\"mat-error mb-1\">\n {{ 'profileInfo.invalidEmail' | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'rating'\">\n <div class=\"rating-container\">\n <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n star\n </mat-icon>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'text'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'textarea'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n formControlName=\"answer\"></textarea>\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'radio'\">\n <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n {{ obj.key }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n <ng-container *ngSwitchCase=\"'numeric'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n maxlength=\"18\" />\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <section class=\"pt-2\">\n <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n (change)=\"checkboxClicked($event, i)\">\n {{ objct.key }}\n </mat-checkbox>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"fieldDetails.notApplicable\">\n <div class=\"mt-2\">\n <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n </mat-radio-group>\n </div>\n </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatLegacyInputModule }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { 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: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i13$2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatLegacyFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
14968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n <div class=\"flex items-start\">\n <div class=\"font-semibold margin-remove flex\"\n [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{questionForm.value?.question}}\n </div>\n </div>\n <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n <ng-container *ngSwitchCase=\"'dropdown'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n <mat-option value=\"{{obj.value}}\"\n *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'phone number'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n </mat-form-field>\n <ng-container\n *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n <mat-error class=\"mat-error mb-1\">\n {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <mat-form-field appearance=\"outline\">\n <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n </mat-radio-group>\n </ng-container>\n <ng-container *ngSwitchCase=\"'email'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n </mat-form-field>\n <ng-container\n *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n <mat-error class=\"mat-error mb-1\">\n {{ 'profileInfo.invalidEmail' | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'rating'\">\n <div class=\"rating-container\">\n <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n star\n </mat-icon>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'text'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'textarea'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n formControlName=\"answer\"></textarea>\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'radio'\">\n <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n {{ obj.key }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n <ng-container *ngSwitchCase=\"'numeric'\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n maxlength=\"18\" />\n </mat-form-field>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <section class=\"pt-2\">\n <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n (change)=\"checkboxClicked($event, i)\">\n {{ objct.key }}\n </mat-checkbox>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"fieldDetails.notApplicable\">\n <div class=\"mt-2\">\n <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n </mat-radio-group>\n </div>\n </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatLegacyInputModule }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { 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: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i13$2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatLegacyFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
14934
14969
|
}
|
|
14935
14970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, decorators: [{
|
|
14936
14971
|
type: Component,
|
|
@@ -15483,7 +15518,7 @@ class AppTocV2Service {
|
|
|
15483
15518
|
"identifier": milestone.id,
|
|
15484
15519
|
"description": milestone.description,
|
|
15485
15520
|
"mimeType": "application/vnd.ekstep.content-collection",
|
|
15486
|
-
"duration": "
|
|
15521
|
+
"duration": "0",
|
|
15487
15522
|
"primaryCategory": "Milestone",
|
|
15488
15523
|
"courseCategory": "Milestone",
|
|
15489
15524
|
"createdBy": "25311a4f-fa42-4cf7-882a-5e79198edfcb",
|
|
@@ -15509,6 +15544,7 @@ class AppTocV2Service {
|
|
|
15509
15544
|
// Set parent reference for courses inside milestone
|
|
15510
15545
|
mileStoneCourse.parent = milestone.id;
|
|
15511
15546
|
mileStoneCourse['moduleCount'] = 0;
|
|
15547
|
+
mileStoneData['duration'] = String(Number(mileStoneData['duration']) + Number(mileStoneCourse?.duration || 0));
|
|
15512
15548
|
this.tocSvc.mapModuleCount(mileStoneCourse);
|
|
15513
15549
|
if (mileStoneCourse && mileStoneCourse?.leafNodes && mileStoneCourse?.leafNodes?.length) {
|
|
15514
15550
|
leafNodes = [...leafNodes, ...mileStoneCourse.leafNodes];
|
|
@@ -17962,7 +17998,7 @@ class EnrollProfileFormComponent {
|
|
|
17962
17998
|
this.checkCurrentDesignationPresent();
|
|
17963
17999
|
}
|
|
17964
18000
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollProfileFormComponent, deps: [{ token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialogRef }, { token: UserProfileService }, { token: i2$1.ConfigurationsService }, { token: ProfileV2Service }, { token: OtpService }, { token: NPSGridService }, { token: i1$2.TranslateService }, { token: i2.DatePipe }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17965
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollProfileFormComponent, selector: "ws-app-enroll-profile-form", host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "timerDiv", first: true, predicate: ["timerDiv"], descendants: true }, { propertyName: "emailTimerDiv", first: true, predicate: ["emailTimerDiv"], descendants: true }, { propertyName: "textBox", first: true, predicate: ["textBox"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "languageTextBox", first: true, predicate: ["languageTextBox"], descendants: true }, { propertyName: "languageDropdown", first: true, predicate: ["languageDropdown"], descendants: true }], ngImport: i0, template: "<div #fullScreenContainer>\n <div class=\"dialog-header text-right mb-2\">\n <mat-icon class=\"mat-icon notranslate material-icons close-icon cursor-pointer\" matprefix=\"\" role=\"img\" aria-hidden=\"true\" [mat-dialog-close]=\"false\">close</mat-icon>\n </div>\n <h1> {{data?.courseName}} </h1>\n <div class=\"w-full\" *ngIf=\"!isLoading\">\n <form [formGroup]=\"userDetailsForm\" class=\"userDetailsForm\">\n <div class=\"w-full\" *ngIf=\"canShowName\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.name' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"name\" placeholder=\"Name\"/>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowOrg\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ (showDoptChanges ? 'profileInfo.presentOrganisation' : 'profileInfo.organisation') | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"organisation\" placeholder=\"Organisation\"/>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowEmail\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.email' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"primaryEmail\" placeholder=\"Enter email\" (keyup)=\"handleEmpty('primaryEmail')\"/>\n </mat-form-field>\n <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm.get('primaryEmail').hasError('required') || userDetailsForm.get('primaryEmail').hasError('pattern')\">\n {{ 'profileInfo.invalidEmail' | translate }}\n </mat-error>\n <div class=\"flex justify-end\" *ngIf=\"verifyEmail && !otpSent && !eVerified\">\n <span class=\"get-otp\" (click)=\"handleGenerateEmailOTP('email')\">{{ 'profileInfo.getOTP' | translate\n }}</span>\n </div>\n <div *ngIf=\"emailOtpSent\">\n <form [formGroup]=\"emailOtpForm\">\n <div class=\"w-full\">\n <div class=\"flex enter-otp\">\n <div class=\"font-semibold required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.enterOTP' | translate }}\n </div>\n <div class=\"mb-3\">Time Remaining: <span #emailTimerDiv></span></div>\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n <input type=\"text\" matInput formControlName=\"eOtp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n </mat-form-field>\n </div>\n <div class=\"w-full\">\n <div class=\"flex justify-center\" *ngIf=\"showEmailResendOTP\">\n <div class=\"flex flex-row\">\n <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n <div class=\"resend-otp\" (click)=\"handleResendEmailOTP()\"> {{ 'profileInfo.resentOTP' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"w-full mb-4\">\n <div class=\"flex flex-row justify-between\">\n <button class=\"save-button\" (click)=\"verifyEmailOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowGroup\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.group' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select formControlName=\"group\" placeholder=\"{{ 'profileInfo.chooseAGroup' | translate }}\">\n <mat-option *ngFor=\"let group of groupData\" value=\"{{group}}\">{{ group }}</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n {{'profileInfo.groupNote' | translate}}\n </div>\n </div>\n <div class=\"w-full relative\" *ngIf=\"canShowDesignation\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.designation' | translate }}\n </div>\n <!-- <mat-form-field appearance=\"outline\" class=\"w-full\">\n <div class=\"flex flex-row auto-complete-row relative\">\n <input type=\"text\" class=\"input-text high-zindex\" matInput formControlName=\"designation\"\n (input)=\"filterdesignation($event.target.value)\" (focus)=\"onDesignationsFocus()\" #textBox\n placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\">\n <mat-icon class=\"disagnation-caret\">arrow_drop_down</mat-icon>\n </div>\n </mat-form-field> -->\n <div class=\"custom-select-container\">\n <mat-form-field appearance=\"outline\" class=\"fixed-height-select\">\n <mat-select placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\" formControlName=\"designation\" (closed)=\"onDesignationDropdownClosed()\" (openedChange)=\"setupScrollListener($event)\" panelClass=\"search-panel\">\n <!-- Sticky search input container -->\n <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <input \n type=\"text\" \n placeholder=\"Search designation\" \n formControlName=\"searchDesignation\" \n class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n autocomplete=\"off\">\n <button \n *ngIf=\"searchDesignation?.value\" \n type=\"button\" \n class=\"clear-button\" \n (click)=\"searchDesignation?.setValue('')\">\n \u2715\n </button>\n </div>\n </div>\n <!-- Options list -->\n <mat-option *ngFor=\"let option of designationsMeta \" [value]=\"option?.name\" (click)=\"selectDesignation(option?.name)\">\n {{ option?.name }}\n </mat-option>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n Loading more...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(designationsMeta )?.length === 0\" disabled>\n No matches found\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <mat-error *ngIf=\"userDetailsForm?.controls['designation']?.invalid && userDetailsForm?.controls['designation']?.touched\"\n class=\"mat-error\">\n Please select a valid designation.\n </mat-error>\n <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n {{'profileInfo.designationNote' | translate}}\n </div>\n <!-- <div class=\"auto-list flex flex-col ignore-blur\" #dropdown\n *ngIf=\"openDesignationDropdown && filterDesignationsMeta.length\">\n <div (mousedown)=\"preventBlur($event)\"\n class=\"item {{userDetailsForm.controls['designation']?.value?.toLowerCase() === designation?.name?.toLowerCase() ? 'item-active' : ''}}\"\n *ngFor=\"let designation of filterDesignationsMeta\" (click)=\"selectDesignation(designation.name)\">\n {{ designation?.name }}\n </div>\n </div> -->\n </div>\n <div class=\"w-full relative\" *ngIf=\"canShowDesignation && canShowOtherDesignation\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.otherDesignation' | translate }}\n </div>\n <div *ngIf=\"canShowOtherDesignation\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"otherDesignation\" placeholder=\"{{ 'profileInfo.enterDesignation' | translate }}\"/>\n </mat-form-field>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowEmployeeCode\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.employeeId' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"employeeCode\" placeholder=\"Enter employee code\"/>\n </mat-form-field> \n <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('employeeCode')?.hasError('pattern')\">\n Please enter an Alpha-numeric value only\n </mat-error> \n </div>\n <div class=\"w-full\" *ngIf=\"canshowMobile\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.mobileNumber' | translate }}\n </div>\n <div class=\"flex flex-row gap-4\">\n <div class=\"country-code flex justify-center items-center\" appearance=\"outline\">\n +91\n </div>\n <div class=\"flex-1\">\n <div class=\"flex flex-col\">\n <mat-form-field appearance=\"outline\" class=\"mobile-num\">\n <input type=\"text\" class=\"input-text mobile-text relative\" maxlength=\"10\" (keyup)=\"handleEmpty('mobile')\"\n matInput formControlName=\"mobile\" placeholder=\"Enter mobile number\"/>\n <mat-icon class=\"verified-check\" *ngIf=\"mVerified\">check_circle</mat-icon>\n </mat-form-field>\n <mat-error class=\"mat-error\"\n *ngIf=\"userDetailsForm.get('mobile').hasError('required') || userDetailsForm.get('mobile').hasError('pattern')\">\n {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n </mat-error>\n </div>\n <div class=\"flex justify-end\" *ngIf=\"verifyMobile && !otpSent && !mVerified\">\n <span class=\"get-otp sm:mr-4\" (click)=\"handleGenerateOTP('phone')\">{{ 'profileInfo.getOTP' |\n translate }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"otpSent\"> \n <form [formGroup]=\"otpForm\">\n <div class=\"w-full\">\n <div class=\"flex enter-otp\">\n <div class=\"font-semibold required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.enterOTP' | translate }}\n </div>\n <div class=\"mb-3\">Time Remaining: <span #timerDiv></span></div>\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n <input type=\"text\" matInput formControlName=\"otp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n </mat-form-field>\n </div>\n <div class=\"w-full\">\n <div class=\"flex justify-center\" *ngIf=\"showResendOTP\"> \n <div class=\"flex flex-row\">\n <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n <div class=\"resend-otp\" (click)=\"handleResendOTP()\"> {{ 'profileInfo.resentOTP' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"w-full mb-4\">\n <div class=\"flex flex-row justify-between\">\n <button class=\"save-button\" (click)=\"verifyMobileOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowGender\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.gender' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select formControlName=\"gender\" placeholder=\"Select gender\">\n <mat-option *ngFor=\"let _gender of eUserGender\" value=\"{{ _gender }}\">{{\n handleTranslateTo(_gender.toLowerCase()) }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowDob\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.dob' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput class=\"input-text icon-include-input\" [max]=\"currentDate\" [matDatepicker]=\"picker\" [(ngModel)]=\"selectedDate\"\n formControlName=\"dob\" placeholder=\"Select date of birth\" />\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </div>\n <div class=\"w-full relative\" *ngIf=\"canShowDomicileMedium\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.motherTongue' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <div class=\"flex flex-row auto-complete-row relative\">\n <input type=\"text\" class=\"input-text high-zindex\" aria-label=\"Domicile Medium (Mother Tongue)\" matInput\n formControlName=\"domicileMedium\" placeholder=\"Select mother tongue\"\n (input)=\"filterLanguage($event.target.value)\" (focus)=\"onLanguageFocus()\" #languageTextBox/>\n <mat-icon class=\"mother-toungue-caret\">arrow_drop_down</mat-icon>\n </div>\n </mat-form-field>\n <mat-error *ngIf=\"userDetailsForm.controls['domicileMedium'].invalid && userDetailsForm.controls['domicileMedium'].touched\"\n class=\"mat-error\">\n Please select a valid mother tongue.\n </mat-error>\n <div class=\"auto-language-list flex flex-col ignore-blur\" #languageDropdown\n *ngIf=\"openLanguageDropdown && masterLanguages?.length\">\n <div (mousedown)=\"preventLanguageBlur($event)\"\n class=\"language-item {{userDetailsForm.controls['domicileMedium']?.value?.toLowerCase() === language?.name?.toLowerCase() ? 'language-item-active' : ''}}\"\n *ngFor=\"let language of masterLanguages\" (click)=\"selectLanguage(language.name)\">\n {{ language?.name }}\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowCategory\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.category' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\n <mat-option *ngFor=\"let category of eCategory\" value=\"{{ category }}\">{{\n handleTranslateTo(category?.toLowerCase()) }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowpinCode\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'userProfile.officePinCode' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"email\" class=\"input-text\" matInput maxlength=\"6\" formControlName=\"pinCode\" placeholder=\"Enter pincode\"/>\n </mat-form-field>\n <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('pinCode')?.hasError('pattern')\">\n {{ 'profileInfo.invalidPinCode' | translate }}\n </mat-error> \n </div>\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.fromGovOrganization' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"isCadre\" (selectionChange)=\"getIsCadreStatus($event.value)\" placeholder=\"Select cadre\">\n <mat-option [value]=\"true\">Yes</mat-option>\n <mat-option [value]=\"false\">No</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && isCadreStatus && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.typeOfCivilService' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"typeOfCivilService\" (selectionChange)=\"getService($event.value)\" placeholder=\"Select type of civil service\">\n <mat-option *ngFor=\"let service of civilServiceTypes\" [value]=\"service\">{{ service }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('typeOfCivilService').value && userDetailsForm.get('isCadre').value && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.serviceType' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"serviceType\" (selectionChange)=\"onServiceSelect($event)\" placeholder=\"Select service\">\n <mat-option *ngFor=\"let service of serviceName\" [value]=\"service\">{{ service }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType').value && \n userDetailsForm.get('isCadre').value \n && userDetailsForm.get('typeOfCivilService').value && (\n userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n ) && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.cadre' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"cadreName\" (selectionChange)=\"onCadreSelect($event.value)\" placeholder=\"Select cadre\">\n <mat-option *ngFor=\"let state of cadre\" [value]=\"state\">{{ state }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <ng-container *ngIf=\"!showDoptChanges\">\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType') && (userDetailsForm.get('serviceType').value && \n userDetailsForm.get('isCadre').value && userDetailsForm.get('typeOfCivilService').value && (\n userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n ) && userDetailsForm.get('cadreName').value) ? true : ((userDetailsForm.get('serviceType').value && \n userDetailsForm.get('isCadre').value \n && userDetailsForm.get('typeOfCivilService').value && (\n userDetailsForm.get('serviceType').value !== 'Indian Administrative Service (IAS)' && \n userDetailsForm.get('serviceType').value !== 'Indian Police Service (IPS)' && \n userDetailsForm.get('serviceType').value !== 'Indian Forest Service (IFoS)' \n ))) ? true : false\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.batch' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"cadreBatch\" placeholder=\"Select batch\">\n <mat-option *ngFor=\"let year of yearArray\" [value]=\"year\">{{ year }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </ng-container>\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('isCadre').value && userDetailsForm.get('cadreBatch').value && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required mb-3\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.cadreControllingAuthority' | translate }}\n </div>\n <span class=\"cadreControl-name\">{{cadreControllingAuthority}}</span>\n </div>\n <ng-container>\n <div class=\"w-full flex flex-row gap-4 justify-end margin-top-m\">\n <button\n class=\"save-button\"\n [disabled]=\"userDetailsForm?.invalid || !mVerified || !eVerified\"\n (click)=\"onSubmitForm(userDetailsForm)\">\n {{ 'profileInfo.saveChanges' | translate }}\n </button>\n </div>\n </ng-container>\n </form>\n </div>\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>\n</div>\n", styles: ["::ng-deep .course-survey .main-container{width:auto!important;overflow-y:auto!important;max-height:auto!important}.high-zindex{z-index:9999}.auto-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-list .item{padding:5px 15px}.auto-list .item:hover{background-color:#f3f3f3;cursor:pointer}.auto-list .item-active{background-color:#1b4ca1!important;color:#fff!important}.auto-language-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-language-list .language-item{padding:5px 15px}.auto-language-list .language-item:hover{background-color:#f3f3f3;cursor:pointer}.auto-language-list .language-item-active{background-color:#1b4ca1!important;color:#fff!important}::ng-deep .mat-calendar-body-active{background:#1b4ca1!important;border-radius:100%!important}::ng-deep .course-survey .lib-container{height:100%!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container{padding-left:0!important;padding-right:0!important;padding-bottom:1rem!important}}.disagnation-caret,.mother-toungue-caret{position:absolute;right:0;bottom:0}::ng-deep .userDetailsForm .mat-form-field-appearance-outline .mat-form-field-infix{padding:.5rem 0 .8rem}input[disabled]+mat-icon.disagnation-caret{opacity:.5}input[disabled]+mat-icon.mother-toungue-caret{opacity:.5}::ng-deep .course-survey .lib-container-2{height:auto;min-height:unset!important;padding:0!important;box-shadow:none!important;margin-bottom:2rem!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container-2{padding-left:0!important;padding-right:0!important}}.profile-form-field .mat-select{border:none}.customForm{padding-right:0!important;padding-bottom:1rem!important;padding:1rem 3rem}.cadreControl-name{background:#c3c3c3;padding:10px}.country-code{margin-top:5px;text-align:center;width:50px;height:46px;border:1px solid #d6d5d5;border-radius:5px}.get-otp{color:#1b4ca1;font-weight:700;cursor:pointer;font-size:14px}.enter-otp{align-items:center;justify-content:space-between}.custom-size{width:96%}.resend-otp{color:#1b4ca1;font-weight:700;cursor:pointer}.verified-check{position:absolute;right:3px;color:#5fa800;font-size:18px;width:18px;height:18px}.save-button:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.mat-error{margin:-10px 0 5px}:host ::ng-deep .userDetailsForm .mat-form-field-wrapper{padding-bottom:8px!important}.custom-select-container,.fixed-height-select{width:100%}.fixed-height-select ::ng-deep .mat-form-field-flex{height:48px!important;min-height:45px!important;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-infix{padding:0!important;border-top:0!important;height:45px!important;display:flex;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.fixed-height-select ::ng-deep .mat-select-arrow-wrapper{transform:translateY(0)!important}.fixed-height-select ::ng-deep .mat-form-field-label-wrapper{top:-1.1em}::ng-deep .search-panel{max-height:350px}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:2;background:#fff;padding:8px;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000014}::ng-deep .search-panel .search-input-wrapper{position:relative;width:100%}::ng-deep .search-panel .search-input{width:100%;height:35px;padding:0 30px 0 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;box-sizing:border-box}::ng-deep .search-panel .search-input:focus{outline:none;border-color:#f3962f;box-shadow:0 0 0 1px #f3962f33}::ng-deep .search-panel .clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#00000080;font-size:14px;padding:4px;display:flex;align-items:center;justify-content:center}::ng-deep .search-panel .clear-button:hover{color:#000c}::ng-deep .search-panel .mat-option.mat-option-disabled{color:#00000061;font-style:italic}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-flex{min-height:45px!important;height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-infix{min-height:45px!important;height:45px!important;padding-top:0!important;padding-bottom:0!important}\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: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { 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: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
18001
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollProfileFormComponent, selector: "ws-app-enroll-profile-form", host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "timerDiv", first: true, predicate: ["timerDiv"], descendants: true }, { propertyName: "emailTimerDiv", first: true, predicate: ["emailTimerDiv"], descendants: true }, { propertyName: "textBox", first: true, predicate: ["textBox"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "languageTextBox", first: true, predicate: ["languageTextBox"], descendants: true }, { propertyName: "languageDropdown", first: true, predicate: ["languageDropdown"], descendants: true }], ngImport: i0, template: "<div #fullScreenContainer>\n <div class=\"dialog-header text-right mb-2\">\n <mat-icon class=\"mat-icon notranslate material-icons close-icon cursor-pointer\" matprefix=\"\" role=\"img\" aria-hidden=\"true\" [mat-dialog-close]=\"false\">close</mat-icon>\n </div>\n <h1> {{data?.courseName}} </h1>\n <div class=\"w-full\" *ngIf=\"!isLoading\">\n <form [formGroup]=\"userDetailsForm\" class=\"userDetailsForm\">\n <div class=\"w-full\" *ngIf=\"canShowName\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.name' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"name\" placeholder=\"Name\"/>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowOrg\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ (showDoptChanges ? 'profileInfo.presentOrganisation' : 'profileInfo.organisation') | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"organisation\" placeholder=\"Organisation\"/>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowEmail\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.email' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"primaryEmail\" placeholder=\"Enter email\" (keyup)=\"handleEmpty('primaryEmail')\"/>\n </mat-form-field>\n <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm.get('primaryEmail').hasError('required') || userDetailsForm.get('primaryEmail').hasError('pattern')\">\n {{ 'profileInfo.invalidEmail' | translate }}\n </mat-error>\n <div class=\"flex justify-end\" *ngIf=\"verifyEmail && !otpSent && !eVerified\">\n <span class=\"get-otp\" (click)=\"handleGenerateEmailOTP('email')\">{{ 'profileInfo.getOTP' | translate\n }}</span>\n </div>\n <div *ngIf=\"emailOtpSent\">\n <form [formGroup]=\"emailOtpForm\">\n <div class=\"w-full\">\n <div class=\"flex enter-otp\">\n <div class=\"font-semibold required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.enterOTP' | translate }}\n </div>\n <div class=\"mb-3\">Time Remaining: <span #emailTimerDiv></span></div>\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n <input type=\"text\" matInput formControlName=\"eOtp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n </mat-form-field>\n </div>\n <div class=\"w-full\">\n <div class=\"flex justify-center\" *ngIf=\"showEmailResendOTP\">\n <div class=\"flex flex-row\">\n <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n <div class=\"resend-otp\" (click)=\"handleResendEmailOTP()\"> {{ 'profileInfo.resentOTP' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"w-full mb-4\">\n <div class=\"flex flex-row justify-between\">\n <button class=\"save-button\" (click)=\"verifyEmailOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowGroup\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.group' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select formControlName=\"group\" placeholder=\"{{ 'profileInfo.chooseAGroup' | translate }}\">\n <mat-option *ngFor=\"let group of groupData\" value=\"{{group}}\">{{ group }}</mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n {{'profileInfo.groupNote' | translate}}\n </div>\n </div>\n <div class=\"w-full relative\" *ngIf=\"canShowDesignation\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.designation' | translate }}\n </div>\n <!-- <mat-form-field appearance=\"outline\" class=\"w-full\">\n <div class=\"flex flex-row auto-complete-row relative\">\n <input type=\"text\" class=\"input-text high-zindex\" matInput formControlName=\"designation\"\n (input)=\"filterdesignation($event.target.value)\" (focus)=\"onDesignationsFocus()\" #textBox\n placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\">\n <mat-icon class=\"disagnation-caret\">arrow_drop_down</mat-icon>\n </div>\n </mat-form-field> -->\n <div class=\"custom-select-container\">\n <mat-form-field appearance=\"outline\" class=\"fixed-height-select\">\n <mat-select placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\" formControlName=\"designation\" (closed)=\"onDesignationDropdownClosed()\" (openedChange)=\"setupScrollListener($event)\" panelClass=\"search-panel\">\n <!-- Sticky search input container -->\n <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <input \n type=\"text\" \n placeholder=\"Search designation\" \n formControlName=\"searchDesignation\" \n class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n autocomplete=\"off\">\n <button \n *ngIf=\"searchDesignation?.value\" \n type=\"button\" \n class=\"clear-button\" \n (click)=\"searchDesignation?.setValue('')\">\n \u2715\n </button>\n </div>\n </div>\n <!-- Options list -->\n <mat-option *ngFor=\"let option of designationsMeta \" [value]=\"option?.name\" (click)=\"selectDesignation(option?.name)\">\n {{ option?.name }}\n </mat-option>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n Loading more...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(designationsMeta )?.length === 0\" disabled>\n No matches found\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <mat-error *ngIf=\"userDetailsForm?.controls['designation']?.invalid && userDetailsForm?.controls['designation']?.touched\"\n class=\"mat-error\">\n Please select a valid designation.\n </mat-error>\n <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n {{'profileInfo.designationNote' | translate}}\n </div>\n <!-- <div class=\"auto-list flex flex-col ignore-blur\" #dropdown\n *ngIf=\"openDesignationDropdown && filterDesignationsMeta.length\">\n <div (mousedown)=\"preventBlur($event)\"\n class=\"item {{userDetailsForm.controls['designation']?.value?.toLowerCase() === designation?.name?.toLowerCase() ? 'item-active' : ''}}\"\n *ngFor=\"let designation of filterDesignationsMeta\" (click)=\"selectDesignation(designation.name)\">\n {{ designation?.name }}\n </div>\n </div> -->\n </div>\n <div class=\"w-full relative\" *ngIf=\"canShowDesignation && canShowOtherDesignation\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.otherDesignation' | translate }}\n </div>\n <div *ngIf=\"canShowOtherDesignation\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"otherDesignation\" placeholder=\"{{ 'profileInfo.enterDesignation' | translate }}\"/>\n </mat-form-field>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowEmployeeCode\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.employeeId' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"text\" class=\"input-text\" matInput formControlName=\"employeeCode\" placeholder=\"Enter employee code\"/>\n </mat-form-field> \n <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('employeeCode')?.hasError('pattern')\">\n Please enter an Alpha-numeric value only\n </mat-error> \n </div>\n <div class=\"w-full\" *ngIf=\"canshowMobile\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.mobileNumber' | translate }}\n </div>\n <div class=\"flex flex-row gap-4\">\n <div class=\"country-code flex justify-center items-center\" appearance=\"outline\">\n +91\n </div>\n <div class=\"flex-1\">\n <div class=\"flex flex-col\">\n <mat-form-field appearance=\"outline\" class=\"mobile-num\">\n <input type=\"text\" class=\"input-text mobile-text relative\" maxlength=\"10\" (keyup)=\"handleEmpty('mobile')\"\n matInput formControlName=\"mobile\" placeholder=\"Enter mobile number\"/>\n <mat-icon class=\"verified-check\" *ngIf=\"mVerified\">check_circle</mat-icon>\n </mat-form-field>\n <mat-error class=\"mat-error\"\n *ngIf=\"userDetailsForm.get('mobile').hasError('required') || userDetailsForm.get('mobile').hasError('pattern')\">\n {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n </mat-error>\n </div>\n <div class=\"flex justify-end\" *ngIf=\"verifyMobile && !otpSent && !mVerified\">\n <span class=\"get-otp sm:mr-4\" (click)=\"handleGenerateOTP('phone')\">{{ 'profileInfo.getOTP' |\n translate }}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"otpSent\"> \n <form [formGroup]=\"otpForm\">\n <div class=\"w-full\">\n <div class=\"flex enter-otp\">\n <div class=\"font-semibold required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.enterOTP' | translate }}\n </div>\n <div class=\"mb-3\">Time Remaining: <span #timerDiv></span></div>\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n <input type=\"text\" matInput formControlName=\"otp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n </mat-form-field>\n </div>\n <div class=\"w-full\">\n <div class=\"flex justify-center\" *ngIf=\"showResendOTP\"> \n <div class=\"flex flex-row\">\n <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n <div class=\"resend-otp\" (click)=\"handleResendOTP()\"> {{ 'profileInfo.resentOTP' | translate }}</div>\n </div>\n </div>\n </div>\n <div class=\"w-full mb-4\">\n <div class=\"flex flex-row justify-between\">\n <button class=\"save-button\" (click)=\"verifyMobileOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowGender\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.gender' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select formControlName=\"gender\" placeholder=\"Select gender\">\n <mat-option *ngFor=\"let _gender of eUserGender\" value=\"{{ _gender }}\">{{\n handleTranslateTo(_gender.toLowerCase()) }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowDob\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.dob' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input matInput class=\"input-text icon-include-input\" [max]=\"currentDate\" [matDatepicker]=\"picker\" [(ngModel)]=\"selectedDate\"\n formControlName=\"dob\" placeholder=\"Select date of birth\" />\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </div>\n <div class=\"w-full relative\" *ngIf=\"canShowDomicileMedium\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.motherTongue' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <div class=\"flex flex-row auto-complete-row relative\">\n <input type=\"text\" class=\"input-text high-zindex\" aria-label=\"Domicile Medium (Mother Tongue)\" matInput\n formControlName=\"domicileMedium\" placeholder=\"Select mother tongue\"\n (input)=\"filterLanguage($event.target.value)\" (focus)=\"onLanguageFocus()\" #languageTextBox/>\n <mat-icon class=\"mother-toungue-caret\">arrow_drop_down</mat-icon>\n </div>\n </mat-form-field>\n <mat-error *ngIf=\"userDetailsForm.controls['domicileMedium'].invalid && userDetailsForm.controls['domicileMedium'].touched\"\n class=\"mat-error\">\n Please select a valid mother tongue.\n </mat-error>\n <div class=\"auto-language-list flex flex-col ignore-blur\" #languageDropdown\n *ngIf=\"openLanguageDropdown && masterLanguages?.length\">\n <div (mousedown)=\"preventLanguageBlur($event)\"\n class=\"language-item {{userDetailsForm.controls['domicileMedium']?.value?.toLowerCase() === language?.name?.toLowerCase() ? 'language-item-active' : ''}}\"\n *ngFor=\"let language of masterLanguages\" (click)=\"selectLanguage(language.name)\">\n {{ language?.name }}\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowCategory\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.category' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-select formControlName=\"category\" placeholder=\"Select category\">\n <mat-option *ngFor=\"let category of eCategory\" value=\"{{ category }}\">{{\n handleTranslateTo(category?.toLowerCase()) }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"w-full\" *ngIf=\"canShowpinCode\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'userProfile.officePinCode' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input type=\"email\" class=\"input-text\" matInput maxlength=\"6\" formControlName=\"pinCode\" placeholder=\"Enter pincode\"/>\n </mat-form-field>\n <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('pinCode')?.hasError('pattern')\">\n {{ 'profileInfo.invalidPinCode' | translate }}\n </mat-error> \n </div>\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.fromGovOrganization' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"isCadre\" (selectionChange)=\"getIsCadreStatus($event.value)\" placeholder=\"Select cadre\">\n <mat-option [value]=\"true\">Yes</mat-option>\n <mat-option [value]=\"false\">No</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && isCadreStatus && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.typeOfCivilService' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"typeOfCivilService\" (selectionChange)=\"getService($event.value)\" placeholder=\"Select type of civil service\">\n <mat-option *ngFor=\"let service of civilServiceTypes\" [value]=\"service\">{{ service }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('typeOfCivilService').value && userDetailsForm.get('isCadre').value && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.serviceType' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"serviceType\" (selectionChange)=\"onServiceSelect($event)\" placeholder=\"Select service\">\n <mat-option *ngFor=\"let service of serviceName\" [value]=\"service\">{{ service }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType').value && \n userDetailsForm.get('isCadre').value \n && userDetailsForm.get('typeOfCivilService').value && (\n userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n ) && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.cadre' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"cadreName\" (selectionChange)=\"onCadreSelect($event.value)\" placeholder=\"Select cadre\">\n <mat-option *ngFor=\"let state of cadre\" [value]=\"state\">{{ state }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <ng-container *ngIf=\"!showDoptChanges\">\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType') && (userDetailsForm.get('serviceType').value && \n userDetailsForm.get('isCadre').value && userDetailsForm.get('typeOfCivilService').value && (\n userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n ) && userDetailsForm.get('cadreName').value) ? true : ((userDetailsForm.get('serviceType').value && \n userDetailsForm.get('isCadre').value \n && userDetailsForm.get('typeOfCivilService').value && (\n userDetailsForm.get('serviceType').value !== 'Indian Administrative Service (IAS)' && \n userDetailsForm.get('serviceType').value !== 'Indian Police Service (IPS)' && \n userDetailsForm.get('serviceType').value !== 'Indian Forest Service (IFoS)' \n ))) ? true : false\">\n <div class=\"font-semibold margin-0 required\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.batch' | translate }}\n </div>\n <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n <mat-select formControlName=\"cadreBatch\" placeholder=\"Select batch\">\n <mat-option *ngFor=\"let year of yearArray\" [value]=\"year\">{{ year }}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </ng-container>\n <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('isCadre').value && userDetailsForm.get('cadreBatch').value && !showDoptChanges\">\n <div class=\"font-semibold margin-0 required mb-3\"\n i18n=\"Title label|Label which explains the user to enter title\">\n {{ 'profileInfo.cadreControllingAuthority' | translate }}\n </div>\n <span class=\"cadreControl-name\">{{cadreControllingAuthority}}</span>\n </div>\n <ng-container>\n <div class=\"w-full flex flex-row gap-4 justify-end margin-top-m\">\n <button\n class=\"save-button\"\n [disabled]=\"userDetailsForm?.invalid || !mVerified || !eVerified\"\n (click)=\"onSubmitForm(userDetailsForm)\">\n {{ 'profileInfo.saveChanges' | translate }}\n </button>\n </div>\n </ng-container>\n </form>\n </div>\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>\n</div>\n", styles: ["::ng-deep .course-survey .main-container{width:auto!important;overflow-y:auto!important;max-height:auto!important}.high-zindex{z-index:9999}.auto-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-list .item{padding:5px 15px}.auto-list .item:hover{background-color:#f3f3f3;cursor:pointer}.auto-list .item-active{background-color:#1b4ca1!important;color:#fff!important}.auto-language-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-language-list .language-item{padding:5px 15px}.auto-language-list .language-item:hover{background-color:#f3f3f3;cursor:pointer}.auto-language-list .language-item-active{background-color:#1b4ca1!important;color:#fff!important}::ng-deep .mat-calendar-body-active{background:#1b4ca1!important;border-radius:100%!important}::ng-deep .course-survey .lib-container{height:100%!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container{padding-left:0!important;padding-right:0!important;padding-bottom:1rem!important}}.disagnation-caret,.mother-toungue-caret{position:absolute;right:0;bottom:0}::ng-deep .userDetailsForm .mat-form-field-appearance-outline .mat-form-field-infix{padding:.5rem 0 .8rem}input[disabled]+mat-icon.disagnation-caret{opacity:.5}input[disabled]+mat-icon.mother-toungue-caret{opacity:.5}::ng-deep .course-survey .lib-container-2{height:auto;min-height:unset!important;padding:0!important;box-shadow:none!important;margin-bottom:2rem!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container-2{padding-left:0!important;padding-right:0!important}}.profile-form-field .mat-select{border:none}.customForm{padding-right:0!important;padding-bottom:1rem!important;padding:1rem 3rem}.cadreControl-name{background:#c3c3c3;padding:10px}.country-code{margin-top:5px;text-align:center;width:50px;height:46px;border:1px solid #d6d5d5;border-radius:5px}.get-otp{color:#1b4ca1;font-weight:700;cursor:pointer;font-size:14px}.enter-otp{align-items:center;justify-content:space-between}.custom-size{width:96%}.resend-otp{color:#1b4ca1;font-weight:700;cursor:pointer}.verified-check{position:absolute;right:3px;color:#5fa800;font-size:18px;width:18px;height:18px}.save-button:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.mat-error{margin:-10px 0 5px}:host ::ng-deep .userDetailsForm .mat-form-field-wrapper{padding-bottom:8px!important}.custom-select-container,.fixed-height-select{width:100%}.fixed-height-select ::ng-deep .mat-form-field-flex{height:48px!important;min-height:45px!important;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-infix{padding:0!important;border-top:0!important;height:45px!important;display:flex;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.fixed-height-select ::ng-deep .mat-select-arrow-wrapper{transform:translateY(0)!important}.fixed-height-select ::ng-deep .mat-form-field-label-wrapper{top:-1.1em}::ng-deep .search-panel{max-height:350px}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:2;background:#fff;padding:8px;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000014}::ng-deep .search-panel .search-input-wrapper{position:relative;width:100%}::ng-deep .search-panel .search-input{width:100%;height:35px;padding:0 30px 0 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;box-sizing:border-box}::ng-deep .search-panel .search-input:focus{outline:none;border-color:#f3962f;box-shadow:0 0 0 1px #f3962f33}::ng-deep .search-panel .clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#00000080;font-size:14px;padding:4px;display:flex;align-items:center;justify-content:center}::ng-deep .search-panel .clear-button:hover{color:#000c}::ng-deep .search-panel .mat-option.mat-option-disabled{color:#00000061;font-style:italic}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-flex{min-height:45px!important;height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-infix{min-height:45px!important;height:45px!important;padding-top:0!important;padding-bottom:0!important}\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: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { 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: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
17966
18002
|
}
|
|
17967
18003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollProfileFormComponent, decorators: [{
|
|
17968
18004
|
type: Component,
|
|
@@ -19421,7 +19457,7 @@ class AppTocBannerComponent {
|
|
|
19421
19457
|
return this.langtranslations.translateLabel(label, type, '');
|
|
19422
19458
|
}
|
|
19423
19459
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBannerComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1$3.MatLegacyDialog }, { token: AppTocService }, { token: WidgetContentService }, { token: i2$1.UtilityService }, { token: MobileAppsService }, { token: i7.MatLegacySnackBar }, { token: i2$1.ConfigurationsService }, { token: TitleTagService }, { token: ActionService }, { token: i2$1.LoggerService }, { token: i2.DatePipe }, { token: i1$2.TranslateService }, { token: UserAutocompleteService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: TimerService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: { banners: "banners", content: "content", resumeData: "resumeData", analytics: "analytics", forPreview: "forPreview", batchData: "batchData", userEnrollmentList: "userEnrollmentList", contentReadData: "contentReadData", clickToShare: "clickToShare" }, outputs: { withdrawOrEnroll: "withdrawOrEnroll", programEnrollCall: "programEnrollCall" }, providers: [AccessControlService, DatePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header-synopsis fixed-width margin-top-xl\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\"\n *ngIf=\"show\">\n <div class=\"flex flex-row\">\n <div class=\"flex-auto\">\n <div class=\"header-title flex-col sm:flex-row\">\n <!-- image -->\n <div *ngIf=\"content?.posterImage\" class=\"float-left\">\n <img [src]=\"content?.posterImage | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n </div>\n <div *ngIf=\"!content?.posterImage\" class=\"float-left\">\n <ng-container *ngIf=\"content?.appIcon; else defaultImg\">\n <img [src]=\"content?.appIcon | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n </ng-container>\n <ng-template #defaultImg>\n <img src=\"/assets/instances/eagle/app_logos/default.png\" [id]=\"'source_' + content.identifier\"\n class=\"app-icon\" [alt]=\"content.sourceName || iGOT\" />\n </ng-template>\n </div>\n <div class=\"sm:ml-5 flex flex-auto\" [id]=\"'m-c-'+ content.identifier\">\n <div class=\"sm:ml-5 flex flex-col flex-auto\">\n <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs hidden sm:block\"\n [title]=\"contentReadData?.name\">\n {{ contentReadData?.name }}\n <div class=\"float-right cursor-pointer flex\" (click)=\"onClickOfShare()\" *ngIf=\"canShare\">\n <mat-icon class=\"ws-mat-accent-text padding-top-xs\">share</mat-icon>\n </div>\n </h1>\n <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs block sm:hidden\"\n [title]=\"contentReadData?.name\">\n {{ contentReadData?.name }}\n </h1>\n <span *ngIf=\"contentProgress === 1\" class=\"margin-left-s\">\n <mat-icon class=\"ws-mat-accent-text\">check_circle</mat-icon>\n </span>\n <div *ngIf=\"content?.primaryCategory\" class=\"apIcon float-left mb-4\">\n <img src=\"/assets/icons/content/course.svg\" [id]=\"'source_' + content.identifier\" class=\"source-icon\"\n [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n <span>{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</span>\n </div>\n <div *ngIf=\"content?.appIcon\" class=\"apIcon float-left mb-4\">\n <img [src]=\"content?.creatorLogo | pipePublicURL\" [id]=\"'source_' + content.identifier\"\n class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n </div>\n <div [ngSwitch]=\"routePath\" class=\"header-meta\" [ngClass]=\"{ 'header-meta-banner': bannerUrl }\">\n <!-- Overview Section -->\n <div class=\"banner-overview-container\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n *ngSwitchCase=\"'overview'\">\n <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n {{ content?.source | pipeLimitTo: 250 }}\n </h3>\n <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n {{ content?.instructions | pipeLimitTo: 450 }}\n </p>\n <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n </div>\n </div>\n <!-- Toc Section -->\n <div *ngSwitchCase=\"'contents'\">\n <!-- Contents Banner -->\n </div>\n <!-- Analytics Section -->\n <div class=\"banner-overview-container mat-body-1\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n *ngSwitchCase=\"'analytics'\">\n <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n {{ content?.purpose | pipeLimitTo: 250 }}\n </h3>\n <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n {{ content?.instructions | pipeLimitTo: 450 }}\n </p>\n <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n </div>\n </div>\n </div>\n <div *ngIf=\"content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n <span class=\"rating-number mat-body-2\">{{ content?.averageRating }} </span>\n <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating) }}</mat-icon>\n <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"content?.totalRating\">\n ( {{ content?.totalRating | pipeCountTransform }} )</span>\n </div>\n <div *ngIf=\"!content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n <span class=\"rating-number mat-body-2\"> 0.0 </span>\n <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating) }}</mat-icon>\n <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"!content?.totalRating\">\n ( {{ 0 | pipeCountTransform }} )</span>\n </div>\n <!-- tags -->\n <div class=\"tags margin-bottom-s\" *ngIf=\"content?.keywords && content?.keywords?.length > 0\">\n <span *ngFor=\"let tag of content.keywords\" class=\"tag\">\n {{tag}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"batch-div\">\n <div class=\"request-block\">\n <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n <ng-container\n *ngIf=\"batchData && !batchData?.enrolled && batchData?.workFlow?.wfInitiated &&\n (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REJECTED) && (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REMOVED) &&\n (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.WITHDRAWN) &&\n (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.APPROVED) && batchData?.content?.length\">\n <p class=\"margin-remove-bottom mat-body-1 padding-m bg-white\">\n {{batchData?.workFlow?.batch?.name}} - ({{batchData?.workFlow?.batch?.startDate | date: 'dd-MM-yyyy'}} -\n {{batchData?.workFlow?.batch?.endDate | date: 'dd-MM-yyyy' || 'present'}})\n </p>\n <ng-container>\n <button class=\"withdraw-batch\" (click)=\"!disableWithdrawnBtn && requestToWithdrawDialog()\"\n [disabled]=\"disableWithdrawnBtn\" [ngClass]=\"{ 'disable-btn': disableWithdrawnBtn }\">\n <ng-container> {{ 'apptocbanner.withDrawYourRequest' | translate }} </ng-container>\n </button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"batchData && batchData?.enrolled && batchData?.content?.length\">\n <h3 class=\"margin-remove-bottom p-4 bg-white mat-body-1\" *ngFor=\"let batch of batchData.content\">\n {{batch?.name}} ({{batch?.startDate | date: 'dd-MM-yyyy' }} - {{batch?.endDate | date: 'dd-MM-yyyy' ||\n 'present'}})\n </h3>\n <ng-container [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"batchData && !batchData?.enrolled && !batchData?.content?.length\">\n <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n No batches\n </h3>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"batchData && batchData?.content?.length && batchData?.content[0]?.batchAttributes?.batchLocationDetails\">\n <div class=\"flex items-center location-wrapper\">\n <div>\n <mat-icon class=\"location-icon\">\n location_on</mat-icon>\n </div>\n <div class=\"loc-details\">\n {{batchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n </ng-container> -->\n </div>\n <ng-container *ngIf=\"batchData && !batchData?.enrolled && batchData?.content?.length\"\n [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"content?.courseCategory === nsContent.ECourseCategory.MODERATED_PROGRAM\">\n <div class=\"request-batch\">\n <div class=\"batch-div\">\n <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n </div>\n </div>\n</ng-container>\n<!-- <div class=\"header-synopsis fixed-width margin-top-l\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\" *ngIf=\"content && batchControl?.value?.batchAttributes?.batchLocationDetails\">\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <h2>{{'apptocbanner.batchLocation' | translate}}</h2>\n <p>{{batchControl?.value?.batchAttributes?.batchLocationDetails}}</p>\n </ng-container>\n</div> -->\n\n<mat-menu #actionMenu=\"matMenu\">\n <div mat-menu-item>\n <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n</mat-menu>\n\n<ng-template #actions>\n <a i18n-aria-label aria-label=\"Take Action\" mat-icon-button *ngIf=\"reviewButton\"\n [routerLink]=\"['/author/editor/' + content?.identifier]\">\n <mat-icon>publish</mat-icon>\n </a>\n <ws-widget-btn-content-download id=\"prevfordownload\" [forPreview]=\"forPreview\"\n [widgetData]=\"content | pipePartialContent : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal', 'artifactUrl']\">\n </ws-widget-btn-content-download>\n <ws-widget-btn-content-share id=\"prevforshare\" [forPreview]=\"forPreview\" [widgetData]=\"content\">\n </ws-widget-btn-content-share>\n <ws-widget-btn-kb [forPreview]=\"forPreview\" id=\"prev\" [contentId]=\"content?.identifier\"\n [contentName]=\"contentReadData?.name\" [contentType]=\"content?.contentType\" [status]=\"content?.status\">\n </ws-widget-btn-kb>\n <ws-widget-btn-goals [forPreview]=\"forPreview\" id=\"goalsforprev\" *ngIf=\"isGoalsEnabled && btnGoalsConfig\"\n [widgetData]=\"btnGoalsConfig\">\n </ws-widget-btn-goals>\n <ws-widget-btn-playlist [forPreview]=\"forPreview\" id=\"playlistforprev\" *ngIf=\"btnPlaylistConfig\"\n [widgetData]=\"btnPlaylistConfig\">\n </ws-widget-btn-playlist>\n <ws-widget-btn-content-feedback-v2 [forPreview]=\"forPreview\" id=\"feedbackforprev\"\n [widgetData]=\"content | pipePartialContent: ['identifier', 'name']\">\n </ws-widget-btn-content-feedback-v2>\n</ng-template>\n<ng-template #authView>{{'apptocbanner.view' | translate}}</ng-template>\n<ng-template #statusMsg>\n <div class=\"status-container mt-2 mb-2\"\n *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && batchData?.workFlow?.wfInitiated\">\n <div class=\"flex\" *ngIf=\"showMsg\">\n <ng-container *ngIf=\"showIcon\">\n <mat-icon class=\"mr-4\" [ngClass]=\"iconColor\" *ngIf=\"WFIcon === 'circle'\">check_circle</mat-icon>\n <mat-icon class=\"mr-4 ws-mat-red-text visibility-show\" style=\"transform: rotate(180deg);\"\n *ngIf=\"WFIcon === 'info'\">info</mat-icon>\n </ng-container>\n <div class=\"mat-body-1\">{{ getWFMsg }}</div>\n </div>\n </div>\n <div class=\"status-container mt-5\"\n *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && showDisableMsg && !showMsg && findMessage.length > 0\">\n <div class=\"flex\">\n <ng-container>\n <mat-icon class=\"mr-3 ws-mat-red-text\" style=\"transform: rotate(180deg);\">info</mat-icon>\n </ng-container>\n <div class=\"mat-body-1\">\n <p class=\"margin-remove-bottom \">{{findMessage}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n<div class=\"share-container\" *ngIf=\"enableShare\">\n <div *ngIf=\"showLoader\" class=\"text-center my-2 loader\">\n <mat-spinner class=\"inline-block\"></mat-spinner>\n </div>\n <div class=\"cursor-pointer close-share-dialog\"><mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon></div>\n <div class=\"share-modal\">\n <div class=\"karmasahayogi-icon\"><img alt=\"karmasahayogi-icon\" src=\"/assets/icons/KarmaSahayogi.svg\"></div>\n <div class=\"content-div\">\n <div class=\"triangle-left hidden md:block\"></div>\n <div class=\"contnet\">\n <section class=\"w-full flex align-center justify-between \">\n <div class=\"mb-2\">\n <h2 class=\"mat-headline margin-remove-bottom ws-mat-black-text\">{{'contentSharing.header' | translate}}</h2>\n </div>\n </section>\n <form [formGroup]=\"shareForm\">\n <div class=\"mat-body-2\">\n <div class=\"md-5\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-chip-list #chipList aria-label=\"user selection\" appearance=\"outline\">\n <mat-chip *ngFor=\"let user of users\" [selectable]=\"selectable\" [removable]=\"removable\"\n (removed)=\"remove(user)\">\n {{user}}\n <mat-icon matChipRemove *ngIf=\"removable\">close</mat-icon>\n </mat-chip>\n <input tabindex=\"-1\" class=\"inputTextBox\"\n placeholder=\"{{users.length === 0 ? translateLabels('placehoderText', 'contentSharing') : ''}}\"\n #userInput formControlName=\"review\" [formControl]=\"userCtrl\" [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\" (matChipInputTokenEnd)=\"add($event)\">\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n <mat-option *ngFor=\"let user of filteredUsers\" [value]=\"user.name\">\n <div class=\"flex\">\n <div class=\"iconDiv\">\n <span class=\"iconText\">{{user.iconText.substring(0,2)}}</span>\n </div>\n <div>\n <div>{{user.name}}</div>\n <div class=\"emailText\">{{user.maskedEmail}}</div>\n </div>\n </div>\n </mat-option>\n </mat-autocomplete>\n <mat-hint align=\"start\" class=\"left-over-emails\">{{'contentSharing.note' | translate}}</mat-hint>\n <mat-hint align=\"end\" class=\"left-over-emails\">{{ users.length }} /{{maxEmailsLimit}}\n {{'contentSharing.remaingEmails' | translate}}</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"flex mt-5\">\n <div class=\"flex flex-1 flex-end\">\n <span class=\"copy-link-btn cursor-pointer\" (click)=\"copyToClipboard()\">{{'contentSharing.copyLink' |\n translate}} <mat-icon>link</mat-icon></span>\n <button mat-stroked-button type=\"submit\"\n [ngClass]=\"{'disable-send-btn': users.length === 0 || users.length}\"\n class=\"text-white ws-mat-primary-background flex-auto-display send-btn\"\n [disabled]=\"userCtrl.value.length || users.length === 0 || users.length > maxEmailsLimit\"\n (click)=\"submitSharing()\">\n {{'contentSharing.send' | translate}} <mat-icon>send</mat-icon>\n </button>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #batchDropdown>\n <form class=\"flex flex-col gap-4\">\n <ng-container *ngIf=\"batchData && !batchData?.enrolled\n && (!batchData.workFlow?.wfInitiated || (batchData.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED))\n && batchData?.content?.length\">\n <mat-form-field appearance=\"outline\" class=\"w-full batch-form-field\">\n <mat-select #batchControlData [formControl]=\"batchControl\" required autoSelctFirstOption\n (selectionChange)=\"batchChange($event)\" panelClass=\"batch-dropdown\">\n <mat-option *ngFor=\"let batch of batchData.content; let i=index\" [value]=\"batch\" selected=\"index === 0\"\n [disabled]=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn \">\n <div class=\"flex flex-row items-center gap-2\">\n <div class=\"flex-1 text-sm batch-timings\">\n {{ batch.name }} ( {{ batch.startDate | date: 'd MMM, yyyy' }} - {{ batch.endDate | date: 'd MMM, yyyy'\n || 'present' }} )\n </div>\n <div class=\"expired\" *ngIf=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn\">\n Expired\n </div>\n </div>\n </mat-option>\n </mat-select>\n <mat-error *ngIf=\"batchControl.hasError('required')\">Please choose a batch to start course</mat-error>\n </mat-form-field>\n <div class=\"flex flex-wrap gap-3\">\n <ng-container *ngIf=\"!showRejected\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-1\" *ngIf=\"selectedBatch && selectedBatch.enrollmentEndDate \">\n <p class=\"text-xs leading-4 mb-0\">Last enroll date</p>\n <p class=\"font-bold mb-0\">{{ selectedBatch.enrollmentEndDate | date: 'd MMM, y' }}</p>\n </div>\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <button class=\"enroll-button\"\n [ngClass]=\"{ 'disable-btn': disableEnrollBtn || batchControl.hasError('required') || !handleEnrollmentEndDate(selectedBatch) }\"\n [disabled]=\"disableEnrollBtn || batchControl.hasError('required')|| !handleEnrollmentEndDate(selectedBatch)\"\n (click)=\"requestToEnrollDialog()\">\n <ng-container>\n Request to enroll\n </ng-container>\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showRejected && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n Your enrollment request is {{batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED\n ?'removed':'rejected'}}.</h3>\n </ng-container>\n </div>\n </ng-container>\n </form>\n</ng-template>", styles: [".button,.batch-div .enroll-button,.batch-div .withdraw-batch{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}.batch-div{border-radius:8px;background-color:#fdead5;max-width:400px;margin:0 auto}.batch-div .request-block{padding:16px}.batch-div .batch-details{padding:16px;border:1px solid #FF9800;border-radius:8px;background-color:#fff;cursor:pointer}.batch-div .batch-enrolled{font-weight:700;color:#4caf50;font-size:.75rem}.batch-div .withdraw-batch{color:#000000de;border:1px solid rgba(0,0,0,.8705882353);background-color:#fff;width:100%;margin-top:16px}.batch-div .enroll-button{color:#fff;background-color:#ff9800;border:1px solid #FF9800}::ng-deep .batch-dropdown{margin-top:3rem!important}::ng-deep .batch-dropdown .mat-option{height:fit-content!important;padding:12px 16px!important}::ng-deep .batch-form-field{height:64px}::ng-deep .batch-form-field .mat-form-field-wrapper{margin:0;padding-bottom:0;height:inherit}::ng-deep .batch-form-field .mat-form-field-wrapper .mat-form-field-flex{height:inherit}::ng-deep .batch-form-field .mat-form-field-outline{border-radius:8px;height:inherit}::ng-deep .batch-form-field .mat-form-field-infix{display:flex;align-items:center;font-size:14px;border-top:.35rem solid transparent;padding:8px 0;height:44px}::ng-deep .batch-form-field .mat-form-field-infix .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(0)!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper{padding:8px 4px!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper .mat-error{margin-top:6px}::ng-deep .batch-form-field .mat-select-value-text{white-space:pre-line!important;line-height:21px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.disable-btn{opacity:.5}.mb-0{margin-bottom:0!important}.batch-timings{text-transform:uppercase;line-height:20px}.header-synopsis{padding:32px 64px}@media only screen and (max-width: 599px){.header-synopsis{padding:32px 24px}}.app-icon{height:180px;width:280px;border-radius:4px}.banner-container{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}.header-synopsis-gradient{background:inherit}.category-text{margin-left:8px}.fixed-width{max-width:1230px;display:block;margin:0 auto;padding:0!important}@media only screen and (min-width: 600px) and (max-width: 959px){.fixed-width{padding:0 15px!important}}@media only screen and (max-width: 599px){.fixed-width{padding:0 15px!important}}.fluid-width{width:100%}.header-synopsis{box-sizing:border-box}.header-synopsis .apIcon{background-color:#fff;margin-right:16px;padding:4px 8px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start}.header-synopsis .apIcon img{height:15px;object-fit:contain}.header-synopsis .apIcon span{opacity:1;color:#0009;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.header-synopsis .header-title{display:flex}.header-synopsis .header-title .text-truncate-title{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.header-synopsis .rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px}.header-synopsis .rating .rating-number{letter-spacing:0px;color:#f69953}.header-synopsis .rating .rating-count{letter-spacing:.36px;color:#f69953}.header-synopsis .rating .rating mat-icon{color:#f69953}.header-synopsis .header-meta{line-height:1.5}.header-synopsis .resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box;box-shadow:0 10px 30px #9993;color:#fff!important}.header-synopsis .resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.header-synopsis .header-actions{display:flex}.header-synopsis .header-actions .custom-button{background:#0074b6 0% 0% no-repeat padding-box;border-radius:4px}.header-synopsis .header-actions.top{margin-top:0;margin-bottom:40px}.header-synopsis .header-actions .action-btns{margin-left:auto;order:2}.banner-overview-container{display:flex;justify-content:space-between}.banner-overview-container .overview-description{flex:1;min-width:1px;margin-right:24px;margin-bottom:12px;opacity:1;color:#000000de;font-size:16px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:24px}@media only screen and (max-width: 599px){.banner-overview-container .overview-description{margin-right:0}}.banner-overview-container .overview-intro{width:240px;height:135px;border:1px solid;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;position:relative}.banner-overview-container .overview-intro .overview-intro-overlay{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:48px;height:48px;font-size:48px;background-color:#00000080;border-radius:50%;padding:8px}.banner-overview-container .overview-intro .overview-intro-overlay:active{background-color:#000000b3}@media only screen and (max-width: 599px){.banner-overview-container .overview-intro{display:none}}.analytics-meta{font-weight:500;margin-bottom:12px;line-height:1.2}.hidden-block-xs{display:block}@media only screen and (max-width: 599px){.hidden-block-xs{display:none}}.visible-block-xs{display:none}@media only screen and (max-width: 599px){.visible-block-xs{display:block}}.hidden-block-s{display:block}@media only screen and (min-width: 600px) and (max-width: 959px){.hidden-block-s{display:none}}.visible-block-s{display:none}@media only screen and (min-width: 600px) and (max-width: 959px){.visible-block-s{display:block}}.info-msg{color:#fff!important}.info-msg mat-icon{color:#fff!important}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:1}.tags .tag{display:inline-block;border-radius:100px 4px 4px 100px;padding:1px 12px;width:auto;justify-content:space-between;margin:0 8px 8px 0;background-color:#0000000a;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}.batch-container{max-width:435px;border-radius:4px;width:40%}.custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px;max-width:auto!important;height:42px!important}.sticky-banner{z-index:999;position:sticky;top:128px}.sticky-banner .header-title h1{font:normal normal 300 24px/35px}.sticky-banner .overview-description{font:normal normal 300 14px/21px}.batch-wrapper{display:flex;justify-content:space-between;gap:25px;width:100%}.batch-timer{width:60%;background-color:#fff;align-items:center}.batch-timer .timer-title{opacity:1;color:#0006;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.batch-timer .time-wrapper div p.count{border-radius:4px;background-color:#000000de;opacity:1;color:#fff;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:center;line-height:48px;width:67px;height:47px;margin-bottom:4px}.batch-timer .time-wrapper div p.time-label{opacity:1;color:#000000de;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:center;line-height:12px}.batch-timer .time-wrapper span{padding:8px;font-size:36px}.batch-timer .help{width:100%}.batch-timer .help .batch-duration-wrap{padding:0 24px}.batch-timer .help .batch-duration-wrap .duration-days{opacity:1;color:#000000de;font-family:Montserrat-SemiBold;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:left;line-height:48px;padding-bottom:16px}.batch-info{opacity:1;color:#000000de;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px;padding:26px}.disable-send-btn[disabled]{background-color:#000!important}@media (max-width: 768px){.batch-wrapper{flex-wrap:wrap}.batch-timer{width:100%;flex-wrap:wrap;justify-content:center}.batch-container{width:100%}}.share-container{position:fixed;height:100vh;background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.share-modal{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit}.karmasahayogi-icon{position:absolute;bottom:-5px;left:calc(50% - 464px)}.triangle-left{transform:translateY(100%);position:absolute;bottom:28%;left:-24px;width:0;height:0;border-top:24px solid transparent;border-right:48px solid #ffffff;border-bottom:24px solid transparent}.contnet{background-color:#fff;width:612px;border-radius:12px;padding:16px}.content-div{position:relative}.copy-link-btn{display:flex;align-items:center;margin-right:20px;color:red;color:#0074b6!important;font-weight:600}.copy-link-btn:hover{background-color:none!important}.send-btn{border-radius:20px}.send-btn .mat-icon{margin-bottom:2.5px}::ng-deep .mat-chip-list-wrapper{height:100px;overflow:auto;display:block!important;scroll-behavior:smooth}.iconText{border-radius:50%;background-color:#000;color:#fff;width:30px;display:inline-block;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.iconDiv{margin-right:8px}.emailText{opacity:.6}button:disabled{pointer-events:none;opacity:.5;color:#000}::ng-deep .mat-autocomplete-panel{z-index:99999}::ng-deep .cdk-overlay-pane{z-index:9999!important}::ng-deep .close-icon{background-color:#000;color:#fff;border-radius:16px;padding:4px}::ng-deep .mat-chip-input{padding-bottom:8px!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip{color:#0074b6!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip mat-icon{color:#0074b6!important}::ng-deep .inputTextBox{width:95%!important;overflow-x:hidden}.close-share-dialog{position:absolute;right:30px;top:30px}.left-over-emails{font-weight:600}.loader{position:absolute;top:42%;left:45%;z-index:1000}@media (max-width: 768px){.content-div{width:100%}.contnet{width:unset;margin-bottom:18%}.left-over-emails{display:none}.karmasahayogi-icon{left:8%;bottom:20%}.share-modal{align-items:self-end}}@media only screen and (min-device-width: 820px) and (max-device-width: 1180px){.karmasahayogi-icon{left:calc(50% - 387px)}.content{width:500px}}@media only screen and (min-device-width: 768px) and (max-device-width: 819px){.triangle-left{display:none}}.location-wrapper{padding:16px;border-top:1px solid rgba(0,0,0,.16)}.location-wrapper .location-icon{color:#1b4ca1;height:32px;width:32px;font-size:32px;padding-right:8px}.location-wrapper .loc-details{opacity:1;color:#000000de;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:Bold;letter-spacing:.25px;text-align:left;line-height:20px}.visibility-show{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], 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: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: i9.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.DefaultThumbnailDirective, selector: "[wsUtilsDefaultThumbnail]", inputs: ["wsUtilsDefaultThumbnail", "src"] }, { kind: "component", type: i13.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePartialContentPipe, name: "pipePartialContent" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
19460
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: { banners: "banners", content: "content", resumeData: "resumeData", analytics: "analytics", forPreview: "forPreview", batchData: "batchData", userEnrollmentList: "userEnrollmentList", contentReadData: "contentReadData", clickToShare: "clickToShare" }, outputs: { withdrawOrEnroll: "withdrawOrEnroll", programEnrollCall: "programEnrollCall" }, providers: [AccessControlService, DatePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header-synopsis fixed-width margin-top-xl\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\"\n *ngIf=\"show\">\n <div class=\"flex flex-row\">\n <div class=\"flex-auto\">\n <div class=\"header-title flex-col sm:flex-row\">\n <!-- image -->\n <div *ngIf=\"content?.posterImage\" class=\"float-left\">\n <img [src]=\"content?.posterImage | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n </div>\n <div *ngIf=\"!content?.posterImage\" class=\"float-left\">\n <ng-container *ngIf=\"content?.appIcon; else defaultImg\">\n <img [src]=\"content?.appIcon | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n </ng-container>\n <ng-template #defaultImg>\n <img src=\"/assets/instances/eagle/app_logos/default.png\" [id]=\"'source_' + content.identifier\"\n class=\"app-icon\" [alt]=\"content.sourceName || iGOT\" />\n </ng-template>\n </div>\n <div class=\"sm:ml-5 flex flex-auto\" [id]=\"'m-c-'+ content.identifier\">\n <div class=\"sm:ml-5 flex flex-col flex-auto\">\n <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs hidden sm:block\"\n [title]=\"contentReadData?.name\">\n {{ contentReadData?.name }}\n <div class=\"float-right cursor-pointer flex\" (click)=\"onClickOfShare()\" *ngIf=\"canShare\">\n <mat-icon class=\"ws-mat-accent-text padding-top-xs\">share</mat-icon>\n </div>\n </h1>\n <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs block sm:hidden\"\n [title]=\"contentReadData?.name\">\n {{ contentReadData?.name }}\n </h1>\n <span *ngIf=\"contentProgress === 1\" class=\"margin-left-s\">\n <mat-icon class=\"ws-mat-accent-text\">check_circle</mat-icon>\n </span>\n <div *ngIf=\"content?.primaryCategory\" class=\"apIcon float-left mb-4\">\n <img src=\"/assets/icons/content/course.svg\" [id]=\"'source_' + content.identifier\" class=\"source-icon\"\n [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n <span>{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</span>\n </div>\n <div *ngIf=\"content?.appIcon\" class=\"apIcon float-left mb-4\">\n <img [src]=\"content?.creatorLogo | pipePublicURL\" [id]=\"'source_' + content.identifier\"\n class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n </div>\n <div [ngSwitch]=\"routePath\" class=\"header-meta\" [ngClass]=\"{ 'header-meta-banner': bannerUrl }\">\n <!-- Overview Section -->\n <div class=\"banner-overview-container\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n *ngSwitchCase=\"'overview'\">\n <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n {{ content?.source | pipeLimitTo: 250 }}\n </h3>\n <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n {{ content?.instructions | pipeLimitTo: 450 }}\n </p>\n <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n </div>\n </div>\n <!-- Toc Section -->\n <div *ngSwitchCase=\"'contents'\">\n <!-- Contents Banner -->\n </div>\n <!-- Analytics Section -->\n <div class=\"banner-overview-container mat-body-1\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n *ngSwitchCase=\"'analytics'\">\n <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n {{ content?.purpose | pipeLimitTo: 250 }}\n </h3>\n <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n {{ content?.instructions | pipeLimitTo: 450 }}\n </p>\n <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n </div>\n </div>\n </div>\n <div *ngIf=\"content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n <span class=\"rating-number mat-body-2\">{{ content?.averageRating }} </span>\n <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating) }}</mat-icon>\n <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"content?.totalRating\">\n ( {{ content?.totalRating | pipeCountTransform }} )</span>\n </div>\n <div *ngIf=\"!content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n <span class=\"rating-number mat-body-2\"> 0.0 </span>\n <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating) }}</mat-icon>\n <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"!content?.totalRating\">\n ( {{ 0 | pipeCountTransform }} )</span>\n </div>\n <!-- tags -->\n <div class=\"tags margin-bottom-s\" *ngIf=\"content?.keywords && content?.keywords?.length > 0\">\n <span *ngFor=\"let tag of content.keywords\" class=\"tag\">\n {{tag}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"batch-div\">\n <div class=\"request-block\">\n <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n <ng-container\n *ngIf=\"batchData && !batchData?.enrolled && batchData?.workFlow?.wfInitiated &&\n (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REJECTED) && (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REMOVED) &&\n (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.WITHDRAWN) &&\n (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.APPROVED) && batchData?.content?.length\">\n <p class=\"margin-remove-bottom mat-body-1 padding-m bg-white\">\n {{batchData?.workFlow?.batch?.name}} - ({{batchData?.workFlow?.batch?.startDate | date: 'dd-MM-yyyy'}} -\n {{batchData?.workFlow?.batch?.endDate | date: 'dd-MM-yyyy' || 'present'}})\n </p>\n <ng-container>\n <button class=\"withdraw-batch\" (click)=\"!disableWithdrawnBtn && requestToWithdrawDialog()\"\n [disabled]=\"disableWithdrawnBtn\" [ngClass]=\"{ 'disable-btn': disableWithdrawnBtn }\">\n <ng-container> {{ 'apptocbanner.withDrawYourRequest' | translate }} </ng-container>\n </button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"batchData && batchData?.enrolled && batchData?.content?.length\">\n <h3 class=\"margin-remove-bottom p-4 bg-white mat-body-1\" *ngFor=\"let batch of batchData.content\">\n {{batch?.name}} ({{batch?.startDate | date: 'dd-MM-yyyy' }} - {{batch?.endDate | date: 'dd-MM-yyyy' ||\n 'present'}})\n </h3>\n <ng-container [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"batchData && !batchData?.enrolled && !batchData?.content?.length\">\n <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n No batches\n </h3>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"batchData && batchData?.content?.length && batchData?.content[0]?.batchAttributes?.batchLocationDetails\">\n <div class=\"flex items-center location-wrapper\">\n <div>\n <mat-icon class=\"location-icon\">\n location_on</mat-icon>\n </div>\n <div class=\"loc-details\">\n {{batchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n </div>\n </div>\n </ng-container> -->\n </div>\n <ng-container *ngIf=\"batchData && !batchData?.enrolled && batchData?.content?.length\"\n [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"content?.courseCategory === nsContent.ECourseCategory.MODERATED_PROGRAM\">\n <div class=\"request-batch\">\n <div class=\"batch-div\">\n <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n </div>\n </div>\n</ng-container>\n<!-- <div class=\"header-synopsis fixed-width margin-top-l\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\" *ngIf=\"content && batchControl?.value?.batchAttributes?.batchLocationDetails\">\n <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <h2>{{'apptocbanner.batchLocation' | translate}}</h2>\n <p>{{batchControl?.value?.batchAttributes?.batchLocationDetails}}</p>\n </ng-container>\n</div> -->\n\n<mat-menu #actionMenu=\"matMenu\">\n <div mat-menu-item>\n <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n</mat-menu>\n\n<ng-template #actions>\n <a i18n-aria-label aria-label=\"Take Action\" mat-icon-button *ngIf=\"reviewButton\"\n [routerLink]=\"['/author/editor/' + content?.identifier]\">\n <mat-icon>publish</mat-icon>\n </a>\n <ws-widget-btn-content-download id=\"prevfordownload\" [forPreview]=\"forPreview\"\n [widgetData]=\"content | pipePartialContent : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal', 'artifactUrl']\">\n </ws-widget-btn-content-download>\n <ws-widget-btn-content-share id=\"prevforshare\" [forPreview]=\"forPreview\" [widgetData]=\"content\">\n </ws-widget-btn-content-share>\n <ws-widget-btn-kb [forPreview]=\"forPreview\" id=\"prev\" [contentId]=\"content?.identifier\"\n [contentName]=\"contentReadData?.name\" [contentType]=\"content?.contentType\" [status]=\"content?.status\">\n </ws-widget-btn-kb>\n <ws-widget-btn-goals [forPreview]=\"forPreview\" id=\"goalsforprev\" *ngIf=\"isGoalsEnabled && btnGoalsConfig\"\n [widgetData]=\"btnGoalsConfig\">\n </ws-widget-btn-goals>\n <ws-widget-btn-playlist [forPreview]=\"forPreview\" id=\"playlistforprev\" *ngIf=\"btnPlaylistConfig\"\n [widgetData]=\"btnPlaylistConfig\">\n </ws-widget-btn-playlist>\n <ws-widget-btn-content-feedback-v2 [forPreview]=\"forPreview\" id=\"feedbackforprev\"\n [widgetData]=\"content | pipePartialContent: ['identifier', 'name']\">\n </ws-widget-btn-content-feedback-v2>\n</ng-template>\n<ng-template #authView>{{'apptocbanner.view' | translate}}</ng-template>\n<ng-template #statusMsg>\n <div class=\"status-container mt-2 mb-2\"\n *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && batchData?.workFlow?.wfInitiated\">\n <div class=\"flex\" *ngIf=\"showMsg\">\n <ng-container *ngIf=\"showIcon\">\n <mat-icon class=\"mr-4\" [ngClass]=\"iconColor\" *ngIf=\"WFIcon === 'circle'\">check_circle</mat-icon>\n <mat-icon class=\"mr-4 ws-mat-red-text visibility-show\" style=\"transform: rotate(180deg);\"\n *ngIf=\"WFIcon === 'info'\">info</mat-icon>\n </ng-container>\n <div class=\"mat-body-1\">{{ getWFMsg }}</div>\n </div>\n </div>\n <div class=\"status-container mt-5\"\n *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && showDisableMsg && !showMsg && findMessage.length > 0\">\n <div class=\"flex\">\n <ng-container>\n <mat-icon class=\"mr-3 ws-mat-red-text\" style=\"transform: rotate(180deg);\">info</mat-icon>\n </ng-container>\n <div class=\"mat-body-1\">\n <p class=\"margin-remove-bottom \">{{findMessage}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n<div class=\"share-container\" *ngIf=\"enableShare\">\n <div *ngIf=\"showLoader\" class=\"text-center my-2 loader\">\n <mat-spinner class=\"inline-block\"></mat-spinner>\n </div>\n <div class=\"cursor-pointer close-share-dialog\"><mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon></div>\n <div class=\"share-modal\">\n <div class=\"karmasahayogi-icon\"><img alt=\"karmasahayogi-icon\" src=\"/assets/icons/KarmaSahayogi.svg\"></div>\n <div class=\"content-div\">\n <div class=\"triangle-left hidden md:block\"></div>\n <div class=\"contnet\">\n <section class=\"w-full flex align-center justify-between \">\n <div class=\"mb-2\">\n <h2 class=\"mat-headline margin-remove-bottom ws-mat-black-text\">{{'contentSharing.header' | translate}}</h2>\n </div>\n </section>\n <form [formGroup]=\"shareForm\">\n <div class=\"mat-body-2\">\n <div class=\"md-5\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-chip-list #chipList aria-label=\"user selection\" appearance=\"outline\">\n <mat-chip *ngFor=\"let user of users\" [selectable]=\"selectable\" [removable]=\"removable\"\n (removed)=\"remove(user)\">\n {{user}}\n <mat-icon matChipRemove *ngIf=\"removable\">close</mat-icon>\n </mat-chip>\n <input tabindex=\"-1\" class=\"inputTextBox\"\n placeholder=\"{{users.length === 0 ? translateLabels('placehoderText', 'contentSharing') : ''}}\"\n #userInput formControlName=\"review\" [formControl]=\"userCtrl\" [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\" (matChipInputTokenEnd)=\"add($event)\">\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n <mat-option *ngFor=\"let user of filteredUsers\" [value]=\"user.name\">\n <div class=\"flex\">\n <div class=\"iconDiv\">\n <span class=\"iconText\">{{user.iconText.substring(0,2)}}</span>\n </div>\n <div>\n <div>{{user.name}}</div>\n <div class=\"emailText\">{{user.maskedEmail}}</div>\n </div>\n </div>\n </mat-option>\n </mat-autocomplete>\n <mat-hint align=\"start\" class=\"left-over-emails\">{{'contentSharing.note' | translate}}</mat-hint>\n <mat-hint align=\"end\" class=\"left-over-emails\">{{ users.length }} /{{maxEmailsLimit}}\n {{'contentSharing.remaingEmails' | translate}}</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"flex mt-5\">\n <div class=\"flex flex-1 flex-end\">\n <span class=\"copy-link-btn cursor-pointer\" (click)=\"copyToClipboard()\">{{'contentSharing.copyLink' |\n translate}} <mat-icon>link</mat-icon></span>\n <button mat-stroked-button type=\"submit\"\n [ngClass]=\"{'disable-send-btn': users.length === 0 || users.length}\"\n class=\"text-white ws-mat-primary-background flex-auto-display send-btn\"\n [disabled]=\"userCtrl.value.length || users.length === 0 || users.length > maxEmailsLimit\"\n (click)=\"submitSharing()\">\n {{'contentSharing.send' | translate}} <mat-icon>send</mat-icon>\n </button>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #batchDropdown>\n <form class=\"flex flex-col gap-4\">\n <ng-container *ngIf=\"batchData && !batchData?.enrolled\n && (!batchData.workFlow?.wfInitiated || (batchData.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED))\n && batchData?.content?.length\">\n <mat-form-field appearance=\"outline\" class=\"w-full batch-form-field\">\n <mat-select #batchControlData [formControl]=\"batchControl\" required autoSelctFirstOption\n (selectionChange)=\"batchChange($event)\" panelClass=\"batch-dropdown\">\n <mat-option *ngFor=\"let batch of batchData.content; let i=index\" [value]=\"batch\" selected=\"index === 0\"\n [disabled]=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn \">\n <div class=\"flex flex-row items-center gap-2\">\n <div class=\"flex-1 text-sm batch-timings\">\n {{ batch.name }} ( {{ batch.startDate | date: 'd MMM, yyyy' }} - {{ batch.endDate | date: 'd MMM, yyyy'\n || 'present' }} )\n </div>\n <div class=\"expired\" *ngIf=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn\">\n Expired\n </div>\n </div>\n </mat-option>\n </mat-select>\n <mat-error *ngIf=\"batchControl.hasError('required')\">Please choose a batch to start course</mat-error>\n </mat-form-field>\n <div class=\"flex flex-wrap gap-3\">\n <ng-container *ngIf=\"!showRejected\">\n <div class=\"flex-1\">\n <div class=\"flex flex-col gap-1\" *ngIf=\"selectedBatch && selectedBatch.enrollmentEndDate \">\n <p class=\"text-xs leading-4 mb-0\">Last enroll date</p>\n <p class=\"font-bold mb-0\">{{ selectedBatch.enrollmentEndDate | date: 'd MMM, y' }}</p>\n </div>\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <button class=\"enroll-button\"\n [ngClass]=\"{ 'disable-btn': disableEnrollBtn || batchControl.hasError('required') || !handleEnrollmentEndDate(selectedBatch) }\"\n [disabled]=\"disableEnrollBtn || batchControl.hasError('required')|| !handleEnrollmentEndDate(selectedBatch)\"\n (click)=\"requestToEnrollDialog()\">\n <ng-container>\n Request to enroll\n </ng-container>\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showRejected && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n Your enrollment request is {{batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED\n ?'removed':'rejected'}}.</h3>\n </ng-container>\n </div>\n </ng-container>\n </form>\n</ng-template>", styles: [".button,.batch-div .enroll-button,.batch-div .withdraw-batch{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}.batch-div{border-radius:8px;background-color:#fdead5;max-width:400px;margin:0 auto}.batch-div .request-block{padding:16px}.batch-div .batch-details{padding:16px;border:1px solid #FF9800;border-radius:8px;background-color:#fff;cursor:pointer}.batch-div .batch-enrolled{font-weight:700;color:#4caf50;font-size:.75rem}.batch-div .withdraw-batch{color:#000000de;border:1px solid rgba(0,0,0,.8705882353);background-color:#fff;width:100%;margin-top:16px}.batch-div .enroll-button{color:#fff;background-color:#ff9800;border:1px solid #FF9800}::ng-deep .batch-dropdown{margin-top:3rem!important}::ng-deep .batch-dropdown .mat-option{height:fit-content!important;padding:12px 16px!important}::ng-deep .batch-form-field{height:64px}::ng-deep .batch-form-field .mat-form-field-wrapper{margin:0;padding-bottom:0;height:inherit}::ng-deep .batch-form-field .mat-form-field-wrapper .mat-form-field-flex{height:inherit}::ng-deep .batch-form-field .mat-form-field-outline{border-radius:8px;height:inherit}::ng-deep .batch-form-field .mat-form-field-infix{display:flex;align-items:center;font-size:14px;border-top:.35rem solid transparent;padding:8px 0;height:44px}::ng-deep .batch-form-field .mat-form-field-infix .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(0)!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper{padding:8px 4px!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper .mat-error{margin-top:6px}::ng-deep .batch-form-field .mat-select-value-text{white-space:pre-line!important;line-height:21px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.disable-btn{opacity:.5}.mb-0{margin-bottom:0!important}.batch-timings{text-transform:uppercase;line-height:20px}.header-synopsis{padding:32px 64px}@media only screen and (max-width: 599px){.header-synopsis{padding:32px 24px}}.app-icon{height:180px;width:280px;border-radius:4px}.banner-container{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}.header-synopsis-gradient{background:inherit}.category-text{margin-left:8px}.fixed-width{max-width:1230px;display:block;margin:0 auto;padding:0!important}@media only screen and (min-width: 600px) and (max-width: 959px){.fixed-width{padding:0 15px!important}}@media only screen and (max-width: 599px){.fixed-width{padding:0 15px!important}}.fluid-width{width:100%}.header-synopsis{box-sizing:border-box}.header-synopsis .apIcon{background-color:#fff;margin-right:16px;padding:4px 8px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start}.header-synopsis .apIcon img{height:15px;object-fit:contain}.header-synopsis .apIcon span{opacity:1;color:#0009;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.header-synopsis .header-title{display:flex}.header-synopsis .header-title .text-truncate-title{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.header-synopsis .rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px}.header-synopsis .rating .rating-number{letter-spacing:0px;color:#f69953}.header-synopsis .rating .rating-count{letter-spacing:.36px;color:#f69953}.header-synopsis .rating .rating mat-icon{color:#f69953}.header-synopsis .header-meta{line-height:1.5}.header-synopsis .resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box;box-shadow:0 10px 30px #9993;color:#fff!important}.header-synopsis .resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.header-synopsis .header-actions{display:flex}.header-synopsis .header-actions .custom-button{background:#0074b6 0% 0% no-repeat padding-box;border-radius:4px}.header-synopsis .header-actions.top{margin-top:0;margin-bottom:40px}.header-synopsis .header-actions .action-btns{margin-left:auto;order:2}.banner-overview-container{display:flex;justify-content:space-between}.banner-overview-container .overview-description{flex:1;min-width:1px;margin-right:24px;margin-bottom:12px;opacity:1;color:#000000de;font-size:16px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:24px}@media only screen and (max-width: 599px){.banner-overview-container .overview-description{margin-right:0}}.banner-overview-container .overview-intro{width:240px;height:135px;border:1px solid;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;position:relative}.banner-overview-container .overview-intro .overview-intro-overlay{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:48px;height:48px;font-size:48px;background-color:#00000080;border-radius:50%;padding:8px}.banner-overview-container .overview-intro .overview-intro-overlay:active{background-color:#000000b3}@media only screen and (max-width: 599px){.banner-overview-container .overview-intro{display:none}}.analytics-meta{font-weight:500;margin-bottom:12px;line-height:1.2}.hidden-block-xs{display:block}@media only screen and (max-width: 599px){.hidden-block-xs{display:none}}.visible-block-xs{display:none}@media only screen and (max-width: 599px){.visible-block-xs{display:block}}.hidden-block-s{display:block}@media only screen and (min-width: 600px) and (max-width: 959px){.hidden-block-s{display:none}}.visible-block-s{display:none}@media only screen and (min-width: 600px) and (max-width: 959px){.visible-block-s{display:block}}.info-msg{color:#fff!important}.info-msg mat-icon{color:#fff!important}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:1}.tags .tag{display:inline-block;border-radius:100px 4px 4px 100px;padding:1px 12px;width:auto;justify-content:space-between;margin:0 8px 8px 0;background-color:#0000000a;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}.batch-container{max-width:435px;border-radius:4px;width:40%}.custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px;max-width:auto!important;height:42px!important}.sticky-banner{z-index:999;position:sticky;top:128px}.sticky-banner .header-title h1{font:normal normal 300 24px/35px}.sticky-banner .overview-description{font:normal normal 300 14px/21px}.batch-wrapper{display:flex;justify-content:space-between;gap:25px;width:100%}.batch-timer{width:60%;background-color:#fff;align-items:center}.batch-timer .timer-title{opacity:1;color:#0006;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.batch-timer .time-wrapper div p.count{border-radius:4px;background-color:#000000de;opacity:1;color:#fff;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:center;line-height:48px;width:67px;height:47px;margin-bottom:4px}.batch-timer .time-wrapper div p.time-label{opacity:1;color:#000000de;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:center;line-height:12px}.batch-timer .time-wrapper span{padding:8px;font-size:36px}.batch-timer .help{width:100%}.batch-timer .help .batch-duration-wrap{padding:0 24px}.batch-timer .help .batch-duration-wrap .duration-days{opacity:1;color:#000000de;font-family:Montserrat-SemiBold;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:left;line-height:48px;padding-bottom:16px}.batch-info{opacity:1;color:#000000de;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px;padding:26px}.disable-send-btn[disabled]{background-color:#000!important}@media (max-width: 768px){.batch-wrapper{flex-wrap:wrap}.batch-timer{width:100%;flex-wrap:wrap;justify-content:center}.batch-container{width:100%}}.share-container{position:fixed;height:100vh;background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.share-modal{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit}.karmasahayogi-icon{position:absolute;bottom:-5px;left:calc(50% - 464px)}.triangle-left{transform:translateY(100%);position:absolute;bottom:28%;left:-24px;width:0;height:0;border-top:24px solid transparent;border-right:48px solid #ffffff;border-bottom:24px solid transparent}.contnet{background-color:#fff;width:612px;border-radius:12px;padding:16px}.content-div{position:relative}.copy-link-btn{display:flex;align-items:center;margin-right:20px;color:red;color:#0074b6!important;font-weight:600}.copy-link-btn:hover{background-color:none!important}.send-btn{border-radius:20px}.send-btn .mat-icon{margin-bottom:2.5px}::ng-deep .mat-chip-list-wrapper{height:100px;overflow:auto;display:block!important;scroll-behavior:smooth}.iconText{border-radius:50%;background-color:#000;color:#fff;width:30px;display:inline-block;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.iconDiv{margin-right:8px}.emailText{opacity:.6}button:disabled{pointer-events:none;opacity:.5;color:#000}::ng-deep .mat-autocomplete-panel{z-index:99999}::ng-deep .cdk-overlay-pane{z-index:9999!important}::ng-deep .close-icon{background-color:#000;color:#fff;border-radius:16px;padding:4px}::ng-deep .mat-chip-input{padding-bottom:8px!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip{color:#0074b6!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip mat-icon{color:#0074b6!important}::ng-deep .inputTextBox{width:95%!important;overflow-x:hidden}.close-share-dialog{position:absolute;right:30px;top:30px}.left-over-emails{font-weight:600}.loader{position:absolute;top:42%;left:45%;z-index:1000}@media (max-width: 768px){.content-div{width:100%}.contnet{width:unset;margin-bottom:18%}.left-over-emails{display:none}.karmasahayogi-icon{left:8%;bottom:20%}.share-modal{align-items:self-end}}@media only screen and (min-device-width: 820px) and (max-device-width: 1180px){.karmasahayogi-icon{left:calc(50% - 387px)}.content{width:500px}}@media only screen and (min-device-width: 768px) and (max-device-width: 819px){.triangle-left{display:none}}.location-wrapper{padding:16px;border-top:1px solid rgba(0,0,0,.16)}.location-wrapper .location-icon{color:#1b4ca1;height:32px;width:32px;font-size:32px;padding-right:8px}.location-wrapper .loc-details{opacity:1;color:#000000de;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:Bold;letter-spacing:.25px;text-align:left;line-height:20px}.visibility-show{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], 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: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: i9.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.DefaultThumbnailDirective, selector: "[wsUtilsDefaultThumbnail]", inputs: ["wsUtilsDefaultThumbnail", "src"] }, { kind: "component", type: i13.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePartialContentPipe, name: "pipePartialContent" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
19425
19461
|
}
|
|
19426
19462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBannerComponent, decorators: [{
|
|
19427
19463
|
type: Component,
|
|
@@ -21505,7 +21541,7 @@ class AppTocHomeV2Component {
|
|
|
21505
21541
|
this.dataTransferSvc.setEnrollData(this.userEnrollmentList);
|
|
21506
21542
|
// in case of back from player we need to check recent language and load
|
|
21507
21543
|
if (!this.contentLibSvc?.oneStepResumeEnable && this.baseContentReadData?.identifier === this.contentReadData?.identifier) {
|
|
21508
|
-
let lang = this.baseContentReadData?.language
|
|
21544
|
+
let lang = this.baseContentReadData?.language?.length ? this.baseContentReadData?.language[0] : '';
|
|
21509
21545
|
let baseContentFromEnrollData = this.userEnrollmentList.find((el) => el.collectionId === this.baseContentReadData?.identifier);
|
|
21510
21546
|
if (lang && baseContentFromEnrollData && baseContentFromEnrollData?.recent_language?.toLowerCase() !== lang) {
|
|
21511
21547
|
let localLang = this.contentLangSvc.getRequiredLanguageDetails(this.baseContentReadData, baseContentFromEnrollData?.recent_language);
|
|
@@ -22806,7 +22842,7 @@ class AppTocContentCardComponent {
|
|
|
22806
22842
|
});
|
|
22807
22843
|
}
|
|
22808
22844
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n <ng-container *ngIf=\"isCollection\">\n <div class=\"flex flex-col position-relative\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n {{ content?.name }} \n </p>\n <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n <span class=\"view-certificate-wrapper\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n </span>\n </a>\n </ng-container>\n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>{{'apptoccontentcard.resource' | translate}}</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>{{'apptoccontentcard.module' | translate}}</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>{{'apptoccontentcard.course' | translate}}</span>\n </div>\n </div>\n <div>\n <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n <!-- <span class=\"ml-5\"> -->\n <!-- <ng-container *ngIf=\"content?.displayContentType\"> | </ng-container> -->\n <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n }}</span>\n <!-- </span> -->\n </div>\n </div>\n <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button>\n <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n <ng-container *ngIf=\"content?.completionStatus == 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n\n <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n <div class=\"child-structure\"> -->\n <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n <ng-container>{{ contentStructure?.course }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n <ng-container> {{ contentStructure?.video }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n Interactive Video</ng-container>\n <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n Interactive Videos</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n <ng-container> {{ contentStructure?.youtube }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n <ng-container> {{ contentStructure?.pdf }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n <ng-container> {{ contentStructure?.podcast }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n <ng-container> {{ contentStructure?.webModule }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n <ng-container> {{ contentStructure?.webPage }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n <ng-container>{{ contentStructure?.quiz }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n <ng-container> {{ contentStructure?.assessment }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n <ng-container>{{ contentStructure?.other }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n </span>\n </div>\n </div> -->\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n </a>\n </div>\n </div>\n </div>\n <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n <ng-container *ngIf=\"content?.completionStatus == 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n </ws-app-toc-content-card>\n </div>\n </ng-container>\n <div *ngIf=\"isResource\" class=\"resource-container\">\n <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n </ws-widget-display-content-type-icon> -->\n <!-- <div class=\"img-container\"> -->\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <!-- </div> -->\n\n <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.queryParams : null\">\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{ content?.name }}\n </p>\n <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n </div>\n <div class=\"resicons ws-mat-black60-text\">\n <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n <!-- <span class=\"ml-5\"> -->\n <!-- <ng-container *ngIf=\"content?.displayContentType\"> | </ng-container> -->\n <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n <!-- </span> -->\n </div>\n </div>\n </a>\n <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>Resource</span>\n </div>\n <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>Module</span>\n </div>\n <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>Course</span>\n </div> -->\n <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button>\n <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n \n <ng-container *ngIf=\"content?.completionStatus == 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n \n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"0\"\n [radius]=\"12\"\n [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\"\n [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\"\n [animation]=\"true\"\n [space]=\"-3\"\n [showUnits]=\"false\"\n [animationDuration]=\"300\"\n [showTitle]=\"false\"\n [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\"\n [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n [showSubtitle]=\"false\" \n [showInnerStroke]=\"true\" \n [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </div>\n\n \n\n <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n </div>\n <!-- <div class=\"resource-meta width-expand\">\n <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n {{ content?.name }}\n </h3>\n <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n {{ content?.name }}\n </h1>\n </a>\n <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n </span>\n </div> -->\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove\" >\n {{'apptoccontentcard.viewDetails' | translate}}\n </h3>\n </a>\n <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n <!-- <div mat-menu-item>\n <ws-widget-btn-content-download [widgetData]=\"\n content\n | pipePartialContent\n : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n \"></ws-widget-btn-content-download>\n <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n </ws-widget-btn-content-like>\n <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n <ws-widget-btn-goals></ws-widget-btn-goals>\n <ws-widget-btn-playlist></ws-widget-btn-playlist>\n </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\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: 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: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
22845
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n <ng-container *ngIf=\"isCollection\">\n <div class=\"flex flex-col position-relative\">\n <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n {{ content?.name }} \n </p>\n <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n <span class=\"view-certificate-wrapper\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n </span>\n </a>\n </ng-container>\n <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>{{'apptoccontentcard.resource' | translate}}</span>\n </div>\n <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>{{'apptoccontentcard.module' | translate}}</span>\n </div>\n <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>{{'apptoccontentcard.course' | translate}}</span>\n </div>\n </div>\n <div>\n <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n <!-- <span class=\"ml-5\"> -->\n <!-- <ng-container *ngIf=\"content?.displayContentType\"> | </ng-container> -->\n <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n }}</span>\n <!-- </span> -->\n </div>\n </div>\n <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button>\n <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n <ng-container *ngIf=\"content?.completionStatus == 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n </ng-container>\n\n <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n <div class=\"child-structure\"> -->\n <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n <ng-container>{{ contentStructure?.course }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n <ng-container> {{ contentStructure?.video }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n Interactive Video</ng-container>\n <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n Interactive Videos</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n <ng-container> {{ contentStructure?.youtube }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n <ng-container> {{ contentStructure?.pdf }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n <ng-container> {{ contentStructure?.podcast }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n <ng-container> {{ contentStructure?.webModule }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n <ng-container> {{ contentStructure?.webPage }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n <ng-container>{{ contentStructure?.quiz }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n <ng-container> {{ contentStructure?.assessment }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n </span>\n <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n <ng-container>{{ contentStructure?.other }}</ng-container>\n <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n </span>\n </div>\n </div> -->\n <div class=\"see-all-container\">\n <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n </a>\n </div>\n </div>\n </div>\n <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n <ng-container *ngIf=\"content?.completionStatus == 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n </ws-app-toc-content-card>\n </div>\n </ng-container>\n <div *ngIf=\"isResource\" class=\"resource-container\">\n <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n </ws-widget-display-content-type-icon> -->\n <!-- <div class=\"img-container\"> -->\n <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <!-- </div> -->\n\n <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.queryParams : null\">\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{ content?.name }}\n </p>\n <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n </div>\n <div class=\"resicons ws-mat-black60-text\">\n <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n <!-- <span class=\"ml-5\"> -->\n <!-- <ng-container *ngIf=\"content?.displayContentType\"> | </ng-container> -->\n <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n content?.mimeType ==='application/x-mpegURL'\">\n <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/pdf'\">\n <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n <!-- </span> -->\n </div>\n </div>\n </a>\n <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>Resource</span>\n </div>\n <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>Module</span>\n </div>\n <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n <span>Course</span>\n </div> -->\n <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button>\n <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n \n <ng-container *ngIf=\"content?.completionStatus == 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n <ng-container *ngIf=\"content?.completionStatus < 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </ws-widget-content-progress> -->\n </ng-container>\n \n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\"\n [percent]=\"0\"\n [radius]=\"12\"\n [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\"\n [outerStrokeColor]=\"'#808080'\"\n [innerStrokeColor]=\"'#808080'\"\n [animation]=\"true\"\n [space]=\"-3\"\n [showUnits]=\"false\"\n [animationDuration]=\"300\"\n [showTitle]=\"false\"\n [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\"\n [outerStrokeLinecap]=\"'butt'\"\n matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n [showSubtitle]=\"false\" \n [showInnerStroke]=\"true\" \n [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </div>\n\n \n\n <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n <mat-icon>more_vertical</mat-icon>\n </button> -->\n </div>\n <!-- <div class=\"resource-meta width-expand\">\n <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n {{ content?.name }}\n </h3>\n <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n {{ content?.name }}\n </h1>\n </a>\n <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n </span>\n </div> -->\n </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n class=\"flex flex-middle\">\n <mat-icon>toc</mat-icon>\n <h3 class=\"margin-remove\" >\n {{'apptoccontentcard.viewDetails' | translate}}\n </h3>\n </a>\n <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n <!-- <div mat-menu-item>\n <ws-widget-btn-content-download [widgetData]=\"\n content\n | pipePartialContent\n : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n \"></ws-widget-btn-content-download>\n <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n </ws-widget-btn-content-like>\n <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n <ws-widget-btn-goals></ws-widget-btn-goals>\n <ws-widget-btn-playlist></ws-widget-btn-playlist>\n </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\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: 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: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
22810
22846
|
}
|
|
22811
22847
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, decorators: [{
|
|
22812
22848
|
type: Component,
|
|
@@ -23231,7 +23267,7 @@ class CreateBatchDialogComponent {
|
|
|
23231
23267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateBatchDialogComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: AppTocService }, { token: i7.MatLegacySnackBar }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23232
23268
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateBatchDialogComponent, selector: "ws-app-create-batch-dialog", providers: [
|
|
23233
23269
|
{ provide: DateAdapter, useClass: NativeDateAdapter },
|
|
23234
|
-
], viewQueries: [{ propertyName: "toastSuccess", first: true, predicate: ["toastSuccess"], descendants: true, static: true }, { propertyName: "toastError", first: true, predicate: ["toastError"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"createBatchForm\">\n <!-- <h2 mat-dialog-title>Install Angular</h2> -->\n <mat-dialog-content class=\"mat-typography pad-fix\">\n <div class=\"flex flex-1 custom\">\n <div class=\"flex flex-4 flex-column margin-right-l\">\n\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <label for=\"name\" class=\" margin-remove-bottom form-label required\"\n i18n=\"Name label|Label which explains the user to enter name\" i18n-aria-label\n aria-label=\"Name label\">\n Name\n </label>\n <input id=\"name\" matInput #name formControlName=\"name\" i18n-placeholder\n placeholder=\"Enter Name\" i18n-aria-label aria-label=\"Name input\" />\n <mat-error [hidden]=\"false\" i18n=\"Name Error|Explains name is required\" i18n-aria-label\n aria-label=\"Name Error|Explains name is required \"\n *ngIf=\"createBatchForm?.controls['name'].errors?.required\">\n Name is mandatory\n </mat-error>\n <mat-error [hidden]=\"false\" *ngIf=\"createBatchForm?.controls['name'].errors?.pattern\"\n i18n-aria-label\n aria-label=\"Name Error|Name fields cannot contain numbers and special characters \">\n Name fields cannot contain numbers and special characters '\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <label for=\"description\" class=\" margin-remove-bottom form-label\"\n i18n=\"description label|Label which explains the user to enter description\" i18n-aria-label\n aria-label=\"description label\">\n Description\n </label>\n <input id=\"description\" matInput #description formControlName=\"description\" i18n-placeholder\n placeholder=\"Enter Description\" i18n-aria-label aria-label=\"Description input\" />\n <mat-error [hidden]=\"false\" i18n=\"Description Error|Explains description is required\" i18n-aria-label\n aria-label=\"Description Error|Explains description is required \"\n *ngIf=\"createBatchForm?.controls['description'].errors?.required\">\n Description is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <label for=\"enrollmentType\" class=\" margin-remove-bottom form-label required\"\n i18n=\"enrollmentType label|Label which explains the user to enter enrollmentType\" i18n-aria-label\n aria-label=\"enrollmentType label\">\n Enrollment Type\n </label>\n <mat-select matInput formControlName=\"enrollmentType\" #enrollmentType >\n <mat-option [value]=\"c\" *ngFor=\"let c of enrollmentTypes\" [innerHTML]=\"c\"></mat-option>\n </mat-select>\n <mat-error [hidden]=\"false\" i18n=\"enrollmentType Error|Explains enrollmentType is required\" i18n-aria-label\n aria-label=\"enrollmentType Error|Explains enrollmentType is required \"\n *ngIf=\"createBatchForm?.controls['enrollmentType'].errors?.required\">\n Enrollment Type is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input id=\"startDate\" matInput #startDate formControlName=\"startDate\" [matDatepicker]=\"picker\"\n i18n-placeholder (focus)=\"picker.open()\" placeholder=\"Choose startDate(dd-mm-yyyy)\"\n [min]=\"today\" readonly>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker (closed)=\"startDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n </mat-datepicker>\n <mat-error [hidden]=\"false\" i18n=\"Start date Error|Explains name is required\">\n Start date is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input id=\"endDate\" matInput #endDate formControlName=\"endDate\" [matDatepicker]=\"endpicker\"\n i18n-placeholder (focus)=\"endpicker.open()\" placeholder=\"Choose endDate(dd-mm-yyyy)\"\n [min]=\"today\" readonly>\n <mat-datepicker-toggle matSuffix [for]=\"endpicker\"></mat-datepicker-toggle>\n <mat-datepicker #endpicker (closed)=\"endDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n </mat-datepicker>\n <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n End date is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input id=\"enrollmentEndDate\" matInput #enrollmentEndDate formControlName=\"enrollmentEndDate\" [matDatepicker]=\"enrollmentEndPicker\"\n i18n-placeholder (focus)=\"enrollmentEndPicker.open()\" placeholder=\"Choose enrollmentEndDate(dd-mm-yyyy)\"\n [min]=\"today\" readonly>\n <mat-datepicker-toggle matSuffix [for]=\"enrollmentEndPicker\"></mat-datepicker-toggle>\n <mat-datepicker #enrollmentEndPicker (closed)=\"enrollmentEndDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n </mat-datepicker>\n <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n End date is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <mat-dialog-actions align=\"end\" class=\"mb-0-imp\">\n <button mat-raised-button type=\"button\" [mat-dialog-close]=\"true\"\n class=\"ws-mat-accent-border flex-auto-display\">\n <span class=\"ws-mat-default-text\" >Discard</span>\n </button>\n <button mat-raised-button type=\"submit\"\n class=\"text-white ws-mat-primary-background flex-auto-display\" \n [disabled]=\"uploadSaveData || createBatchForm?.invalid\" (click)=\"createBatchSubmit(createBatchForm)\">\n <span class=\"text-white\" >Create</span>\n </button>\n <span *ngIf=\"uploadSaveData\" class=\"px-4 flex items-center justify-center\">\n <mat-spinner [diameter]=\"30\"></mat-spinner>\n </span>\n </mat-dialog-actions>\n </div>\n\n </div>\n </mat-dialog-content>\n</form>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Batch created successfully\"\n value=\"Batch created successfully!\" #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create batch\"\n value=\"Error in creating batch!\" #toastError />", styles: [".start-card{min-width:80px;margin:0 30px 30px;font-size:16px}.start-card mat-card-content{margin-top:10px}@media only screen and (max-width: 599px){.flex-auto-display{flex:auto;margin-left:0!important;margin-top:1rem}}@media only screen and (min-width: 600px) and (max-width: 959px){.flex-auto-display{flex:auto}}.similar{display:none!important}@media only screen and (max-width: 599px){.similar{display:none!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.similar{display:none!important}}@media only screen and (max-width: 599px){.mob{margin-left:0!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.mob{margin-left:0!important}}.custom{flex-direction:row}@media only screen and (max-width: 599px){.custom{flex-direction:column}}@media only screen and (min-width: 600px) and (max-width: 959px){.custom{flex-direction:column}}.pad-fix{padding:0 0 0 24px}.flex-4{flex:4}.flex-3{flex:3}.flex-2{flex:2}.mb-0-imp{margin-bottom:0!important}.w-full-imp{width:100%!important}\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: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { 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: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
|
|
23270
|
+
], viewQueries: [{ propertyName: "toastSuccess", first: true, predicate: ["toastSuccess"], descendants: true, static: true }, { propertyName: "toastError", first: true, predicate: ["toastError"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"createBatchForm\">\n <!-- <h2 mat-dialog-title>Install Angular</h2> -->\n <mat-dialog-content class=\"mat-typography pad-fix\">\n <div class=\"flex flex-1 custom\">\n <div class=\"flex flex-4 flex-column margin-right-l\">\n\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <label for=\"name\" class=\" margin-remove-bottom form-label required\"\n i18n=\"Name label|Label which explains the user to enter name\" i18n-aria-label\n aria-label=\"Name label\">\n Name\n </label>\n <input id=\"name\" matInput #name formControlName=\"name\" i18n-placeholder\n placeholder=\"Enter Name\" i18n-aria-label aria-label=\"Name input\" />\n <mat-error [hidden]=\"false\" i18n=\"Name Error|Explains name is required\" i18n-aria-label\n aria-label=\"Name Error|Explains name is required \"\n *ngIf=\"createBatchForm?.controls['name'].errors?.required\">\n Name is mandatory\n </mat-error>\n <mat-error [hidden]=\"false\" *ngIf=\"createBatchForm?.controls['name'].errors?.pattern\"\n i18n-aria-label\n aria-label=\"Name Error|Name fields cannot contain numbers and special characters \">\n Name fields cannot contain numbers and special characters '\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <label for=\"description\" class=\" margin-remove-bottom form-label\"\n i18n=\"description label|Label which explains the user to enter description\" i18n-aria-label\n aria-label=\"description label\">\n Description\n </label>\n <input id=\"description\" matInput #description formControlName=\"description\" i18n-placeholder\n placeholder=\"Enter Description\" i18n-aria-label aria-label=\"Description input\" />\n <mat-error [hidden]=\"false\" i18n=\"Description Error|Explains description is required\" i18n-aria-label\n aria-label=\"Description Error|Explains description is required \"\n *ngIf=\"createBatchForm?.controls['description'].errors?.required\">\n Description is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <label for=\"enrollmentType\" class=\" margin-remove-bottom form-label required\"\n i18n=\"enrollmentType label|Label which explains the user to enter enrollmentType\" i18n-aria-label\n aria-label=\"enrollmentType label\">\n Enrollment Type\n </label>\n <mat-select matInput formControlName=\"enrollmentType\" #enrollmentType >\n <mat-option [value]=\"c\" *ngFor=\"let c of enrollmentTypes\" [innerHTML]=\"c\"></mat-option>\n </mat-select>\n <mat-error [hidden]=\"false\" i18n=\"enrollmentType Error|Explains enrollmentType is required\" i18n-aria-label\n aria-label=\"enrollmentType Error|Explains enrollmentType is required \"\n *ngIf=\"createBatchForm?.controls['enrollmentType'].errors?.required\">\n Enrollment Type is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input id=\"startDate\" matInput #startDate formControlName=\"startDate\" [matDatepicker]=\"picker\"\n i18n-placeholder (focus)=\"picker.open()\" placeholder=\"Choose startDate(dd-mm-yyyy)\"\n [min]=\"today\" readonly>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker (closed)=\"startDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n </mat-datepicker>\n <mat-error [hidden]=\"false\" i18n=\"Start date Error|Explains name is required\">\n Start date is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input id=\"endDate\" matInput #endDate formControlName=\"endDate\" [matDatepicker]=\"endpicker\"\n i18n-placeholder (focus)=\"endpicker.open()\" placeholder=\"Choose endDate(dd-mm-yyyy)\"\n [min]=\"today\" readonly>\n <mat-datepicker-toggle matSuffix [for]=\"endpicker\"></mat-datepicker-toggle>\n <mat-datepicker #endpicker (closed)=\"endDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n </mat-datepicker>\n <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n End date is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"flex flex-1\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <input id=\"enrollmentEndDate\" matInput #enrollmentEndDate formControlName=\"enrollmentEndDate\" [matDatepicker]=\"enrollmentEndPicker\"\n i18n-placeholder (focus)=\"enrollmentEndPicker.open()\" placeholder=\"Choose enrollmentEndDate(dd-mm-yyyy)\"\n [min]=\"today\" readonly>\n <mat-datepicker-toggle matSuffix [for]=\"enrollmentEndPicker\"></mat-datepicker-toggle>\n <mat-datepicker #enrollmentEndPicker (closed)=\"enrollmentEndDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n </mat-datepicker>\n <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n End date is mandatory\n </mat-error>\n </mat-form-field>\n </div>\n <mat-dialog-actions align=\"end\" class=\"mb-0-imp\">\n <button mat-raised-button type=\"button\" [mat-dialog-close]=\"true\"\n class=\"ws-mat-accent-border flex-auto-display\">\n <span class=\"ws-mat-default-text\" >Discard</span>\n </button>\n <button mat-raised-button type=\"submit\"\n class=\"text-white ws-mat-primary-background flex-auto-display\" \n [disabled]=\"uploadSaveData || createBatchForm?.invalid\" (click)=\"createBatchSubmit(createBatchForm)\">\n <span class=\"text-white\" >Create</span>\n </button>\n <span *ngIf=\"uploadSaveData\" class=\"px-4 flex items-center justify-center\">\n <mat-spinner [diameter]=\"30\"></mat-spinner>\n </span>\n </mat-dialog-actions>\n </div>\n\n </div>\n </mat-dialog-content>\n</form>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Batch created successfully\"\n value=\"Batch created successfully!\" #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create batch\"\n value=\"Error in creating batch!\" #toastError />", styles: [".start-card{min-width:80px;margin:0 30px 30px;font-size:16px}.start-card mat-card-content{margin-top:10px}@media only screen and (max-width: 599px){.flex-auto-display{flex:auto;margin-left:0!important;margin-top:1rem}}@media only screen and (min-width: 600px) and (max-width: 959px){.flex-auto-display{flex:auto}}.similar{display:none!important}@media only screen and (max-width: 599px){.similar{display:none!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.similar{display:none!important}}@media only screen and (max-width: 599px){.mob{margin-left:0!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.mob{margin-left:0!important}}.custom{flex-direction:row}@media only screen and (max-width: 599px){.custom{flex-direction:column}}@media only screen and (min-width: 600px) and (max-width: 959px){.custom{flex-direction:column}}.pad-fix{padding:0 0 0 24px}.flex-4{flex:4}.flex-3{flex:3}.flex-2{flex:2}.mb-0-imp{margin-bottom:0!important}.w-full-imp{width:100%!important}\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: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { 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: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
|
|
23235
23271
|
}
|
|
23236
23272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateBatchDialogComponent, decorators: [{
|
|
23237
23273
|
type: Component,
|
|
@@ -23268,7 +23304,7 @@ class AppTocSessionCardComponent {
|
|
|
23268
23304
|
return '#f27d00';
|
|
23269
23305
|
}
|
|
23270
23306
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23271
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSessionCardComponent, selector: "ws-app-toc-session-card", inputs: { session: "session", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchData: "batchData", config: "config" }, ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\"\n [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.queryParams : null\">\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{ session?.title }}\n </p>\n\n <span class=\"content-type optional-span\" *ngIf=\"session?.optionalReading\">{{'apptocsessionscards.optional' | translate }} </span>\n <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n\n\n </div>\n <div class=\"mat-body-2 ws-mat-black60-text\">\n <div class=\"flex flex-1 flex-row\">\n <div class=\"flex margin-right-s capitalize\">{{session?.sessionType || ''}}</div>\n <div class=\"flex margin-right-s bullet-span\">{{session?.startDate | date: 'dd-MM-yyyy' }}</div>\n <div class=\"flex bullet-span\">{{session?.sessionDuration || '_'}}, {{session?.startTime || '_' }} -\n {{session?.endTime || '_'}}\n </div>\n </div>\n <!-- <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span> -->\n <!-- </span> -->\n </div>\n </div>\n </a>\n <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n <ng-container *ngIf=\"!forPreview && session?.sessionId && session?.completionPercentage; else elseBlock\">\n <ng-container *ngIf=\"session?.completionStatus == 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\"\n [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"Completed\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n <ng-container *ngIf=\"session?.completionStatus < 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"session?.completionPercentage\"\n [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"24\"\n [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [outerStrokeColor]=\"'#808080'\" [innerStrokeColor]=\"'#808080'\" [animation]=\"true\"\n [space]=\"-3\" [showUnits]=\"false\" [animationDuration]=\"300\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\" [showSubtitle]=\"false\"\n [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\"\n [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </div>\n</div>\n<ng-container *ngIf=\"batchData?.enrolled\">\n <div *ngIf=\"session?.sessionHandouts?.length > 0\">\n <p class=\" font-bold mat-body-1 margin-bottom-xs ws-mat-black60-text\">{{'apptocsessionscards.sessionHandouts' | translate }}</p>\n <div class=\"flex flex-col flex-wrapped margin-bottom-s width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n <ng-container *ngFor=\"let handout of session?.sessionHandouts\">\n <div class=\"\">\n <span class=\"mr-4\">{{handout.title}}</span>\n <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n<ng-container>\n <ws-widget-attendance-card [session]=\"session\" [config]=\"config\"></ws-widget-attendance-card>\n</ng-container>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:8px}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.bullet-span:before{content:\"\\2022\";padding-right:12px}.download-link{opacity:1;color:#0074b6;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}\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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AttendanceCardComponent, selector: "ws-widget-attendance-card", inputs: ["session", "status", "config", "showInfo"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
23307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSessionCardComponent, selector: "ws-app-toc-session-card", inputs: { session: "session", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchData: "batchData", config: "config" }, ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\"\n [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n [queryParams]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.queryParams : null\">\n <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n <div class=\"flex flex-col sm:flex-row flex-wrap\">\n <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n {{ session?.title }}\n </p>\n\n <span class=\"content-type optional-span\" *ngIf=\"session?.optionalReading\">{{'apptocsessionscards.optional' | translate }} </span>\n <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n\n\n </div>\n <div class=\"mat-body-2 ws-mat-black60-text\">\n <div class=\"flex flex-1 flex-row\">\n <div class=\"flex margin-right-s capitalize\">{{session?.sessionType || ''}}</div>\n <div class=\"flex margin-right-s bullet-span\">{{session?.startDate | date: 'dd-MM-yyyy' }}</div>\n <div class=\"flex bullet-span\">{{session?.sessionDuration || '_'}}, {{session?.startTime || '_' }} -\n {{session?.endTime || '_'}}\n </div>\n </div>\n <!-- <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span> -->\n <!-- </span> -->\n </div>\n </div>\n </a>\n <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n <ng-container *ngIf=\"!forPreview && session?.sessionId && session?.completionPercentage; else elseBlock\">\n <ng-container *ngIf=\"session?.completionStatus == 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\"\n [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n matTooltip=\"Completed\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n <ng-container *ngIf=\"session?.completionStatus < 2\">\n <circle-progress class=\"flex items-center progress\" [percent]=\"session?.completionPercentage\"\n [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"24\"\n [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n </circle-progress>\n </ng-container>\n\n </ng-container>\n <ng-template #elseBlock>\n <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n [innerStrokeWidth]=\"3\" [outerStrokeColor]=\"'#808080'\" [innerStrokeColor]=\"'#808080'\" [animation]=\"true\"\n [space]=\"-3\" [showUnits]=\"false\" [animationDuration]=\"300\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\" [showSubtitle]=\"false\"\n [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\"\n [showBackground]=\"false\"></circle-progress>\n <!-- <p>no data</p> -->\n </ng-template>\n </div>\n</div>\n<ng-container *ngIf=\"batchData?.enrolled\">\n <div *ngIf=\"session?.sessionHandouts?.length > 0\">\n <p class=\" font-bold mat-body-1 margin-bottom-xs ws-mat-black60-text\">{{'apptocsessionscards.sessionHandouts' | translate }}</p>\n <div class=\"flex flex-col flex-wrapped margin-bottom-s width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n <ng-container *ngFor=\"let handout of session?.sessionHandouts\">\n <div class=\"\">\n <span class=\"mr-4\">{{handout.title}}</span>\n <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n<ng-container>\n <ws-widget-attendance-card [session]=\"session\" [config]=\"config\"></ws-widget-attendance-card>\n</ng-container>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:8px}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.bullet-span:before{content:\"\\2022\";padding-right:12px}.download-link{opacity:1;color:#0074b6;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}\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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AttendanceCardComponent, selector: "ws-widget-attendance-card", inputs: ["session", "status", "config", "showInfo"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
23272
23308
|
}
|
|
23273
23309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardComponent, decorators: [{
|
|
23274
23310
|
type: Component,
|
|
@@ -24036,7 +24072,7 @@ class AppTocSinglePageComponent {
|
|
|
24036
24072
|
return this.langtranslations.translateLabelWithoutspace(label, type, '');
|
|
24037
24073
|
}
|
|
24038
24074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSinglePageComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i1$5.DomSanitizer }, { token: AccessControlService }, { token: i2$1.LoggerService }, { token: TitleTagService }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.ConfigurationsService }, { token: ConnectionHoverService }, { token: i2$1.EventService }, { token: RatingService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSinglePageComponent, selector: "ws-app-app-toc-single-page", inputs: { content: "content", initialrouteData: "initialrouteData", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabSelectedIndex\" class=\"custom-tabgroup\" (selectedTabChange)=\"tabClicked($event)\">\n <mat-tab label=\"{{'apptocsinglepage.overview' | translate}}\">\n <ng-template matTabContent>\n <section id=\"overview\">\n <div class=\"fixed-width flex flex-wrap\">\n <div class=\"meta-section\">\n <!-- Description : Conditional : If not shown here, will be shown over banner -->\n <mat-card *ngIf=\"\n tocConfig?.overview?.description?.enabled &&\n showDescription &&\n showSubtitleOnBanner &&\n content?.description\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.description?.displayName, 'apptocsinglepage') }}</h2>\n <mat-card-content>\n <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.description)\">\n </div>\n </mat-card-content>\n </mat-card>\n <!-- Content Body -->\n <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.instructions\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.body?.displayName, 'apptocsinglepage') }}\n </h2>\n <mat-card-content>\n <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.instructions)\">\n </div>\n </mat-card-content>\n </mat-card>\n <!-- Learning objective -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n <mat-card-content>\n <p class=\"section-content mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n </mat-card-content>\n </mat-card> -->\n\n <!-- Registration instructions -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.registrationInstructions?.enabled &&\n content?.registrationInstructions?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n <mat-card-content>\n <div class=\"section-content mat-subheading-1 break-words\"\n [innerHTML]=\"content?.registrationInstructions\"></div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\"\n [queryParams]=\"{primaryCategory: preContent?.primaryCategory}\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ certification.name }}\n </p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n {{ playgroundResource.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.equivalentCertifications?.enabled &&\n content?.equivalentCertifications?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier +'?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n {{ equivalentCertification.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n {{ softwareRequirement.title }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- Skills -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n class=\"unit-meta-item mat-app-background\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.skills?.displayName }}</h2>\n <mat-chip-list>\n <mat-chip class=\"section-content\" *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n </mat-chip-list>\n </mat-card> -->\n <!-- Requirements -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n <mat-card-content>\n <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n [href]=\"requirement.url\">\n {{ requirement.title }}\n </a>\n <a mat-stroked-button class=\"margin-right-s\"\n *ngIf=\"!requirement?.url\">{{ requirement.title }}\n </a>\n </ng-container>\n </div>\n </mat-card-content>\n </mat-card> -->\n\n <!-- Training (LHub) -->\n <!-- <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\" >Trainings</h2>\n <h4 class=\"mat-h4\">\n <ng-container>{{ trainingLHubCount }}</ng-container>\n <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n trainings available</ng-container>\n <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n training available</ng-container>\n </h4>\n <div>\n\n </div>\n </mat-card> -->\n\n <!-- Related Topics -->\n <!-- <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.topics?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex flex-between flex-wrapped\">\n <a mat-stroked-button class=\"topic-button text-truncate\"\n *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\"\n [title]=\"topic?.name\" [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n {{ topic?.name }}\n </a>\n </div>\n <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n </a>\n </div>\n </mat-card-content>\n </mat-card>\n <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n <mat-card>\n <h2 >This content is part of</h2>\n </mat-card>\n <mat-accordion>\n <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n <mat-expansion-panel>\n <mat-expansion-panel-header>\n {{ key }}\n </mat-expansion-panel-header>\n <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"\n content.status !== 'Live'\n ? '/author' + '/toc/' + content.identifier +'?primaryCategory='+ item.primaryCategory\n : '/app' + '/toc/' + content.identifier + '?primaryCategory='+ item.primaryCategory\n \">\n <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n </a>\n </div>\n </mat-expansion-panel>\n </ng-container>\n </mat-accordion>\n </div> -->\n </div>\n </div>\n </section>\n <section id=\"authors\" *ngIf=\"(content?.creatorDetails && content?.creatorDetails.length > 0) || (content?.creatorContacts && content?.creatorContacts.length > 0) ||\n (cohortResults[cohortTypesEnum.AUTHORS] && cohortResults[cohortTypesEnum.AUTHORS].length > 0)\">\n <div class=\"fluid-width contacts-container\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.authorsAndCurators' | translate}}</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n <!-- authors -->\n <div *ngFor=\"let author of parseJsonData(content?.creatorDetails)\"\n class=\"unit-cohort sm:pr-8 md:pr-10\">\n <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n [datalen]=\"1\"\n [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n </ws-widget-avatar-photo>\n <div class=\"margin-left-xl\">\n <div class=\"user-name\">{{ author.name }}</div>\n <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.author' | translate}}</p>\n </div>\n </div>\n <!-- curators -->\n <div *ngFor=\"let author of parseJsonData(content?.creatorContacts)\"\n class=\"unit-cohort user-card sm:pr-8 md:pr-10\">\n <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n <ws-widget-avatar-photo class=\"float-left margin-right-s\" [randomColor]=\"true\"\n [datalen]=\"1\"\n [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n </ws-widget-avatar-photo>\n <div class=\"\">\n <div class=\"user-name\">{{ author.name }}</div>\n <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n </div>\n </div>\n <!-- <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n Failed to fetch curators\n </h3>\n <h3 *ngIf=\"\n !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n \" class=\"text-center\" >\n None\n </h3>\n <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n [ngTemplateOutlet]=\"unitCohortNew1\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n </ng-container>\n </div> -->\n </div>\n </div>\n </div>\n </section>\n <section id=\"director\" *ngIf=\"checkForFacilitators.length\">\n <div class=\"fluid-width contacts-container\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.programDirectorFacilitators' | translate}}</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n <!-- <ng-container *ngFor=\"let sessionDetails of selectedBatchData?.content[0]?.batchAttributes?.sessionDetails_v2\"> -->\n <ng-container *ngFor=\"let facilitator of checkForFacilitators\">\n <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n [datalen]=\"1\"\n [size]=\"'round-m'\" [photoUrl]=\"facilitator.photo || ''\" [name]=\"facilitator.name\">\n </ws-widget-avatar-photo>\n <div class=\"margin-left-xl\">\n <div class=\"user-name\">{{ facilitator.name }}</div>\n <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.facilitator' | translate}}</p>\n </div>\n </div>\n </ng-container>\n <!-- </ng-container> -->\n </div>\n </div>\n </div>\n </section>\n <section id=\"competencies\"\n *ngIf=\"content[compentencyKey] && competencies.length\">\n <div class=\"fluid-width contacts-container mb-10\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n </div>\n <div>\n <table class=\"compt-table width-1-1 text-left\">\n <tr>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.subTheme' | translate}}</th>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.theme' | translate}} </th>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.area' | translate}}</th>\n </tr>\n <tr *ngFor=\"let comp of competencies\">\n <td class=\"padding-xs mat-body-1\">{{comp.competencySubTheme}}</td>\n <td class=\"padding-xs mat-body-1\">{{comp.competencyTheme}}</td>\n <td class=\"padding-xs mat-body-1\">{{comp.competencyArea}}</td>\n </tr>\n </table>\n </div>\n </div>\n </section>\n <!-- <section id=\"competencies\"\n *ngIf=\"((!content?.test_competencies_v4 && content?.competencies_v3) &&\n (competencies.length) || (content?.competencies && competencies.length))\">\n <div class=\"fluid-width contacts-container mb-10\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n </div>\n <div>\n <table class=\"compt-table width-1-1 text-left\">\n <tr>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.competency' | translate}}</th>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.type' | translate}}</th>\n </tr>\n <tr *ngFor=\"let comp of competencies\">\n <td class=\"padding-xs mat-body-1\">{{comp.name}}</td>\n <td class=\"padding-xs mat-body-1\">{{comp.competencyType}}</td>\n </tr>\n </table>\n </div>\n </div>\n </section> -->\n <section id=\"rating\" *ngIf=\"!forPreview\">\n <div class=\"fluid-width contacts-container mb-10\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.ratingsReviews' | translate}}</h2>\n </div>\n <!-- <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary> -->\n\n <div class=\"search\">\n <form [formGroup]=\"searchForm\">\n <div class=\"flex top_search_box\">\n <div class=\"flex-1 search_box_inner\">\n <div class=\"flex flex-1 flex-column margin-fix search search_box_main\">\n <mat-form-field appearance=\"outline\"\n class=\"autocomplete-form search_form margin-right-s\" color=\"primary\">\n <mat-icon matPrefix\n class=\"flex items-center justify-center mr-2\">search\n </mat-icon>\n <!-- <mat-label>Search</mat-label> -->\n <input type=\"search\" name=\"searchKey\" #searchKey class=\"ml-2\" i18-aria-label\n aria-label=\"Search\" formControlName=\"searchKey\"\n i18n-placeholder=\"search\" [placeholder]=\"'apptocsinglepage.search' | translate\" matInput maxlength=\"50\"/>\n <!-- (input)=\"updateQuery(searchKey.value)\" -->\n </mat-form-field>\n </div>\n </div>\n <div class=\"item_dropdown_box\">\n <div class=\"flex flex-1 flex-wrap section-input\">\n <div class=\"item\">\n <mat-form-field class=\"\" appearance=\"outline\">\n <mat-select #sortBySelect formControlName=\"sortByControl\"\n i18n-placeholder placeholder=\"Sort by\">\n <mat-option [value]=\"'topReviews'\" slected>{{'apptocsinglepage.topReviews' | translate}}\n </mat-option>\n <mat-option [value]=\"'latestReviews'\">{{'apptocsinglepage.latestReviews' | translate}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </div>\n </form>\n </div>\n\n <!-- <div class=\"rating-comments\">\n <ng-container *ngFor=\"let c of ratingReviews|\n pipeFilterV3:{ 'user_id': searchKey.value, 'review': searchKey.value } : false |\n slice:0:ratingViewCount; let i= index; let last = last\">\n <ws-widget-card-rating-comment [review]=\"c\"></ws-widget-card-rating-comment>\n\n <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n *ngIf=\"ratingReviews?.length > 3 && ratingViewCount <=3 && i>=2 && last\">\n <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \"\n (click)=\"showALLReviews(ratingReviews?.length)\">\n <span >SEE ALL {{ratingReviews?.length}} REVIEWS</span>\n </a>\n </div>\n <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n *ngIf=\"ratingReviews?.length > 3 && ratingViewCount > 3 && i>=2 && last\">\n <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \" (click)=\"showALLReviews(3)\">\n <span >SEE LESS REVIEWS</span>\n </a>\n </div>\n </ng-container>\n </div> -->\n\n <div class=\"rating-comments\" *ngIf=\"ratingReviews\">\n <div infiniteScroll\n [infiniteScrollDistance]=\"1\"\n [infiniteScrollThrottle]=\"150\"\n [infiniteScrollContainer]=\"'.rating-comments'\"\n [fromRoot]=\"true\"\n [scrollWindow]=\"false\"\n (scrolled)=\"loadMore()\">\n <ng-container *ngFor=\"let c of ratingReviews|\n pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false; let i= index; let last = last\">\n <ws-widget-card-rating-comment [review]=\"authReplies[c.userId]\" [contentid]=\"content?.identifier\"></ws-widget-card-rating-comment>\n </ng-container>\n </div>\n <div *ngIf=\"displayLoader\" class=\"mt-5 pr-4 flex items-center justify-center spinner-border\">\n <mat-spinner [diameter]=\"30\"></mat-spinner>\n </div>\n <h4 *ngIf=\"(ratingReviews | pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false)?.length <=0\n && (displayLoader === false)\" class=\"w-full text-left ws-mat-black60-text \">\n {{'apptocsinglepage.noReviewsFound' | translate}}\n </h4>\n </div>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n <mat-tab label=\"{{'apptocsinglepage.content' | translate}}\" *ngIf=\"content?.children?.length\">\n <ng-template matTabContent>\n <section id=\"content\">\n <div class=\"fixed-width\">\n <ws-app-app-toc-contents [batchId]=\"batchId\" [content]=\"content\" [forPreview]=\"forPreview\">\n </ws-app-app-toc-contents>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n <mat-tab label=\"{{'apptocsinglepage.sessions' | translate}}\" *ngIf=\"content?.children?.length && (content?.primaryCategory === primaryCategory.BLENDED_PROGRAM)\">\n <ng-template matTabContent>\n <section id=\"content\">\n <div class=\"fixed-width\">\n <ws-app-app-toc-sessions [batchData]=\"selectedBatchData\" [content]=\"content\" [forPreview]=\"forPreview\" [config]=\"tocConfig\">\n </ws-app-app-toc-sessions>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n <mat-tab label=\"{{'apptocsinglepage.discussion' | translate}}\" *ngIf=\"!forPreview\">\n <ng-template matTabContent>\n <section id=\"discussion-forum\">\n <div class=\"fixed-width toc-discussion-container\">\n <!-- <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion> -->\n <all-discussion-widget style=' width: 100%;' [config]=\"discussionConfig\"></all-discussion-widget>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n</mat-tab-group>\n\n<!-- <section id=\"cohorts\">\n <div class=\"fixed-width toc-discussion-container\">\n <ws-app-toc-cohorts [content]=\"content\" class=\"cohorts\"></ws-app-toc-cohorts>\n </div>\n</section> -->\n\n<ng-template #unitCohortNew1 let-user=\"user\">\n <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n [name]=\"getUserFullName(user)\">\n </ws-widget-avatar-photo>\n <div class=\"margin-left-l\">\n <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n class=\"width-expand padding-left-xs\">\n <div class=\"mat-body-1 cohorts-name\">\n {{\n { firstName: user.first_name, email: user.email }\n | pipeNameTransform\n }}\n </div>\n <p class=\"mat-body-2 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #unitCohortNew let-user=\"user\">\n <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image> -->\n <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n [name]=\"getUserFullName(user)\">\n </ws-widget-avatar-photo>\n <div class=\"margin-left-l\">\n <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n class=\"width-expand padding-left-xs\">\n <!-- <div class=\"mat-body-1 cohorts-name\">\n {{\n { firstName: user.first_name, lastName: user.last_name, email: user.email }\n | pipeNameTransform\n }}\n </div> -->\n <ws-widget-connection-name\n [hoverUser]=\"{firstName: user.first_name, id:user.uid,designation: user.designation,department:user.department}\">\n </ws-widget-connection-name>\n <!-- {{user | json}} -->\n <p class=\"mat-body-2 ws-mat-black60-text\">{{user.designation}}</p>\n <!-- <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n </div>\n <div class=\"width-auto user-action-container\">\n <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n </ws-widget-btn-mail-user>\n <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n userName:\n {\n firstName: user.first_name,\n lastName: user.last_name,\n email: user.email\n } | pipeNameTransform,\n userPhone: user.phone_No\n }\"></ws-widget-btn-call> -->\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".fixed-width{max-width:1200px;display:block;margin:0 auto;padding:0 15px!important}.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.toc-body{padding-bottom:30px}.toc-body .toc-links{position:sticky;top:0;width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links ::ng-deep .mat-tab-links{margin:24px 0 0}.toc-body .toc-links .mat-tab-link{color:#5f5f5f;text-align:left;padding-left:0;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:#00a9f4!important;border-bottom:none!important;font-weight:400!important}.section-content{word-break:break-word}.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}.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:24px;box-shadow:none;padding:0!important;background:transparent!important}@media only screen and (max-width: 599px){.meta-section{width:100%}}.info-section{width:28%;padding:0 8px;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section .glance-container .info-container{margin-bottom:24px}.info-section .glance-container .info-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-section .glance-container .info-container .info-item h3{margin:0}.info-section .glance-container .info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px;text-align:left;letter-spacing:0px}.info-section .glance-container .info-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-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;outline:none;cursor:pointer}.divider-transparent{border-top-color:transparent!important}.section-heading,.section-content{letter-spacing:0px;color:#222}.resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box!important;box-shadow:0 10px 30px #9993;color:#fff!important}.resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.compt-table{border-spacing:0px 6px!important}.compt-table th{background:#0000000a;font-weight:700!important}.compt-table td{background:#fff}.custom-tabgroup .fixed-width{padding:0!important}.custom-tabgroup .unit-cohort{background:#e7eaeb;margin:10px 0;padding:22px 15px;border-radius:4px;align-self:center}.custom-tabgroup .unit-cohort .circle-l-xs,.custom-tabgroup .unit-cohort .circle-l-s,.custom-tabgroup .unit-cohort .circle-l,.custom-tabgroup .unit-cohort .circle-xl,.custom-tabgroup .unit-cohort .circle-m,.custom-tabgroup .unit-cohort .circle-xxl{width:56px!important;height:56px!important}::ng-deep .custom-tabgroup .mat-tab-header{border:0!important}::ng-deep .custom-tabgroup .mat-tab-body{padding:15px 0 220px!important;box-sizing:border-box;overflow-y:initial!important}@media (min-width: 767px) and (max-width: 1050px){::ng-deep .custom-tabgroup .mat-tab-body.mat-tab-body-active{overflow-x:initial!important}}::ng-deep .custom-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep .custom-tabgroup .mat-tab-label{border-bottom:2px solid rgba(0,0,0,.1);margin-right:3%}::ng-deep .custom-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:uppercase}::ng-deep .custom-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.rating-comments{height:auto;max-height:400px;padding:0 15px 0 0;overflow-y:auto;box-sizing:border-box}.view-all{border:1px solid #d3d3d3}.rating-progress{width:100%;max-width:298px}.bold-imp{font-weight:700!important}.mb-0{margin-bottom:0!important}.user-card{display:flex;align-items:center;justify-content:flex-start}.spinner-border{overflow:hidden}\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: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ConnectionNameComponent, selector: "ws-widget-connection-name", inputs: ["hoverUser", "showBadge"] }, { kind: "component", type: CardRatingCommentComponent, selector: "ws-widget-card-rating-comment", inputs: ["review", "contentid"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AppTocSessionsComponent, selector: "ws-app-app-toc-sessions", inputs: ["batchData", "content", "forPreview", "config"] }, { kind: "pipe", type: i2$1.PipeNameTransformPipe, name: "pipeNameTransform" }, { kind: "pipe", type: i2$1.PipeFilterV3Pipe, name: "pipeFilterV3" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
24075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSinglePageComponent, selector: "ws-app-app-toc-single-page", inputs: { content: "content", initialrouteData: "initialrouteData", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabSelectedIndex\" class=\"custom-tabgroup\" (selectedTabChange)=\"tabClicked($event)\">\n <mat-tab label=\"{{'apptocsinglepage.overview' | translate}}\">\n <ng-template matTabContent>\n <section id=\"overview\">\n <div class=\"fixed-width flex flex-wrap\">\n <div class=\"meta-section\">\n <!-- Description : Conditional : If not shown here, will be shown over banner -->\n <mat-card *ngIf=\"\n tocConfig?.overview?.description?.enabled &&\n showDescription &&\n showSubtitleOnBanner &&\n content?.description\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.description?.displayName, 'apptocsinglepage') }}</h2>\n <mat-card-content>\n <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.description)\">\n </div>\n </mat-card-content>\n </mat-card>\n <!-- Content Body -->\n <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.instructions\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.body?.displayName, 'apptocsinglepage') }}\n </h2>\n <mat-card-content>\n <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.instructions)\">\n </div>\n </mat-card-content>\n </mat-card>\n <!-- Learning objective -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n <mat-card-content>\n <p class=\"section-content mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n </mat-card-content>\n </mat-card> -->\n\n <!-- Registration instructions -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.registrationInstructions?.enabled &&\n content?.registrationInstructions?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n <mat-card-content>\n <div class=\"section-content mat-subheading-1 break-words\"\n [innerHTML]=\"content?.registrationInstructions\"></div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\"\n [queryParams]=\"{primaryCategory: preContent?.primaryCategory}\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ certification.name }}\n </p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n {{ playgroundResource.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier + '?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.equivalentCertifications?.enabled &&\n content?.equivalentCertifications?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier +'?primaryCategory='+ item.primaryCategory\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n {{ equivalentCertification.name }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngIf=\"\n tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n \" class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n {{ softwareRequirement.title }}</p>\n </a>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- Skills -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n class=\"unit-meta-item mat-app-background\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.skills?.displayName }}</h2>\n <mat-chip-list>\n <mat-chip class=\"section-content\" *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n </mat-chip-list>\n </mat-card> -->\n <!-- Requirements -->\n <!-- <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n <mat-card-content>\n <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n [href]=\"requirement.url\">\n {{ requirement.title }}\n </a>\n <a mat-stroked-button class=\"margin-right-s\"\n *ngIf=\"!requirement?.url\">{{ requirement.title }}\n </a>\n </ng-container>\n </div>\n </mat-card-content>\n </mat-card> -->\n\n <!-- Training (LHub) -->\n <!-- <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\"\n class=\"unit-meta-item\">\n <h2 class=\"section-heading\" >Trainings</h2>\n <h4 class=\"mat-h4\">\n <ng-container>{{ trainingLHubCount }}</ng-container>\n <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n trainings available</ng-container>\n <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n training available</ng-container>\n </h4>\n <div>\n\n </div>\n </mat-card> -->\n\n <!-- Related Topics -->\n <!-- <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n <h2 class=\"section-heading\">{{ tocConfig?.overview?.topics?.displayName }}</h2>\n <mat-card-content>\n <div class=\"flex flex-between flex-wrapped\">\n <a mat-stroked-button class=\"topic-button text-truncate\"\n *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\"\n [title]=\"topic?.name\" [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n {{ topic?.name }}\n </a>\n </div>\n <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n </a>\n </div>\n </mat-card-content>\n </mat-card>\n <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n <mat-card>\n <h2 >This content is part of</h2>\n </mat-card>\n <mat-accordion>\n <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n <mat-expansion-panel>\n <mat-expansion-panel-header>\n {{ key }}\n </mat-expansion-panel-header>\n <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n <span class=\"mr-1\">\n <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n </span>\n <a class=\"ws-mat-primary-text\" [routerLink]=\"\n content.status !== 'Live'\n ? '/author' + '/toc/' + content.identifier +'?primaryCategory='+ item.primaryCategory\n : '/app' + '/toc/' + content.identifier + '?primaryCategory='+ item.primaryCategory\n \">\n <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n </a>\n </div>\n </mat-expansion-panel>\n </ng-container>\n </mat-accordion>\n </div> -->\n </div>\n </div>\n </section>\n <section id=\"authors\" *ngIf=\"(content?.creatorDetails && content?.creatorDetails.length > 0) || (content?.creatorContacts && content?.creatorContacts.length > 0) ||\n (cohortResults[cohortTypesEnum.AUTHORS] && cohortResults[cohortTypesEnum.AUTHORS].length > 0)\">\n <div class=\"fluid-width contacts-container\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.authorsAndCurators' | translate}}</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n <!-- authors -->\n <div *ngFor=\"let author of parseJsonData(content?.creatorDetails)\"\n class=\"unit-cohort sm:pr-8 md:pr-10\">\n <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n [datalen]=\"1\"\n [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n </ws-widget-avatar-photo>\n <div class=\"margin-left-xl\">\n <div class=\"user-name\">{{ author.name }}</div>\n <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.author' | translate}}</p>\n </div>\n </div>\n <!-- curators -->\n <div *ngFor=\"let author of parseJsonData(content?.creatorContacts)\"\n class=\"unit-cohort user-card sm:pr-8 md:pr-10\">\n <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n <ws-widget-avatar-photo class=\"float-left margin-right-s\" [randomColor]=\"true\"\n [datalen]=\"1\"\n [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n </ws-widget-avatar-photo>\n <div class=\"\">\n <div class=\"user-name\">{{ author.name }}</div>\n <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n </div>\n </div>\n <!-- <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n Failed to fetch curators\n </h3>\n <h3 *ngIf=\"\n !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n \" class=\"text-center\" >\n None\n </h3>\n <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n [ngTemplateOutlet]=\"unitCohortNew1\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n </ng-container>\n </div> -->\n </div>\n </div>\n </div>\n </section>\n <section id=\"director\" *ngIf=\"checkForFacilitators.length\">\n <div class=\"fluid-width contacts-container\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.programDirectorFacilitators' | translate}}</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n <!-- <ng-container *ngFor=\"let sessionDetails of selectedBatchData?.content[0]?.batchAttributes?.sessionDetails_v2\"> -->\n <ng-container *ngFor=\"let facilitator of checkForFacilitators\">\n <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n [datalen]=\"1\"\n [size]=\"'round-m'\" [photoUrl]=\"facilitator.photo || ''\" [name]=\"facilitator.name\">\n </ws-widget-avatar-photo>\n <div class=\"margin-left-xl\">\n <div class=\"user-name\">{{ facilitator.name }}</div>\n <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.facilitator' | translate}}</p>\n </div>\n </div>\n </ng-container>\n <!-- </ng-container> -->\n </div>\n </div>\n </div>\n </section>\n <section id=\"competencies\"\n *ngIf=\"content[compentencyKey] && competencies.length\">\n <div class=\"fluid-width contacts-container mb-10\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n </div>\n <div>\n <table class=\"compt-table width-1-1 text-left\">\n <tr>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.subTheme' | translate}}</th>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.theme' | translate}} </th>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.area' | translate}}</th>\n </tr>\n <tr *ngFor=\"let comp of competencies\">\n <td class=\"padding-xs mat-body-1\">{{comp.competencySubTheme}}</td>\n <td class=\"padding-xs mat-body-1\">{{comp.competencyTheme}}</td>\n <td class=\"padding-xs mat-body-1\">{{comp.competencyArea}}</td>\n </tr>\n </table>\n </div>\n </div>\n </section>\n <!-- <section id=\"competencies\"\n *ngIf=\"((!content?.test_competencies_v4 && content?.competencies_v3) &&\n (competencies.length) || (content?.competencies && competencies.length))\">\n <div class=\"fluid-width contacts-container mb-10\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n </div>\n <div>\n <table class=\"compt-table width-1-1 text-left\">\n <tr>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.competency' | translate}}</th>\n <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.type' | translate}}</th>\n </tr>\n <tr *ngFor=\"let comp of competencies\">\n <td class=\"padding-xs mat-body-1\">{{comp.name}}</td>\n <td class=\"padding-xs mat-body-1\">{{comp.competencyType}}</td>\n </tr>\n </table>\n </div>\n </div>\n </section> -->\n <section id=\"rating\" *ngIf=\"!forPreview\">\n <div class=\"fluid-width contacts-container mb-10\">\n <div class=\"fixed-width flex flex-col flex-wrap\">\n <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.ratingsReviews' | translate}}</h2>\n </div>\n <!-- <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary> -->\n\n <div class=\"search\">\n <form [formGroup]=\"searchForm\">\n <div class=\"flex top_search_box\">\n <div class=\"flex-1 search_box_inner\">\n <div class=\"flex flex-1 flex-column margin-fix search search_box_main\">\n <mat-form-field appearance=\"outline\"\n class=\"autocomplete-form search_form margin-right-s\" color=\"primary\">\n <mat-icon matPrefix\n class=\"flex items-center justify-center mr-2\">search\n </mat-icon>\n <!-- <mat-label>Search</mat-label> -->\n <input type=\"search\" name=\"searchKey\" #searchKey class=\"ml-2\" i18-aria-label\n aria-label=\"Search\" formControlName=\"searchKey\"\n i18n-placeholder=\"search\" [placeholder]=\"'apptocsinglepage.search' | translate\" matInput maxlength=\"50\"/>\n <!-- (input)=\"updateQuery(searchKey.value)\" -->\n </mat-form-field>\n </div>\n </div>\n <div class=\"item_dropdown_box\">\n <div class=\"flex flex-1 flex-wrap section-input\">\n <div class=\"item\">\n <mat-form-field class=\"\" appearance=\"outline\">\n <mat-select #sortBySelect formControlName=\"sortByControl\"\n i18n-placeholder placeholder=\"Sort by\">\n <mat-option [value]=\"'topReviews'\" slected>{{'apptocsinglepage.topReviews' | translate}}\n </mat-option>\n <mat-option [value]=\"'latestReviews'\">{{'apptocsinglepage.latestReviews' | translate}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </div>\n </form>\n </div>\n\n <!-- <div class=\"rating-comments\">\n <ng-container *ngFor=\"let c of ratingReviews|\n pipeFilterV3:{ 'user_id': searchKey.value, 'review': searchKey.value } : false |\n slice:0:ratingViewCount; let i= index; let last = last\">\n <ws-widget-card-rating-comment [review]=\"c\"></ws-widget-card-rating-comment>\n\n <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n *ngIf=\"ratingReviews?.length > 3 && ratingViewCount <=3 && i>=2 && last\">\n <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \"\n (click)=\"showALLReviews(ratingReviews?.length)\">\n <span >SEE ALL {{ratingReviews?.length}} REVIEWS</span>\n </a>\n </div>\n <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n *ngIf=\"ratingReviews?.length > 3 && ratingViewCount > 3 && i>=2 && last\">\n <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \" (click)=\"showALLReviews(3)\">\n <span >SEE LESS REVIEWS</span>\n </a>\n </div>\n </ng-container>\n </div> -->\n\n <div class=\"rating-comments\" *ngIf=\"ratingReviews\">\n <div infiniteScroll\n [infiniteScrollDistance]=\"1\"\n [infiniteScrollThrottle]=\"150\"\n [infiniteScrollContainer]=\"'.rating-comments'\"\n [fromRoot]=\"true\"\n [scrollWindow]=\"false\"\n (scrolled)=\"loadMore()\">\n <ng-container *ngFor=\"let c of ratingReviews|\n pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false; let i= index; let last = last\">\n <ws-widget-card-rating-comment [review]=\"authReplies[c.userId]\" [contentid]=\"content?.identifier\"></ws-widget-card-rating-comment>\n </ng-container>\n </div>\n <div *ngIf=\"displayLoader\" class=\"mt-5 pr-4 flex items-center justify-center spinner-border\">\n <mat-spinner [diameter]=\"30\"></mat-spinner>\n </div>\n <h4 *ngIf=\"(ratingReviews | pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false)?.length <=0\n && (displayLoader === false)\" class=\"w-full text-left ws-mat-black60-text \">\n {{'apptocsinglepage.noReviewsFound' | translate}}\n </h4>\n </div>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n <mat-tab label=\"{{'apptocsinglepage.content' | translate}}\" *ngIf=\"content?.children?.length\">\n <ng-template matTabContent>\n <section id=\"content\">\n <div class=\"fixed-width\">\n <ws-app-app-toc-contents [batchId]=\"batchId\" [content]=\"content\" [forPreview]=\"forPreview\">\n </ws-app-app-toc-contents>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n <mat-tab label=\"{{'apptocsinglepage.sessions' | translate}}\" *ngIf=\"content?.children?.length && (content?.primaryCategory === primaryCategory.BLENDED_PROGRAM)\">\n <ng-template matTabContent>\n <section id=\"content\">\n <div class=\"fixed-width\">\n <ws-app-app-toc-sessions [batchData]=\"selectedBatchData\" [content]=\"content\" [forPreview]=\"forPreview\" [config]=\"tocConfig\">\n </ws-app-app-toc-sessions>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n <mat-tab label=\"{{'apptocsinglepage.discussion' | translate}}\" *ngIf=\"!forPreview\">\n <ng-template matTabContent>\n <section id=\"discussion-forum\">\n <div class=\"fixed-width toc-discussion-container\">\n <!-- <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion> -->\n <all-discussion-widget style=' width: 100%;' [config]=\"discussionConfig\"></all-discussion-widget>\n </div>\n </section>\n </ng-template>\n </mat-tab>\n</mat-tab-group>\n\n<!-- <section id=\"cohorts\">\n <div class=\"fixed-width toc-discussion-container\">\n <ws-app-toc-cohorts [content]=\"content\" class=\"cohorts\"></ws-app-toc-cohorts>\n </div>\n</section> -->\n\n<ng-template #unitCohortNew1 let-user=\"user\">\n <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n [name]=\"getUserFullName(user)\">\n </ws-widget-avatar-photo>\n <div class=\"margin-left-l\">\n <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n class=\"width-expand padding-left-xs\">\n <div class=\"mat-body-1 cohorts-name\">\n {{\n { firstName: user.first_name, email: user.email }\n | pipeNameTransform\n }}\n </div>\n <p class=\"mat-body-2 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #unitCohortNew let-user=\"user\">\n <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image> -->\n <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n [name]=\"getUserFullName(user)\">\n </ws-widget-avatar-photo>\n <div class=\"margin-left-l\">\n <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n class=\"width-expand padding-left-xs\">\n <!-- <div class=\"mat-body-1 cohorts-name\">\n {{\n { firstName: user.first_name, lastName: user.last_name, email: user.email }\n | pipeNameTransform\n }}\n </div> -->\n <ws-widget-connection-name\n [hoverUser]=\"{firstName: user.first_name, id:user.uid,designation: user.designation,department:user.department}\">\n </ws-widget-connection-name>\n <!-- {{user | json}} -->\n <p class=\"mat-body-2 ws-mat-black60-text\">{{user.designation}}</p>\n <!-- <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n </div>\n <div class=\"width-auto user-action-container\">\n <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n </ws-widget-btn-mail-user>\n <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n userName:\n {\n firstName: user.first_name,\n lastName: user.last_name,\n email: user.email\n } | pipeNameTransform,\n userPhone: user.phone_No\n }\"></ws-widget-btn-call> -->\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".fixed-width{max-width:1200px;display:block;margin:0 auto;padding:0 15px!important}.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.toc-body{padding-bottom:30px}.toc-body .toc-links{position:sticky;top:0;width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links ::ng-deep .mat-tab-links{margin:24px 0 0}.toc-body .toc-links .mat-tab-link{color:#5f5f5f;text-align:left;padding-left:0;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:#00a9f4!important;border-bottom:none!important;font-weight:400!important}.section-content{word-break:break-word}.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}.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:24px;box-shadow:none;padding:0!important;background:transparent!important}@media only screen and (max-width: 599px){.meta-section{width:100%}}.info-section{width:28%;padding:0 8px;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section .glance-container .info-container{margin-bottom:24px}.info-section .glance-container .info-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-section .glance-container .info-container .info-item h3{margin:0}.info-section .glance-container .info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px;text-align:left;letter-spacing:0px}.info-section .glance-container .info-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-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;outline:none;cursor:pointer}.divider-transparent{border-top-color:transparent!important}.section-heading,.section-content{letter-spacing:0px;color:#222}.resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box!important;box-shadow:0 10px 30px #9993;color:#fff!important}.resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.compt-table{border-spacing:0px 6px!important}.compt-table th{background:#0000000a;font-weight:700!important}.compt-table td{background:#fff}.custom-tabgroup .fixed-width{padding:0!important}.custom-tabgroup .unit-cohort{background:#e7eaeb;margin:10px 0;padding:22px 15px;border-radius:4px;align-self:center}.custom-tabgroup .unit-cohort .circle-l-xs,.custom-tabgroup .unit-cohort .circle-l-s,.custom-tabgroup .unit-cohort .circle-l,.custom-tabgroup .unit-cohort .circle-xl,.custom-tabgroup .unit-cohort .circle-m,.custom-tabgroup .unit-cohort .circle-xxl{width:56px!important;height:56px!important}::ng-deep .custom-tabgroup .mat-tab-header{border:0!important}::ng-deep .custom-tabgroup .mat-tab-body{padding:15px 0 220px!important;box-sizing:border-box;overflow-y:initial!important}@media (min-width: 767px) and (max-width: 1050px){::ng-deep .custom-tabgroup .mat-tab-body.mat-tab-body-active{overflow-x:initial!important}}::ng-deep .custom-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep .custom-tabgroup .mat-tab-label{border-bottom:2px solid rgba(0,0,0,.1);margin-right:3%}::ng-deep .custom-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:uppercase}::ng-deep .custom-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.rating-comments{height:auto;max-height:400px;padding:0 15px 0 0;overflow-y:auto;box-sizing:border-box}.view-all{border:1px solid #d3d3d3}.rating-progress{width:100%;max-width:298px}.bold-imp{font-weight:700!important}.mb-0{margin-bottom:0!important}.user-card{display:flex;align-items:center;justify-content:flex-start}.spinner-border{overflow:hidden}\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: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ConnectionNameComponent, selector: "ws-widget-connection-name", inputs: ["hoverUser", "showBadge"] }, { kind: "component", type: CardRatingCommentComponent, selector: "ws-widget-card-rating-comment", inputs: ["review", "contentid"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AppTocSessionsComponent, selector: "ws-app-app-toc-sessions", inputs: ["batchData", "content", "forPreview", "config"] }, { kind: "pipe", type: i2$1.PipeNameTransformPipe, name: "pipeNameTransform" }, { kind: "pipe", type: i2$1.PipeFilterV3Pipe, name: "pipeFilterV3" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
24040
24076
|
}
|
|
24041
24077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSinglePageComponent, decorators: [{
|
|
24042
24078
|
type: Component,
|
|
@@ -24158,7 +24194,7 @@ class ConsentDialogComponent {
|
|
|
24158
24194
|
}
|
|
24159
24195
|
});
|
|
24160
24196
|
}
|
|
24161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsentDialogComponent, deps: [{ token: i5$
|
|
24197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsentDialogComponent, deps: [{ token: i5$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.DomSanitizer }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24162
24198
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConsentDialogComponent, selector: "ws-app-consent-dialog", ngImport: i0, template: `
|
|
24163
24199
|
<div class="consent-dialog-wrapper">
|
|
24164
24200
|
<div *ngIf="loading" class="loading-container">
|
|
@@ -24186,7 +24222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
24186
24222
|
</div>
|
|
24187
24223
|
</div>
|
|
24188
24224
|
`, styles: [".consent-dialog-wrapper{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;padding:0;margin:0;background:#fff}.loading-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff}.consent-content{width:100%;flex:1;overflow-y:auto;padding:20px;background:#fff}.consent-buttons{display:flex;gap:12px;padding:20px;background:#fff;border-top:1px solid #e0e0e0;justify-content:center;align-items:center}.btn-disagree{padding:10px 24px;border:2px solid #1B4CA1;background:#fff;color:#1b4ca1;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-disagree:hover{background:#f5f5f5}.btn-agree{padding:12px 24px;border:none;background:#1b4ca1;color:#fff;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-agree:hover{background:#1b4ca1}\n"] }]
|
|
24189
|
-
}], ctorParameters: function () { return [{ type: i5$
|
|
24225
|
+
}], ctorParameters: function () { return [{ type: i5$4.MatDialogRef }, { type: undefined, decorators: [{
|
|
24190
24226
|
type: Inject,
|
|
24191
24227
|
args: [MAT_DIALOG_DATA]
|
|
24192
24228
|
}] }, { type: i1$5.DomSanitizer }, { type: i1.HttpClient }]; } });
|
|
@@ -24656,13 +24692,13 @@ class AppTocCiosHomeComponent {
|
|
|
24656
24692
|
});
|
|
24657
24693
|
}
|
|
24658
24694
|
}
|
|
24659
|
-
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$
|
|
24695
|
+
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 }); }
|
|
24660
24696
|
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 <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2\">\n <div>\n <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n courses are visible only after you complete the course and pass the assessment.</span>\n </div>\n </div>\n </ng-container>\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=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\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=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\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 <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\n *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\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=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\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 && widgetData && widgetData.sliderData?.length\">\n <div class=\"no-certificate-found\">\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\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 <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>", 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.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.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { 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" }] }); }
|
|
24661
24697
|
}
|
|
24662
24698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, decorators: [{
|
|
24663
24699
|
type: Component,
|
|
24664
24700
|
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 <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2\">\n <div>\n <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n courses are visible only after you complete the course and pass the assessment.</span>\n </div>\n </div>\n </ng-container>\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=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\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=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\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 <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\n *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\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=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\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 && widgetData && widgetData.sliderData?.length\">\n <div class=\"no-certificate-found\">\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\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 <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>", 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"] }]
|
|
24665
|
-
}], 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$
|
|
24701
|
+
}], 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: [{
|
|
24666
24702
|
type: Inject,
|
|
24667
24703
|
args: ['environment']
|
|
24668
24704
|
}, {
|