@sunbird-cb/toc 0.0.33 → 0.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/_collection/_common/content-toc/app-toc-about/app-toc-about.component.mjs +3 -3
- package/esm2022/lib/components/app-toc-home-v2/app-toc-home-v2.component.mjs +34 -31
- package/fesm2022/sunbird-cb-toc.mjs +35 -32
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/package.json +1 -1
- package/sunbird-cb-toc-0.0.34.tgz +0 -0
- package/sunbird-cb-toc-0.0.33.tgz +0 -0
|
@@ -7838,11 +7838,11 @@ class AppTocAboutComponent {
|
|
|
7838
7838
|
}
|
|
7839
7839
|
}
|
|
7840
7840
|
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 }); }
|
|
7841
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate", fromMDO: "fromMDO" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && !fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.result?.content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.result?.content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && !fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content?.result?.content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n \n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n <div *ngIf=\"fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" [src]=\"content?.result?.content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.result?.content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "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" }] }); }
|
|
7841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate", fromMDO: "fromMDO" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && !fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.result?.content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.result?.content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && !fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && fromMDO\">\n <ws-widget-toc-kpi-values [content]=\"content?.result?.content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n \n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n <div *ngIf=\"fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" [src]=\"content?.result?.content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.result?.content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "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" }] }); }
|
|
7842
7842
|
}
|
|
7843
7843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, decorators: [{
|
|
7844
7844
|
type: Component,
|
|
7845
|
-
args: [{ selector: 'ws-widget-app-toc-about', template: "\n<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && !fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.result?.content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.result?.content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && !fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content?.result?.content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n \n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n <div *ngIf=\"fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" [src]=\"content?.result?.content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.result?.content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"] }]
|
|
7845
|
+
args: [{ selector: 'ws-widget-app-toc-about', template: "\n<ng-template #certificateCard>\n <ng-container *ngIf=\"!disableCertificate\">\n <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n <div class=\"certificate-outer-div\">\n <div class=\"certificate-card\">\n <div class=\"flex flex-col certificate-info p-4 gap-3\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n </div>\n <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n 'apptocsinglepage.on' | translate \n }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n </div>\n <ng-template #primaryCategoryCheck>\n <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Program'\">\n {{ 'apptocsinglepage.completedProgram' | translate }} {{\n content?.completedOn ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n <div *ngIf=\"content?.primaryCategory === 'Course'\">\n {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n ?\n (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n </ng-template>\n </div>\n\n </ng-container>\n </div>\n <div class=\"flex justify-center download-section\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container>\n <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n [diameter]=\"20\"></mat-spinner>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-1\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n alt=\"No certificate image\" />\n <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n alt=\"No certificate image\" />\n <div class=\"flex items-center certificate_overlay\">\n <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n mission.karmayogi@gov.in</a>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"content?.certificateObj?.certId\">\n <div class=\"img-container\">\n <img class=\"celebration-animation\"\n src=\"assets/images/animation/leaderboard_animation.gif\" />\n <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n alt=\"certificate image\" />\n\n <div\n [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n <span *ngIf=\"!downloadCertificateBool\">{{\n 'apptoccontentcard.viewCertificate' | translate }}</span>\n <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n <mat-spinner></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n <img class=\"ceritificate-image\"\n [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n alt=\"certificate image\" />\n </ng-container> -->\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-3 chips-card\">\n <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n <div class=\"chip rounded-full p-2 text-xs\"\n [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n [title]=\"subTheme\">{{ subTheme }}</div>\n </ng-container>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewMore' | translate}}\n </div>\n <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n {{'competencyCardDetails.viewLess' | translate}}\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #certificateLock>\n <div class=\"certificate-outer-div locked-certificate-outer-div\">\n <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n <div class=\"flex justify-center items-center certificate-lock-text\">\n {{ 'apptoc.certificateLocked' | translate }}\n </div>\n <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n <div class=\"locking-screen-description\">\n {{'apptoc.unlockCertificate' | translate}} <span\n class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n 'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n content?.courseCategory : content?.primaryCategory } }}\n </div>\n\n <button mat-button class=\"surveyFormeButton px-7\"\n (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n {{ 'apptocsinglepage.competencies' | translate }}\n <mat-icon\n class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex items-center content-retire-container\">\n <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n </div>\n </div>\n </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n <div class=\"flex flex-col gap-1 cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n (keydown)=\"navigateToNewVersion()\">\n <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n <ng-container\n *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n <div class=\"flex flex-row earned-certificate-container\">\n <div class=\"ribbon\"></div>\n <div class=\"certificate-background\">\n <div class=\"p-4\">\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n <div class=\"earned-certificate-container\">\n <div class=\"flex flex-row\">\n <div class=\"ribbon\"></div>\n <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n </div>\n\n <div class=\"certificate-background\">\n <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && !fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.source }}</div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(fromViewer || router.url.includes('/viewer/pdf/do_')) && fromMDO\">\n <div class=\"flex flex-col gap-1 mt-2\">\n <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.result?.content?.name) }} </div>\n <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n content?.result?.content?.source }}</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n '0' }}\n </div>\n <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n </div>\n <div class=\"batch-info\">\n <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n <div class=\"flex flex-row\">\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n </div>\n <div class=\"flex-1\">\n <div class=\"flex underline\"></div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4 justify-center\">\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n </div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n </div>\n <div class=\"flex items-center counter-label\">\n :\n </div>\n <div class=\"flex flex-row gap-1 items-center\">\n <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-row gap-3\">\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && !fromMDO\">\n \n <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace && fromMDO\">\n <ws-widget-toc-kpi-values [content]=\"content?.result?.content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold nodtranslate\">\n {{ 'apptocsinglepage.description' | translate }}\n </div>\n <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n </div>\n <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n #summaryElem>\n <div class=\"mob-text nodtranslate\"\n [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\"> {{\n 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"summary.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"contentReadData?.instructions || contentReadData?.purpose\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n class=\"mob-text break-words nodtranslate\"></div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' |\n translate\n }}</div>\n <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n #objectivesElem>\n <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"objectives.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <div class=\"flex flex-col\"\n *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n <div class=\"desc\"\n [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n #descElem>\n\n <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n </div>\n <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n {{ 'apptocsinglepage.viewLess' | translate }}</div>\n </div>\n <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n <span class=\"cursor-pointer\"\n (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n 'apptocsinglepage.viewMore' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-3\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-row gap-3\">\n <ng-container *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex flex-row gap-4\">\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n \n <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n <div class=\"flex flex-col\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n </ng-container>\n </div>\n <ng-container *ngFor=\"let item of competenciesObject\">\n <div *ngIf=\"item?.key === competencySelected\">\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- {{content|json}} -->\n <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n <ng-container [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n content?.resourceCategory?.toLowerCase() === 'case study')\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n <ng-container *ngIf=\"sectorsList?.length > 0\">\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n <div class=\"themes-button\"\n [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n <div>\n <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </ws-utils-horizontal-scroller-v2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n <div class=\"mb-2\">\n No Subsector Available\n </div>\n </ng-container>\n </div>\n </ng-container>\n <!-- <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div> -->\n </div>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n <div class=\"flex flex-col\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n <div class=\"flex flex-wrap gap-2\" >\n <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n <div class=\"flex items-center\" *ngIf=\"!isLast\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container> -->\n\n <ng-template #tagsList let-tagData=\"tagData\">\n <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"tagData?.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n #tagsElem>\n <ng-container *ngFor=\"let tag of tagData; let i = index\">\n <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n <ng-container *ngIf=\"content?.searchTags.length\">\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n <span class=\"period\"></span>\n </div>\n </ng-container>\n </div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n </ng-container>\n <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n {{ 'userProfile.noTags' | translate }}\n </div>\n </div>\n </ng-container> -->\n\n <div class=\"mobile-karma-points\">\n <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n </ws-widget-karma-points>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- commented because of new discussion v2 comments implmentation -->\n <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n <div class=\"flex-1 forum-content\">\n <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n <mat-icon>forum</mat-icon>\n <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n </div>\n </div>\n <div class=\"flex-none p-3\">\n <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n </div>\n </div> -->\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <div class=\"flex flex-col gap-6\">\n <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n <div class=\"flex flex-row items-center gap-3\">\n <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2\">\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex flex-row gap-4 items-center\"\n *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n </div>\n </div>\n\n <div class=\"flex flex-row gap-4\"\n *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n <div class=\"flex items-center justify-center\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n </ws-widget-avatar-photo>\n </div>\n <div class=\"flex flex-col gap-1 justify-center\">\n <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n </div>\n </div>\n <div *ngIf=\"fromMDO\" class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n <div class=\"flex flex-row gap-4 items-center\">\n <div class=\"provider-logo-div\">\n <img *ngIf=\"(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" [src]=\"content?.result?.content?.creatorLogo\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n <img *ngIf=\"!(content?.result?.content?.creatorLogo)\" height=\"36px\" width=\"36px\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n </div>\n <div class=\"text-sm break-all\">{{ handleCapitalize(content?.result?.content?.source, 'source') }}</div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n <div class=\"flex flex-col gap-3\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n 'apptocsinglepage.topReviews' | translate }}</div>\n <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n 'msg.showAll' | translate }}</div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n <div class=\"p-4 flex flex-col gap-6\">\n <div class=\"flex flex-row gap-4\">\n <div class=\"flex-1\">\n <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n handleCapitalize(eachReview?.review) }}</div>\n </div>\n <div class=\"flex flex-row gap-2 rating-start-value\">\n <mat-icon>star</mat-icon>\n <div>{{ eachReview?.rating }}</div>\n </div>\n </div>\n <div class=\"flex flex-row gap-2 items-center text-sm\">\n <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n [photoUrl]=\"eachReview?.photo || ''\"\n [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n <div class=\"flex flex-wrap\">\n <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n <div class=\"flex items-center mx-2\">\n <span class=\"period\"></span>\n </div>\n <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n }}</div>\n </div>\n </div>\n </div>\n </div>\n <!-- </ng-container> -->\n <!-- <ng-container *ngIf=\"!content?.averageRating\">\n <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n </div>\n </ng-container> -->\n </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"] }]
|
|
7846
7846
|
}], ctorParameters: function () { return [{ type: RatingService }, { type: i2$1.LoggerService }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }, { type: LoadCheckService }, { type: TimerService }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: DiscussUtilsService }, { type: i1$1.Router }, { type: ReviewComponentDataService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: i2$1.WidgetContentService }, { type: i1$1.ActivatedRoute }, { type: undefined, decorators: [{
|
|
7847
7847
|
type: Inject,
|
|
7848
7848
|
args: ['environment']
|
|
@@ -23922,37 +23922,40 @@ class AppTocHomeV2Component {
|
|
|
23922
23922
|
}
|
|
23923
23923
|
openPublicSurveyPopup(navigationUrl, queryParams) {
|
|
23924
23924
|
// Get survey ID and course ID from environment and content data
|
|
23925
|
-
|
|
23926
|
-
|
|
23927
|
-
|
|
23928
|
-
|
|
23929
|
-
|
|
23930
|
-
this.contentReadData?.
|
|
23931
|
-
|
|
23932
|
-
|
|
23933
|
-
|
|
23934
|
-
|
|
23935
|
-
|
|
23936
|
-
|
|
23937
|
-
|
|
23938
|
-
|
|
23939
|
-
|
|
23940
|
-
|
|
23941
|
-
|
|
23942
|
-
|
|
23943
|
-
|
|
23944
|
-
|
|
23945
|
-
|
|
23946
|
-
|
|
23947
|
-
|
|
23948
|
-
|
|
23949
|
-
|
|
23950
|
-
|
|
23951
|
-
if (
|
|
23952
|
-
|
|
23925
|
+
if (this.forPreview) {
|
|
23926
|
+
this.router.navigate([navigationUrl], { queryParams: queryParams });
|
|
23927
|
+
}
|
|
23928
|
+
else {
|
|
23929
|
+
const surveyId = this.environment.publicContentSurveyId || '';
|
|
23930
|
+
const courseId = this.contentReadData?.identifier || '';
|
|
23931
|
+
const courseName = this.contentReadData?.name || '';
|
|
23932
|
+
const contextOrgId = this.contentReadData?.createdFor && this.contentReadData?.createdFor.length > 0 ?
|
|
23933
|
+
this.contentReadData?.createdFor[0] : '';
|
|
23934
|
+
this.clearExistingPublicSurveyData(surveyId, courseId);
|
|
23935
|
+
const data = {
|
|
23936
|
+
surveyId: surveyId,
|
|
23937
|
+
courseId: courseId,
|
|
23938
|
+
courseName: courseName,
|
|
23939
|
+
contextOrgId: contextOrgId,
|
|
23940
|
+
forPreview: this.forPreview
|
|
23941
|
+
};
|
|
23942
|
+
const dialogRef = this.dialog.open(PublicSurveyFormComponent, {
|
|
23943
|
+
// disableClose: true,
|
|
23944
|
+
width: '750px',
|
|
23945
|
+
maxWidth: '90vw',
|
|
23946
|
+
height: '80vh',
|
|
23947
|
+
data: data,
|
|
23948
|
+
autoFocus: false,
|
|
23949
|
+
});
|
|
23950
|
+
dialogRef.afterClosed().subscribe((result) => {
|
|
23951
|
+
if (result) {
|
|
23952
|
+
// Navigate to the intended URL only when survey is submitted successfully
|
|
23953
|
+
if (navigationUrl) {
|
|
23954
|
+
this.router.navigate([navigationUrl], { queryParams: queryParams });
|
|
23955
|
+
}
|
|
23953
23956
|
}
|
|
23954
|
-
}
|
|
23955
|
-
}
|
|
23957
|
+
});
|
|
23958
|
+
}
|
|
23956
23959
|
}
|
|
23957
23960
|
resumeContentData() {
|
|
23958
23961
|
const navigationUrl = (this.resumeData && !this.certData) ? this.resumeDataLink?.url : this.firstResourceLink?.url;
|