@sunbird-cb/toc 0.0.28 → 0.0.30

package/fesm2022/sunbird-cb-toc.mjs

@@ -7818,6 +7818,11 @@ class AppTocAboutComponent {
             this.strip['sectorWidgets'] = this.transformCompetenciesToWidget('Behavioural', this.subSectorDetailArr, this.strip);
         }
     }
+    navigateToNewVersion() {
+        this.router.navigateByUrl('/app/toc', { skipLocationChange: true }).then(() => {
+            this.router.navigate([`app/toc/${this.contentReadData?.contentVersionInfo?.identifier}/overview`]);
+        });
+    }
     ngOnDestroy() {
         this.destroySubject$.unsubscribe();
         this.timerUnsubscribe.unsubscribe();
@@ -7826,11 +7831,11 @@ class AppTocAboutComponent {
         }
     }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n                                            {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n                                                'apptocsinglepage.on' | translate \n                                            }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n                                        </div>\n                                        <ng-template #primaryCategoryCheck>\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                        </ng-template>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n    *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <div class=\"flex items-center content-retire-container\">\n            <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n            <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n                {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n                the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n            </div>\n        </div>\n    </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n    <div class=\"flex flex-col gap-1  cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n        (keydown)=\"navigateToNewVersion()\">\n        <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n    </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 font-bold nodtranslate\">\n                {{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&nbsp;{{\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                    &nbsp;{{ '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                    &nbsp;{{ '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                    &nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </div>\n            <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n                <span class=\"cursor-pointer\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n                    'apptocsinglepage.viewMore' | translate }}</span>\n            </div>\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n    content?.resourceCategory?.toLowerCase() === 'case study')\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n                                            {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n                                                'apptocsinglepage.on' | translate \n                                            }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n                                        </div>\n                                        <ng-template #primaryCategoryCheck>\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                        </ng-template>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n    *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <div class=\"flex items-center content-retire-container\">\n            <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n            <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n                {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n                the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n            </div>\n        </div>\n    </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n    <div class=\"flex flex-col gap-1  cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n        (keydown)=\"navigateToNewVersion()\">\n        <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n    </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 font-bold nodtranslate\">\n                {{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&nbsp;{{\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                    &nbsp;{{ '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                    &nbsp;{{ '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                    &nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </div>\n            <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n                <span class=\"cursor-pointer\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n                    'apptocsinglepage.viewMore' | translate }}</span>\n            </div>\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n    content?.resourceCategory?.toLowerCase() === 'case study')\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i19.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ws-widget-app-toc-about', template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n                                            {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n                                                'apptocsinglepage.on' | translate \n                                            }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n                                        </div>\n                                        <ng-template #primaryCategoryCheck>\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                        </ng-template>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n    *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <div class=\"flex items-center content-retire-container\">\n            <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n            <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n                {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n                the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n            </div>\n        </div>\n    </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n    <div class=\"flex flex-col gap-1  cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n        (keydown)=\"navigateToNewVersion()\">\n        <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n    </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 font-bold nodtranslate\">\n                {{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&nbsp;{{\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                    &nbsp;{{ '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                    &nbsp;{{ '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                    &nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </div>\n            <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n                <span class=\"cursor-pointer\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n                    'apptocsinglepage.viewMore' | translate }}</span>\n            </div>\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n    content?.resourceCategory?.toLowerCase() === 'case study')\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"] }]
+            args: [{ selector: 'ws-widget-app-toc-about', template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.courseCategory;else primaryCategoryCheck\">\n                                            {{ 'apptocsinglepage.completedOn' | translate }} {{content?.courseCategory}} {{\n                                                'apptocsinglepage.on' | translate \n                                            }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}\n\n                                        </div>\n                                        <ng-template #primaryCategoryCheck>\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                        </ng-template>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n<div class=\"flex flex-col mt-4\" [ngClass]=\"isMobile ? 'mx-4' : ''\"\n    *ngIf=\"contentReadData?.retirementDate && contentReadData?.lastEnrollmentDate\">\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <div class=\"flex items-center content-retire-container\">\n            <mat-icon class=\"material-icons retire-info-icon\">warning</mat-icon>\n            <div class=\"body-1\">This course is scheduled for retirement. The last date to enroll is\n                {{contentReadData?.lastEnrollmentDate | date: 'MMMM d, y'}}, and\n                the course will be retired on {{contentReadData?.retirementDate | date: 'MMMM d, y'}}.\n            </div>\n        </div>\n    </ng-container>\n</div>\n<div class=\"flex flex-col mt-4 mx-4 block\" *ngIf=\"isMobile && contentReadData?.contentVersionInfo?.identifier\">\n    <div class=\"flex flex-col gap-1  cursor-pointer switch-version\" (click)=\"navigateToNewVersion()\"\n        (keydown)=\"navigateToNewVersion()\">\n        <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n    </div>\n</div>\n\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 font-bold nodtranslate\">\n                {{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <!-- <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}\n            </div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div> -->\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&nbsp;{{\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                    &nbsp;{{ '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                    &nbsp;{{ '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                    &nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </div>\n            <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n                <span class=\"cursor-pointer\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n                    'apptocsinglepage.viewMore' | translate }}</span>\n            </div>\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n    content?.resourceCategory?.toLowerCase() === 'case study')\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}.retire-info-icon{font-size:28px;height:28px;color:#f3962f;width:28px;overflow:unset!important}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}.content-retire-container{background:#fdead5;border-radius:12px;padding:16px;gap:16px}.content-retire-container .retire-info-icon{font-size:40px;height:40px;width:58px;color:#f3962f}\n"] }]
         }], 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: [{
                     type: Inject,
                     args: ['environment']
@@ -23941,8 +23946,25 @@ class AppTocHomeV2Component {
      * Check if user can enroll in the course
      * Returns true when enrollment is allowed
      */
+    navigateToNewVersion() {
+        this.router.navigateByUrl('/app/toc', { skipLocationChange: true }).then(() => {
+            this.router.navigate([`app/toc/${this.contentReadData?.contentVersionInfo?.identifier}/overview`]);
+        });
+    }
     canEnroll() {
-        return !this.disableEnrollBtn;
+        if (this.contentReadData && this.contentReadData.lastEnrollmentDate) {
+            const serverTime = dayjs(this.serverDate).format('YYYY-MM-DD');
+            const eDate = dayjs(this.contentReadData.lastEnrollmentDate).format('YYYY-MM-DD');
+            if (dayjs(serverTime).isSameOrBefore(eDate)) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            return true;
+        }
     }
     goBack() {
         this.location.back();
@@ -25910,7 +25932,7 @@ class AppTocCiosHomeComponent {
         this.isMobile = false;
         this.enableShare = false;
         this.currentLang = 'en';
-        this.providerTips = [];
+        this.showProviderTips = false;
         this.route.data.subscribe((data) => {
             this.enrollValidationLoading = false;
             if (data && data.extContent && data.extContent.data && data.extContent.data.content) {
@@ -25918,7 +25940,6 @@ class AppTocCiosHomeComponent {
                 this.extContentReadData['certificateObj'] = {
                     data: {},
                 };
-                this.providerTips = _.get(this.extContentReadData, 'contentPartner.providerTips', []);
                 this.skeletonLoader = false;
             }
             else {
@@ -25989,6 +26010,10 @@ class AppTocCiosHomeComponent {
                 height: 'auto',
                 sliderData: _.get(this.extContentReadData, 'contentPartner.providerTips', [])
             };
+            this.showProviderTips = (this.widgetData && this.widgetData.sliderData?.length) &&
+                (Object.keys(this.userExtCourseEnroll).length === 0 ||
+                    (this.userExtCourseEnroll?.issued_certificates?.length === 0 &&
+                        this.userExtCourseEnroll?.progress <= 100));
             if (Object.keys(this.userExtCourseEnroll).length) {
                 this.discussWidgetData.enrolledContent = true;
                 this.discussWidgetData.newCommentSection.commentBox.placeholder = 'Start a discussion';
@@ -26301,11 +26326,11 @@ class AppTocCiosHomeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i5.CommonMethodsService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.WidgetContentService }, { token: CertificateService }, { token: LoaderService }, { token: i5$4.MatDialog }, { token: i7.MatLegacySnackBar }, { token: NetCoreService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                        (click)=\"enRollToExtCourse(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.enroll' | translate }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"enrollValidationLoading\">\n                    <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\">\n                                </ws-widget-app-toc-about>\n                            </ng-container>\n                        </div>\n                    </ng-template>\n                </mat-tab>\n\n                <ng-container *ngIf=\"config?.commentsTab\">\n                    <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n                        <!-- <ng-template matTabContent> -->\n                        <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n                            <ng-container *ngIf=\"!commentId\">\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n                            </ng-container>\n                            <ng-container *ngIf=\"commentId\">\n                                <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n                                    <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n                                    Back to all comments\n                                </div>\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n                                    [skeletonLoader]></d-v2-widget-comment>\n                            </ng-container>\n\n                        </div>\n                        <!-- </ng-template> -->\n                    </mat-tab>\n                </ng-container>\n            </mat-tab-group>\n\n        </div>\n        <div class=\"right-container\">\n            <div class=\"right-content\" #rightContainer>\n                <ng-container *ngIf=\"skeletonLoader\">\n                    <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"!skeletonLoader\">\n                    <div class=\"flex flex-col image-div\"\n                        [ngStyle]=\"{\n            'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n                        [ngClass]=\"{'image-backdrop': scrolled}\">\n                        <div class=\"flex flex-col justify-between text-container\">\n                            <div class=\"flex items-center gap-4 justify-end\">\n                                <div (click)=\"onClickOfShare()\"\n                                    class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n                                    <mat-icon>share</mat-icon>\n                                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                                <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n                                    handleCapitalize(extContentReadData?.name) }}\n                                </div>\n                                <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                        {{ 'cardcontentv2.by' | translate }}\n                        <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n                        <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n                    </div> -->\n                            </div>\n                        </div>\n\n\n                    </div>\n\n\n                </ng-container>\n\n                <ng-container *ngIf=\"!forPreview\">\n                    <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                            <span class=\"mat-body-2  ws-mat-black-text\">\n                                {{userExtCourseEnroll?.progress}}%</span>\n                        </div>\n                        <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                    [progress]=\"userExtCourseEnroll?.progress\"\n                                                    [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                                </ws-widget-content-progress>\n                    </ng-container>   -->\n\n                        <ng-container\n                            *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                            <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                                (click)=\"enRollToExtCourse(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.enroll' | translate }}\n                                </ng-container>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"enrollValidationLoading\">\n                            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length ===  0\n                        && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n                            <div class=\"no-certificate-found\">\n                                <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n                            </div>\n                        </ng-container> -->\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"providerTips?.length\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <div class=\"{{providerTips?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of providerTips\">\n                <span >{{info}}</span>\n            </div>\n        </div>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]; else defaultMsg\">\n                <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.display\">\n                    <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n                        <div class=\"{{config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.info?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of config?.partnersInfo[extContentReadData?.contentPartner?.contentPartnerName]?.info\">\n                            <span >{{info}}</span>\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n            <ng-template #defaultMsg>\n                <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\">\n                    <div>\n                        <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n                            courses are visible only after you complete the course and pass the assessment.</span>\n                    </div>\n                </div>\n            </ng-template> -->\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                        (click)=\"enRollToExtCourse(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.enroll' | translate }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"enrollValidationLoading\">\n                    <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\">\n                                </ws-widget-app-toc-about>\n                            </ng-container>\n                        </div>\n                    </ng-template>\n                </mat-tab>\n\n                <ng-container *ngIf=\"config?.commentsTab\">\n                    <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n                        <!-- <ng-template matTabContent> -->\n                        <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n                            <ng-container *ngIf=\"!commentId\">\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n                            </ng-container>\n                            <ng-container *ngIf=\"commentId\">\n                                <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n                                    <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n                                    Back to all comments\n                                </div>\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n                                    [skeletonLoader]></d-v2-widget-comment>\n                            </ng-container>\n\n                        </div>\n                        <!-- </ng-template> -->\n                    </mat-tab>\n                </ng-container>\n            </mat-tab-group>\n\n        </div>\n        <div class=\"right-container\">\n            <div class=\"right-content\" #rightContainer>\n                <ng-container *ngIf=\"skeletonLoader\">\n                    <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"!skeletonLoader\">\n                    <div class=\"flex flex-col image-div\"\n                        [ngStyle]=\"{\n            'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n                        [ngClass]=\"{'image-backdrop': scrolled}\">\n                        <div class=\"flex flex-col justify-between text-container\">\n                            <div class=\"flex items-center gap-4 justify-end\">\n                                <div (click)=\"onClickOfShare()\"\n                                    class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n                                    <mat-icon>share</mat-icon>\n                                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                                <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n                                    handleCapitalize(extContentReadData?.name) }}\n                                </div>\n                                <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                        {{ 'cardcontentv2.by' | translate }}\n                        <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n                        <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n                    </div> -->\n                            </div>\n                        </div>\n\n\n                    </div>\n\n\n                </ng-container>\n\n                <ng-container *ngIf=\"!forPreview\">\n                    <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                            <span class=\"mat-body-2  ws-mat-black-text\">\n                                {{userExtCourseEnroll?.progress}}%</span>\n                        </div>\n                        <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                    [progress]=\"userExtCourseEnroll?.progress\"\n                                                    [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                                </ws-widget-content-progress>\n                    </ng-container>   -->\n\n                        <ng-container\n                            *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                            <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                                (click)=\"enRollToExtCourse(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.enroll' | translate }}\n                                </ng-container>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"enrollValidationLoading\">\n                            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"showProviderTips\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n        </div>\n    </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ws-app-app-toc-cios-home', template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                        (click)=\"enRollToExtCourse(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.enroll' | translate }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"enrollValidationLoading\">\n                    <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\">\n                                </ws-widget-app-toc-about>\n                            </ng-container>\n                        </div>\n                    </ng-template>\n                </mat-tab>\n\n                <ng-container *ngIf=\"config?.commentsTab\">\n                    <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n                        <!-- <ng-template matTabContent> -->\n                        <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n                            <ng-container *ngIf=\"!commentId\">\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n                            </ng-container>\n                            <ng-container *ngIf=\"commentId\">\n                                <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n                                    <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n                                    Back to all comments\n                                </div>\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n                                    [skeletonLoader]></d-v2-widget-comment>\n                            </ng-container>\n\n                        </div>\n                        <!-- </ng-template> -->\n                    </mat-tab>\n                </ng-container>\n            </mat-tab-group>\n\n        </div>\n        <div class=\"right-container\">\n            <div class=\"right-content\" #rightContainer>\n                <ng-container *ngIf=\"skeletonLoader\">\n                    <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"!skeletonLoader\">\n                    <div class=\"flex flex-col image-div\"\n                        [ngStyle]=\"{\n            'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n                        [ngClass]=\"{'image-backdrop': scrolled}\">\n                        <div class=\"flex flex-col justify-between text-container\">\n                            <div class=\"flex items-center gap-4 justify-end\">\n                                <div (click)=\"onClickOfShare()\"\n                                    class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n                                    <mat-icon>share</mat-icon>\n                                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                                <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n                                    handleCapitalize(extContentReadData?.name) }}\n                                </div>\n                                <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                        {{ 'cardcontentv2.by' | translate }}\n                        <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n                        <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n                    </div> -->\n                            </div>\n                        </div>\n\n\n                    </div>\n\n\n                </ng-container>\n\n                <ng-container *ngIf=\"!forPreview\">\n                    <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                            <span class=\"mat-body-2  ws-mat-black-text\">\n                                {{userExtCourseEnroll?.progress}}%</span>\n                        </div>\n                        <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                    [progress]=\"userExtCourseEnroll?.progress\"\n                                                    [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                                </ws-widget-content-progress>\n                    </ng-container>   -->\n\n                        <ng-container\n                            *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                            <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                                (click)=\"enRollToExtCourse(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.enroll' | translate }}\n                                </ng-container>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"enrollValidationLoading\">\n                            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length ===  0\n                        && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n                            <div class=\"no-certificate-found\">\n                                <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n                            </div>\n                        </ng-container> -->\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"providerTips?.length\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <div class=\"{{providerTips?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of providerTips\">\n                <span >{{info}}</span>\n            </div>\n        </div>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]; else defaultMsg\">\n                <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.display\">\n                    <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n                        <div class=\"{{config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.info?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of config?.partnersInfo[extContentReadData?.contentPartner?.contentPartnerName]?.info\">\n                            <span >{{info}}</span>\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n            <ng-template #defaultMsg>\n                <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\">\n                    <div>\n                        <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n                            courses are visible only after you complete the course and pass the assessment.</span>\n                    </div>\n                </div>\n            </ng-template> -->\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
+            args: [{ selector: 'ws-app-app-toc-cios-home', template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                        (click)=\"enRollToExtCourse(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.enroll' | translate }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"enrollValidationLoading\">\n                    <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\">\n                                </ws-widget-app-toc-about>\n                            </ng-container>\n                        </div>\n                    </ng-template>\n                </mat-tab>\n\n                <ng-container *ngIf=\"config?.commentsTab\">\n                    <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n                        <!-- <ng-template matTabContent> -->\n                        <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n                            <ng-container *ngIf=\"!commentId\">\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n                            </ng-container>\n                            <ng-container *ngIf=\"commentId\">\n                                <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n                                    <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n                                    Back to all comments\n                                </div>\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n                                    [skeletonLoader]></d-v2-widget-comment>\n                            </ng-container>\n\n                        </div>\n                        <!-- </ng-template> -->\n                    </mat-tab>\n                </ng-container>\n            </mat-tab-group>\n\n        </div>\n        <div class=\"right-container\">\n            <div class=\"right-content\" #rightContainer>\n                <ng-container *ngIf=\"skeletonLoader\">\n                    <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"!skeletonLoader\">\n                    <div class=\"flex flex-col image-div\"\n                        [ngStyle]=\"{\n            'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n                        [ngClass]=\"{'image-backdrop': scrolled}\">\n                        <div class=\"flex flex-col justify-between text-container\">\n                            <div class=\"flex items-center gap-4 justify-end\">\n                                <div (click)=\"onClickOfShare()\"\n                                    class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n                                    <mat-icon>share</mat-icon>\n                                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                                <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n                                    handleCapitalize(extContentReadData?.name) }}\n                                </div>\n                                <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                        {{ 'cardcontentv2.by' | translate }}\n                        <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n                        <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n                    </div> -->\n                            </div>\n                        </div>\n\n\n                    </div>\n\n\n                </ng-container>\n\n                <ng-container *ngIf=\"!forPreview\">\n                    <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                            <span class=\"mat-body-2  ws-mat-black-text\">\n                                {{userExtCourseEnroll?.progress}}%</span>\n                        </div>\n                        <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                    [progress]=\"userExtCourseEnroll?.progress\"\n                                                    [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                                </ws-widget-content-progress>\n                    </ng-container>   -->\n\n                        <ng-container\n                            *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                            <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                                (click)=\"enRollToExtCourse(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.enroll' | translate }}\n                                </ng-container>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"enrollValidationLoading\">\n                            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"showProviderTips\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n        </div>\n    </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i5.CommonMethodsService }, { type: i1$2.TranslateService }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.WidgetContentService }, { type: CertificateService }, { type: LoaderService }, { type: i5$4.MatDialog }, { type: i7.MatLegacySnackBar }, { type: NetCoreService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
@@ -26480,7 +26505,8 @@ class AppTocLibModule {
             ReactiveFormsModule,
             WidgetCommentModule,
             SurveyFormQuestionComponent,
-            SurveyFormSectionComponent], exports: [AppTocDiscussionComponent,
+            SurveyFormSectionComponent,
+            SlidersDynamicModule], exports: [AppTocDiscussionComponent,
             AppTocSinglePageComponent,
             AppTocBannerComponent,
             AppTocHomeComponent,
@@ -26586,7 +26612,8 @@ class AppTocLibModule {
             ReactiveFormsModule,
             WidgetCommentModule,
             SurveyFormQuestionComponent,
-            SurveyFormSectionComponent, 
+            SurveyFormSectionComponent,
+            SlidersDynamicModule, 
             // AppTocHomeComponent,
             ShareTocModule] }); }
 }
@@ -26706,6 +26733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         WidgetCommentModule,
                         SurveyFormQuestionComponent,
                         SurveyFormSectionComponent,
+                        SlidersDynamicModule
                     ],
                     providers: [
                         AppTocContentReadResolverService,